*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--belk-level-1,#CDD8EA);color:var(--belk-text,#0D2350);min-height:100vh;font-size:14px;line-height:1.5;
  padding-bottom:32px}

/* ── HEADER ── */
/* El header (.hdr y sus hijos) vive en css/belk-shell.css — A7 */

/* ── NAV MENU ── */
.nav-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:490;
  opacity:0;pointer-events:none;transition:opacity .25s}
.nav-ov.open{opacity:1;pointer-events:all}
.nav-menu{position:fixed;top:0;left:0;bottom:0;width:280px;background:var(--belk-brand,#143A7D);color:var(--belk-on-brand,#FFFFFF);
  z-index:500;display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:4px 0 24px rgba(0,0,0,.35)}
.nav-menu.open{transform:translateX(0)}
.nav-hd{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.12);flex-shrink:0}
.nav-close{background:rgba(255,255,255,.1);border:none;color:#fff;
  width:32px;height:32px;border-radius:7px;cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.nav-close:hover{background:rgba(255,255,255,.2)}
.nav-body{flex:1;overflow-y:auto;padding:8px 0}
.nav-section{padding:8px 0}
.nav-section+.nav-section{border-top:1px solid rgba(255,255,255,.08)}
.nav-section-title{font-size:9px;font-weight:800;letter-spacing:.9px;
  color:rgba(255,255,255,.66);text-transform:uppercase;padding:6px 18px 4px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 18px;
  background:none;border:none;color:rgba(255,255,255,.88);font-size:13px;
  font-weight:500;cursor:pointer;transition:background .12s;text-align:left;
  border-radius:0;font-family:inherit;text-decoration:none}
.nav-item:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-item .ni-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.ni-icon svg{width:16px;height:16px;display:block;margin:0 auto;fill:currentColor}
.nav-signout svg{width:14px;height:14px;flex-shrink:0;fill:currentColor}
.nav-item-active{background:rgba(255,255,255,.15);color:#fff;font-weight:700}
.nav-item-active:hover{background:rgba(255,255,255,.2)}
.nav-footer{border-top:1px solid rgba(255,255,255,.12);padding:12px 16px;flex-shrink:0}
.nav-user{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.nav-user-avatar{width:36px;height:36px;border-radius:50%;background:var(--belk-accent,#E87722);
  color:var(--belk-on-accent,#0D2350);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  flex-shrink:0;overflow:hidden;border:2px solid rgba(255,255,255,.2)}
.nav-user-avatar img{width:100%;height:100%;object-fit:cover}
.nav-user-name{font-size:13px;font-weight:700;color:#fff;line-height:1.2}
.nav-user-email{font-size:10px;color:rgba(255,255,255,.5);margin-top:1px}
.nav-signout{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.7);font-size:12px;font-weight:500;cursor:pointer;
  border-radius:8px;transition:all .15s;font-family:inherit}
.nav-signout:hover{background:rgba(255,255,255,.14);color:#fff}

/* ── LAYOUT — una sola columna, centrada ─────────────────────
   En ≥1024 px esto era una grilla de dos columnas dentro de un `wrap` de
   1280: el trabajo real (configuración y piezas) quedaba corrido a la
   izquierda y la columna derecha se vaciaba apenas terminaba la tarjeta de
   resultado — media pantalla en blanco (usuario 2026-09-03: "se ve muy raro
   el diseño en web"). El resultado ahora es una barra anclada arriba
   (§ RESULTADO), así que la página vuelve a ser UNA columna centrada: la
   misma forma en teléfono y en escritorio. */
.wrap{max-width:860px;margin:0 auto;padding:14px 12px;display:flex;flex-direction:column;gap:12px}
@media(min-width:1024px){.wrap{max-width:980px}}

/* ── SECTIONS (same as index.html) ── */
.sec{background:var(--belk-level-3,#FFFFFF);border:1px solid var(--belk-border-strong,rgba(13,35,80,.18));border-radius:var(--belk-radius-sm,8px);
  box-shadow:var(--belk-shadow-1,0 2px 8px rgba(13,35,80,.08));overflow:hidden}
.sec-hd{padding:9px 13px;background:var(--belk-level-1,#CDD8EA);display:flex;align-items:center;
  justify-content:space-between;cursor:pointer;user-select:none;border-bottom:1px solid var(--belk-border-strong,rgba(13,35,80,.18))}
.sec-hd.nocoll{cursor:default}
.sec-ti{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--belk-brand,#143A7D);display:flex;align-items:center;gap:5px}
.sec-ar{color:var(--belk-text-muted,#414B5C);font-size:11px;transition:transform .2s}
.sec-hd.coll .sec-ar{transform:rotate(-90deg)}
.sec-hd.coll+.sec-bd{display:none}
.sec-bd{padding:12px 13px}

/* ── FORMS ── */
.fg{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.fg:last-child{margin-bottom:0}
.fg label{font-size:10px;font-weight:700;color:var(--belk-text-muted,#414B5C);text-transform:uppercase;letter-spacing:.4px}
input[type="number"],input[type="text"],select{
  width:100%;padding:6px 9px;border:1.5px solid var(--belk-border-strong,rgba(13,35,80,.18));border-radius:6px;
  font-size:13px;color:var(--belk-paper-text,#0D2350);background:var(--belk-level-3,#FFFFFF);outline:none;
  transition:border-color .15s;font-family:inherit}
input:focus,select:focus{border-color:var(--belk-link,#2C5AA8);box-shadow:0 0 0 3px rgba(46,95,163,.12)}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fr3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:560px){.fr2,.fr3{grid-template-columns:1fr 1fr}}
@media(max-width:380px){.fr2,.fr3{grid-template-columns:1fr}}

/* ── CONFIGURACIÓN: una LISTA de decisiones ──
   Historia: `.opt-card` (tarjetas de ~52 px, el doble que cualquier botón)
   → fila de dos `.belk-btn--sm` con emoji → interruptor en rejilla de dos
   columnas → esta lista (usuario 2026-09-04, "mejoremos en diseño").
   La rejilla `.fr2` era el problema: la columna izquierda llevaba una línea de
   texto y la derecha una foto de 300 px, así que media sección era un vacío
   blanco de la altura de la foto. Apiladas, las tres decisiones se leen de
   corrido y cada imagen queda pegada a SU interruptor. Los rótulos `.cfg-lbl`
   se fueron con la rejilla: la etiqueta del interruptor ya dice lo que hace. */
.cfg-list{display:flex;flex-direction:column;margin-bottom:12px}
.cfg-item{padding:10px 0}
.cfg-item:first-child{padding-top:0}
.cfg-item:last-child{padding-bottom:0}
.cfg-item+.cfg-item{border-top:1px solid var(--belk-border,rgba(13,35,80,.10))}
/* Lo que pasa al APAGAR el interruptor: una línea, no una segunda píldora. */
.cfg-hint{margin:2px 0 0;font-size:11px;line-height:1.35;color:var(--belk-text-muted,#414B5C)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 11px;border-radius:6px;font-size:12px;font-weight:500;
  cursor:pointer;border:none;transition:all .15s;white-space:nowrap;font-family:inherit}

/* ── PIECES — DESKTOP TABLE ── */
.pz-wrap{overflow-x:auto}
.pz-table{width:100%;border-collapse:separate;border-spacing:0 5px;min-width:620px}
.pz-table thead th{font-size:9px;color:var(--belk-text-muted,#414B5C);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;padding:4px 8px;text-align:left}
.pz-table thead th.center{text-align:center}
.pz-table tbody tr{background:var(--belk-level-1,#CDD8EA);border-radius:8px}
.pz-table tbody td{padding:6px 6px;
  border-top:1px solid var(--belk-border-strong,rgba(13,35,80,.18));border-bottom:1px solid var(--belk-border-strong,rgba(13,35,80,.18));vertical-align:middle}
.pz-table tbody td:first-child{border-left:1px solid var(--belk-border-strong,rgba(13,35,80,.18));border-radius:6px 0 0 6px;padding-left:8px}
.pz-table tbody td:last-child{border-right:1px solid var(--belk-border-strong,rgba(13,35,80,.18));border-radius:0 6px 6px 0;padding-right:6px}
.pz-table input[type="text"],.pz-table input[type="number"]{
  background:var(--belk-level-3,#FFFFFF);border:1.5px solid var(--belk-border-strong,rgba(13,35,80,.18));color:var(--belk-paper-text,#0D2350);
  padding:4px 6px;border-radius:5px;font-size:12px;width:100%}
.pz-table input[type="number"]{text-align:center}
.pz-table input:focus{border-color:var(--belk-link,#2C5AA8)}
.tot-cell{font-weight:700;color:var(--belk-ok,#275A42);text-align:right;white-space:nowrap;font-size:.88rem}
.del-btn{background:none;border:none;color:var(--belk-text-muted,#414B5C);cursor:pointer;font-size:14px;
  padding:3px 6px;border-radius:5px;transition:.15s;display:flex;align-items:center}
.del-btn:hover{color:var(--belk-err,#8E3B31);background:var(--belk-err-soft,#F8E7E3)}
/* Pieza con material propio (R3, proyecto central): su etiqueta al lado del nombre. */
.pz-mat{display:block;margin-top:2px;font-size:10px;line-height:1.2;color:var(--belk-text-muted,#414B5C)}
/* Aviso de material del proyecto (R3): una línea, no bloquea. */
.mat-aviso{margin:8px 0 0;padding:8px 12px;border-radius:8px;font-size:12px;line-height:1.35;
  background:var(--belk-warn-soft,#FBEBD3);color:var(--belk-text,#0D2350);border:1px solid var(--belk-warn,#E8A33D)}
.mat-aviso[hidden]{display:none}

/* ── CANTO BUTTONS ── */
.canto-cell{text-align:center;white-space:nowrap}

/* ── DIAGRAMA DE BORDES (auditoría UX M16) ──
   La pieza vista de frente: arriba/abajo son los largos, izquierda/derecha los anchos.
   Reemplaza los chips L1/L2/A1/A2, que no decían qué borde era cuál. */
/* Medida (2026-09-05): era de 64×44 con bordes de 14 px de alto y barras
   pintadas con `--belk-border-strong`, que dentro de una tarjeta blanca vale
   #D8DFE9 — 1,2 de contraste. O sea: la interacción CENTRAL del módulo se veía
   como un cuadrito gris con «0/4» y los cuatro bordes que hay que tocar no se
   distinguían del fondo. Ahora 88×58 (108×70 en la tarjeta del teléfono) y las
   barras apagadas se pintan con la tinta atenuada, no con el filete. */
.edge-dg{position:relative;width:88px;height:58px;margin:0 auto;display:block}
.eg-body{position:absolute;inset:9px;border-radius:3px;
  background:var(--belk-level-1,#CDD8EA);border:1px solid var(--belk-border,rgba(13,35,80,.10));
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:800;color:var(--belk-text-muted,#414B5C);pointer-events:none}
.eg-body-sub{font-weight:600;opacity:.55}
.edge-dg .eg{position:absolute;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;-webkit-tap-highlight-color:transparent}
.edge-dg .eg::after{content:'';position:absolute;inset:0;margin:auto;border-radius:2px;
  background:var(--belk-text-muted,#414B5C);opacity:.8;transition:background .12s,opacity .12s}
.edge-dg .eg.on::after{background:var(--belk-ok,#275A42);opacity:1}
.edge-dg .eg:hover::after{background:var(--belk-link,#2C5AA8);opacity:1}
.edge-dg .eg:focus-visible{outline:2px solid var(--belk-link,#2C5AA8);outline-offset:1px;border-radius:3px}
/* Largos: barras horizontales arriba y abajo */
.eg-l1,.eg-l2{left:7px;right:7px;height:18px}
.eg-l1{top:0}.eg-l2{bottom:0}
.eg-l1::after,.eg-l2::after{width:100%;height:6px}
/* Anchos: barras verticales a los costados */
.eg-a1,.eg-a2{top:7px;bottom:7px;width:18px}
.eg-a2{left:0}.eg-a1{right:0}
.eg-a1::after,.eg-a2::after{height:100%;width:6px}
/* Leyenda: se explica una vez en el encabezado, no en cada fila */
.canto-hint{display:block;font-size:.62rem;font-weight:500;text-transform:none;
  letter-spacing:0;opacity:.7;margin-top:2px}
.canto-help{background:none;border:0;cursor:pointer;padding:0 3px;color:var(--belk-link,#2C5AA8);display:inline-flex;align-items:center;vertical-align:middle}
.canto-help svg{width:14px;height:14px;display:block}

/* ── PIECES — MOBILE CARDS ── */
.pz-cantos-leyenda{display:none;align-items:center;gap:4px;margin:0 0 8px;
  font-size:.74rem;line-height:1.3;color:var(--belk-text-muted,#414B5C)}
@media(max-width:640px){
  .pz-wrap{overflow-x:visible}
  .pz-table{display:none}
  .pz-cards{display:flex;flex-direction:column;gap:8px}
  /* El dedo es más ancho que el mouse y acá el diagrama es LO que se toca. */
  .pz-card-cantos .edge-dg{width:108px;height:70px;margin:0}
  .pz-card-cantos .eg-l1,.pz-card-cantos .eg-l2{left:9px;right:9px;height:22px}
  .pz-card-cantos .eg-a1,.pz-card-cantos .eg-a2{top:9px;bottom:9px;width:22px}
  /* La leyenda que en escritorio lleva el encabezado de la columna «Cantos».
     En tarjetas ese encabezado no existe, así que sin esto el diagrama era un
     cuadro con «0/4» y nada que dijera para qué sirve. Va UNA vez arriba de la
     lista, no en cada tarjeta. */
  .pz-cantos-leyenda{display:flex}
}
@media(min-width:641px){
  .pz-cards{display:none}
}
.pz-card{background:var(--belk-level-1,#CDD8EA);border:1.5px solid var(--belk-border-strong,rgba(13,35,80,.18));border-radius:8px;padding:10px}
.pz-card-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.pz-card-dims{display:grid;grid-template-columns:80px 1fr 1fr;gap:6px;margin-bottom:6px}
.pz-card-dims .fg{margin-bottom:0}
.pz-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pz-card-cantos{display:flex;gap:4px}
.pz-card-total{font-size:.82rem;font-weight:700;color:var(--belk-ok,#275A42)}

/* ── SIN PIEZAS: MISMO FORMATO, OPCIONES APAGADAS ─────────────
   El módulo tiene UN solo diseño. `body[data-piezas]` no cambia el layout:
   decide si en la tabla se ve el molde en gris o las filas reales, y apaga las
   acciones que no tienen nada que procesar. Así pasar de vacío a lleno es que
   se rellenen unas celdas, no que la página se transforme — el usuario no
   tiene que memorizar dos pantallas por módulo.

   Estas reglas SOLO esconden (nunca fuerzan `display:block`): mostrar lo deja
   la media query de arriba, que es la que decide tabla en escritorio y
   tarjetas en teléfono. */
body[data-piezas="si"] #piecesGhost,
body[data-piezas="si"] #piecesCardsGhost,
body[data-piezas="si"] #sinPiezas{display:none}
body[data-piezas="no"] #piecesBody,
body[data-piezas="no"] #piecesCards{display:none}

/* Molde: barras del color del texto, muy apagadas. No animan — un esqueleto que
   late promete que algo está por llegar, y acá puede que no llegue nada. */
.pz-ghost{pointer-events:none;user-select:none}
.pz-ghost i{display:block;height:11px;border-radius:4px;
  background:var(--belk-text-muted,#414B5C);opacity:.16}
.pz-table tbody#piecesGhost td{vertical-align:middle}
.pz-table tbody#piecesGhost td i{margin:4px auto}
.pz-table tbody#piecesGhost td:first-child i{margin-left:0}
.pz-card.pz-ghost{display:flex;flex-direction:column;gap:9px}
.pz-card.pz-ghost i{height:13px}

/* Franja "de dónde salen las piezas": acompaña a la tabla, no la reemplaza. */
.pz-vacio{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:10px;padding:11px 13px;border-radius:8px;
  background:var(--belk-level-1,#CDD8EA);
  border:1px solid var(--belk-border-strong,rgba(13,35,80,.18))}
.pz-vacio-tx{flex:1 1 200px;font-size:.84rem;color:var(--belk-text,#0D2350)}

/* Totales en cero: el número está, atenuado, para que se lea como "todavía no"
   y no como un resultado real. */
body[data-piezas="no"] .res-box .res-v{color:var(--belk-paper-muted,#414B5C)}

/* ── RESULTADO — la barra anclada bajo el header ─────────────
   Los cuatro totales son el porqué del módulo: mientras se editan piezas
   tienen que estar a la vista. Va ARRIBA del contenido y se estaciona bajo
   el header al scrollear.

   `sticky`, no `fixed`, por dos razones: ocupa su lugar en el flujo (no tapa
   la primera tarjeta ni obliga a compensar con padding en el body) y no es
   un flotante más — el marco ya tiene dos píldoras (§4 del sello), y una
   tercera capa encima de todo sería ruido, no jerarquía.

   `top` = alto de .hdr (52 px, css/belk-shell.css). z-index por debajo del
   header (300) y de las píldoras (340). Es papel blanco, así que la tinta
   sale de la familia --belk-paper-* (§2.2 del sello). */
.res-bar{position:sticky;top:52px;z-index:200;
  display:flex;align-items:center;gap:14px;padding:7px 14px;
  background:var(--belk-paper,#FFFFFF);color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-border-strong,rgba(13,35,80,.18));
  border-radius:var(--belk-radius-sm,8px);
  box-shadow:var(--belk-shadow-2,0 8px 24px rgba(13,35,80,.16))}
.rb-ti{display:flex;align-items:center;gap:5px;flex-shrink:0;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--belk-paper-brand,#143A7D)}

/* Los cuatro números: una fila, separados por un filo — no cuatro cajas
   dentro de una caja. */
.res-grid{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,1fr)}
.res-box{padding:2px 6px;text-align:center;min-width:0;
  border-left:1px solid var(--belk-paper-border,rgba(13,35,80,.10))}
.res-box:first-child{border-left:0}
.res-v{font-size:1.22rem;font-weight:800;color:var(--belk-paper-brand,#143A7D);
  display:block;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-l{font-size:.62rem;color:var(--belk-paper-muted,#414B5C);text-transform:uppercase;
  letter-spacing:.05em;font-weight:600;margin-top:2px;display:block;line-height:1.25}
.res-box.ok .res-v{color:var(--belk-paper-ok,#2E6B4F)}
.res-box.warn .res-v{color:var(--belk-paper-warn,#9C4A12)}

/* Teléfono: la barra sigue anclada (ver el costo mientras se edita es justo
   lo que se necesita ahí), pero paga menos alto: se va la palabra "Resultado"
   y queda el icono. Nunca pasa a dos filas: una barra de dos pisos se come
   el teléfono. */
@media(max-width:640px){
  .res-bar{gap:8px;padding:6px 10px}
  .rb-ti-tx{display:none}
  .res-v{font-size:1.02rem}
  .res-l{font-size:.55rem;letter-spacing:.03em}
  .res-box{padding:2px 4px}
}

/* ── NOTIF ── */

/* ── ACTIONS ROW ── */
.act-row{display:flex;gap:7px;flex-wrap:wrap}
/* ── Impresión (solo el documento) ── */
.print-only{display:none!important}

@media print{
  .hdr,
  .nav-ov,
  .nav-menu,
  #configSec,
  .act-row,
  .btn,
  #catalogRefBanner,
  #piecesGhost,
  #sinPiezas,
  .pz-cards,
  #syncIndicator,
  .no-print{
    display:none!important;
  }

  .print-only{
    display:block!important;
  }

  body,
  .wrap{
    background:#fff!important;
    color:#111!important;
    padding:0!important;
    margin:0!important;
    max-width:100%!important;
  }

  .sec{
    box-shadow:none!important;
    border:1px solid #ddd!important;
    page-break-inside:avoid!important;
    background:#fff!important;
  }

  .pz-table th:last-child,
  .pz-table td:last-child{
    display:none!important;
  }

  .pz-table input[type="text"],
  .pz-table input[type="number"],
  .pz-table select{
    border:none!important;
    background:none!important;
    box-shadow:none!important;
    color:#111!important;
  }

  .res-bar{
    position:static!important;
    box-shadow:none!important;
    border:1px solid #ccc!important;
    background:#fff!important;
    color:#111!important;
    page-break-inside:avoid!important;
  }
  .rb-ti{color:#111!important}
  .rb-ti-tx{display:inline!important}
  .res-grid .res-box{
    display:block!important;
    border-left:1px solid #ccc!important;
    background:#fff!important;
    color:#111!important;
  }
  .res-grid{grid-template-columns:repeat(3,1fr)!important}
  .res-box:first-child{border-left:0!important}
  .res-box .res-v,.res-box .res-l{color:#111!important}
}

/* ── BANDA ILUSTRADA (.cfg-media) ──
   La misma pieza para el tipo de cálculo (excedente ↔ al ras, con crossfade)
   y para la forma de compra (foto del rollo): imagen a la izquierda, la
   explicación a la derecha, mismo alto en las dos. Antes la del cálculo era
   una tarjeta vertical de 300 px —imagen arriba, texto abajo— que obligaba a
   la rejilla de dos columnas y dejaba el vacío al lado.
   Las fotos van SIN borde a propósito: su fondo ya es blanco, igual que la
   banda, así que la plancha aparece apoyada en la banda en vez de metida en
   una cajita. (Venían con fondo negro y con un damero horneado; se limpiaron
   a blanco el 2026-09-04 — de ahí el `?v=4`.) */
.cfg-media{margin-top:8px}
.calc-mode-stage{
  display:grid;
  border:1px solid var(--belk-border-strong,rgba(13,35,80,.18));
  border-radius:var(--belk-radius-sm,8px);
  background:var(--belk-level-3,#FFFFFF);
  overflow:hidden;
}
.calc-mode-pane{
  align-items:center;
  gap:12px;
  padding:8px 12px 8px 8px;
}
/* `contain`, no `cover`: la cinta ondulada es mucho más ancha que alta y
   recortada dejaba de leerse como una cinta. Las fotos vienen recortadas
   sobre transparente, así que el sobrante es el mismo blanco de la banda. */
.calc-mode-pane img{
  display:block;
  width:220px;
  height:104px;
  flex:none;
  object-fit:contain;
  background:#fff;
}
/* Una sola línea, y dice la CONSECUENCIA. El título en negrita se fue porque
   repetía palabra por palabra la etiqueta del interruptor de arriba
   («Sumar 2 cm en cada extremo» / «Lo compro por rollo entero»). */
.calc-mode-copy{min-width:0}
.calc-mode-copy p{
  margin:0;
  font-size:12.5px;
  line-height:1.4;
  color:var(--belk-text,#0D2350);
}

/* Crossfade del tipo de cálculo: los dos paneles ocupan la MISMA celda. */
.calc-mode-pane{
  grid-area:1/1;
  display:flex;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(14px);
  transition:opacity .38s ease, transform .38s ease, visibility 0s linear .38s;
}
.calc-mode-pane[data-pane="margin"]{transform:translateX(-14px)}
.calc-mode-pane.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
  transition:opacity .38s ease, transform .38s ease, visibility 0s;
}
.calc-mode-visual--snap .calc-mode-pane,
.calc-mode-visual--snap .calc-mode-pane.is-active{
  transition:none;
}
@media (prefers-reduced-motion:reduce){
  .calc-mode-pane,
  .calc-mode-pane.is-active{transition:none}
}
/* En el teléfono la foto cede ancho al texto o la explicación queda en
   columna de tres palabras. */
@media (max-width:460px){
  .calc-mode-pane img{width:132px;height:76px}
  .calc-mode-pane{gap:9px;padding:7px 9px 7px 7px}
}