/* Mobile-first: el vendedor cotiza desde el teléfono. Sin framework. */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; color: #1a2330; background: #f5f6f8; }
.container { max-width: 60rem; margin: 0 auto; padding: 1rem; }

/* La barra queda fija arriba y el menú lateral se cuelga justo debajo, así que
   los dos dependen de esta altura. El min-height la vuelve determinista: sin
   él la barra mide lo que midan sus links y el offset del menú sería a ojo. */
:root { --topbar-h: 3rem; }

.topbar { background: #16324f; color: #fff; position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.topbar__nav { max-width: 60rem; margin: 0 auto; padding: .6rem 1rem; min-height: var(--topbar-h); display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.topbar__brand { color: #fff; font-weight: 700; text-decoration: none; }
.topbar__links { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.topbar__links a { color: #d6e3f0; text-decoration: none; }
.linklike { background: none; border: none; color: #d6e3f0; cursor: pointer; font: inherit; padding: 0; }

.flash { padding: .6rem .9rem; border-radius: .4rem; }
.flash--notice { background: #e2f4e5; color: #17632a; }
.flash--alert { background: #fbe4e4; color: #922; }

h1 { font-size: 1.35rem; } h2 { font-size: 1.1rem; margin-top: 1.4rem; }

.card { background: #fff; border: 1px solid #e2e6ec; border-radius: .5rem; padding: 1rem; margin-bottom: .8rem; }
/* Los enlaces-botón traen su propio color: excluirlos evita que el texto del
   botón quede del mismo tono que su fondo (`.card a` le gana en especificidad
   a `.btn`, y la cascada resuelve por especificidad antes que por orden). */
.card a:not(.btn) { color: #16324f; text-decoration: none; font-weight: 600; }
.card__meta { color: #5a6a7c; font-size: .85rem; margin-top: .25rem; }

.badge { display: inline-block; padding: .1rem .55rem; border-radius: 1rem; font-size: .75rem; font-weight: 600; }
.badge--created { background: #e8eef7; color: #16324f; }
.badge--accepted { background: #e2f4e5; color: #17632a; }
.badge--in_production { background: #fdf1dc; color: #8a5a00; }
.badge--rejected { background: #fbe4e4; color: #922; }
/* Vencida no es un estado guardado: se deriva de la fecha de validez. */
.badge--expired { background: #eceff3; color: #5a6a7c; }

form .field { margin-bottom: .9rem; }
form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
form input[type=text], form input[type=email], form input[type=password], form input[type=number],
form input[type=date], form select, form textarea {
  width: 100%; padding: .55rem .6rem; border: 1px solid #c4ccd6; border-radius: .4rem; font-size: 1rem; background: #fff;
}
form .field--inline { display: flex; gap: .5rem; align-items: center; }
form .field--inline label { margin: 0; font-weight: 400; }
.btn { display: inline-block; background: #16324f; color: #fff; border: none; border-radius: .4rem; padding: .65rem 1.1rem; font-size: 1rem; cursor: pointer; text-decoration: none; }
.btn--secondary { background: #5a6a7c; }
.btn--small { padding: .3rem .7rem; font-size: .85rem; }

.errors { background: #fbe4e4; color: #922; border-radius: .4rem; padding: .7rem .9rem; margin-bottom: 1rem; }
.errors ul { margin: .3rem 0 0; padding-left: 1.2rem; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid #e2e6ec; font-size: .9rem; white-space: nowrap; }
th { background: #eef1f5; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #44536a; }
td.num, th.num { text-align: right; }

.tier-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.grid-2 { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr 1fr; }

.auth { max-width: 22rem; margin: 3rem auto; }
.auth h1 { text-align: center; }

.metrics { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
.metric { background: #fff; border: 1px solid #e2e6ec; border-radius: .5rem; padding: 1rem; }
.metric b { display: block; font-size: 1.4rem; }

.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0; }

/* Shell con menú lateral. El contenido conserva su medida cómoda y la barra
   se suma al costado: por eso este ancho es mayor que el de .container. */
.shell { max-width: 78rem; margin: 0 auto; padding: 1rem; display: grid; gap: 1.25rem; align-items: start; }
.shell__main { min-width: 0; }
.footer { font-size: .8rem; color: #5a6a7c; }
.footer--wide { max-width: 78rem; margin: 0 auto; padding: 1rem; }
.topbar__nav--wide { max-width: 78rem; }

/* Menú lateral: en el teléfono se despliega desde un botón (quince secciones
   no pueden comerse la pantalla antes del contenido); desde 64rem queda fijo
   al costado y acompaña el scroll. */
.sidenav__toggle {
  width: 100%; text-align: left; background: #fff; border: 1px solid #e2e6ec;
  border-radius: .5rem; padding: .6rem .8rem; font: inherit; font-weight: 600;
  color: #16324f; cursor: pointer;
}
.sidenav__toggle::after { content: " ▾"; color: #5a6a7c; }
.sidenav__panel { display: none; margin-top: .6rem; }
.sidenav__panel--open { display: block; }

.sidenav__eyebrow {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: #44536a; margin: 1.1rem 0 .35rem; padding-bottom: .3rem; border-bottom: 1px solid #e2e6ec;
}
.sidenav__eyebrow:first-child { margin-top: 0; }
.sidenav__icon { vertical-align: -.12em; margin-right: .3rem; }
.sidenav__list { list-style: none; margin: 0; padding: 0; }
.sidenav__link {
  display: block; padding: .4rem .6rem; border-radius: .35rem; text-decoration: none;
  color: #1a2330; font-size: .9rem; border-left: 2px solid transparent;
}
.sidenav__link:hover { background: #eef1f5; }
.sidenav__link:focus-visible { outline: 2px solid #16324f; outline-offset: 1px; }
.sidenav__link--current { background: #e8eef7; color: #16324f; font-weight: 700; border-left-color: #16324f; }

@media (min-width: 64rem) {
  .shell { grid-template-columns: 15rem minmax(0, 1fr); }
  .sidenav__toggle { display: none; }
  .sidenav__panel { display: block; margin-top: 0; }

  /* El sticky va en el item del grid y no en el panel: el panel mide lo mismo
     que su contenido, así que ahí adentro no tendría recorrido para pegarse.
     Si el menú no cabe en la pantalla, scrollea solo en vez de cortarse. */
  .sidenav {
    position: sticky; top: calc(var(--topbar-h) + 1rem);
    max-height: calc(100vh - var(--topbar-h) - 2rem); overflow-y: auto;
  }
}

/* --- Datos maestros ----------------------------------------------------- */
.mdata__block { margin: 2rem 0; }
.mdata__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mdata__head h2 { margin: 0 0 .5rem; }

.mdata { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.mdata th, .mdata td { padding: .4rem .6rem; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.mdata thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #475569; }
/* Primera columna clavada: en el celular se navega con el dedo sin perder de
   vista de qué fila se trata. */
.mdata tbody th, .mdata thead th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; font-weight: 600; }
.mdata thead th:first-child { z-index: 3; background: #f8fafc; }
.mdata tbody tr:hover td, .mdata tbody tr:hover th { background: #f1f5f9; }
.mdata .num { text-align: right; }

.mdata__cell { width: 100%; min-width: 6rem; padding: .25rem .4rem; border: 1px solid transparent; border-radius: .25rem; text-align: right; font: inherit; font-variant-numeric: tabular-nums; background: transparent; }
.mdata__cell:hover { border-color: #cbd5e1; }
.mdata__cell:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px #bfdbfe; background: #fff; }
.mdata__cell--changed { background: #fef9c3; border-color: #eab308; font-weight: 600; }

.mdata__bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; margin: 1rem 0; padding: .75rem 1rem; border-radius: .5rem; background: #1e293b; color: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .15); }
.mdata__bar span { font-weight: 600; margin-right: auto; }

@media (max-width: 640px) {
  .mdata th, .mdata td { padding: .35rem .45rem; font-size: .85rem; }
  .mdata__cell { min-width: 5rem; }
  .mdata__bar { flex-wrap: wrap; }
}

/* --- Dashboard ---------------------------------------------------------- */
.dashboard__filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin: 1rem 0 2rem; }
.dashboard__charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.dashboard__charts .card h2 { margin: 0 0 .75rem; font-size: 1rem; }
.chart { display: block; overflow: visible; }
.chart__label { font-size: 4px; fill: #64748b; }
.chart__hbars { display: flex; flex-direction: column; gap: .5rem; }
.chart__hbar { display: grid; grid-template-columns: minmax(4.5rem, 8rem) 1fr auto; align-items: center; gap: .5rem; font-size: .9rem; }
.chart__hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart__hbar-track { display: block; width: 100%; height: .75rem; border-radius: .375rem; background: #e2e8f0; overflow: hidden; }
.chart__hbar-value { font-variant-numeric: tabular-nums; color: #475569; }

@media (max-width: 640px) {
  .dashboard__filters { flex-direction: column; align-items: stretch; }
  .dashboard__charts { grid-template-columns: 1fr; }
}

/* --- Cascada de costos --------------------------------------------------- */
/* Registro visual: cifras tabulares alineadas a la derecha, micro-etiquetas en
   mayúscula (el idiom que ya usa .mdata thead th), reglas de 1px en vez de
   cajas dentro de cajas, dos tonos sobre el #16324f de la topbar, cero emoji.
   Motivo unificador: UNA barra apilada repetida a tres escalas — riel,
   acumulado por fase y bus de cierre. */
.casc__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; }
.casc__toggle { display: inline-flex; border: 1px solid #cbd5e1; border-radius: .4rem; overflow: hidden; }
.casc__toggle-link { padding: .3rem .8rem; font-size: .8rem; text-decoration: none; color: #44536a; background: #fff; }
.casc__toggle-link--on { background: #16324f; color: #fff; font-weight: 600; }

.casc__golden { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; padding: .55rem .9rem; border-radius: .4rem; font-size: .85rem; font-variant-numeric: tabular-nums; }
.casc__golden--ok { background: #e2f4e5; color: #17632a; }
.casc__golden--drift { background: #fbe4e4; color: #922; }
.casc__golden-tag, .casc__scenario-tag, .casc__edges-tag, .casc__out-tag, .casc__cell-label,
.casc__reach { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #475569; }
.casc__golden-values { display: flex; gap: .8rem; margin-left: auto; }

.casc__scenario { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .9rem; margin: .6rem 0 1rem; padding: .55rem .9rem; border: 1px solid #e2e6ec; border-radius: .4rem; background: #fff; font-size: .85rem; }

/* Riel: índice sticky con la canasta entera en una barra. */
.casc__rail { position: sticky; top: 0; z-index: 4; padding: .5rem .6rem; margin-bottom: 1.2rem; border-radius: .4rem; background: #fff; border: 1px solid #e2e6ec; }
.casc__rail-bar { display: block; width: 100%; border-radius: .2rem; overflow: hidden; }
.casc__rail-steps { display: flex; gap: .4rem; margin: .45rem 0 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; }
.casc__rail-step { flex: 1 0 5.2rem; scroll-snap-align: start; }
.casc__rail-step a { display: block; padding: .3rem .4rem; border-radius: .25rem; text-decoration: none; color: #1a2330; background: #f8fafc; }
.casc__rail-step--gate a { background: #eef1f5; }
.casc__rail-num { display: block; font-size: .7rem; color: #64748b; }
.casc__rail-name { display: block; font-size: .78rem; font-weight: 600; }
.casc__rail-pct { display: block; font-size: .82rem; font-variant-numeric: tabular-nums; color: #16324f; }

.casc__band { margin: 1.8rem 0; }
.casc__band-title { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: #16324f; }
.casc__band-hint { margin: .15rem 0 .9rem; font-size: .8rem; color: #5a6a7c; }

.casc__phase { margin: 0 0 1.4rem; padding-top: .8rem; border-top: 1px solid #d8dee7; font-variant-numeric: tabular-nums; }
.casc__phase:target { border-top-color: #2563eb; box-shadow: inset 0 2px 0 #2563eb; }
.casc__phase-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .7rem; }
.casc__phase-num { min-width: 1.4rem; font-size: .8rem; font-weight: 700; color: #94a3b8; }
.casc__phase-title { margin: 0; font-size: .95rem; }
.casc__phase-value { font-size: .9rem; font-weight: 600; }
.casc__phase-pct { font-size: .9rem; color: #16324f; }
.casc__phase-src { margin-left: auto; font-size: .7rem; color: #94a3b8; }
.casc__phase-what { margin: .25rem 0 .6rem; font-size: .82rem; color: #5a6a7c; }
.casc__off { margin: .3rem 0; padding: .3rem .55rem; border-left: 2px solid #eab308; font-size: .8rem; color: #8a5a00; background: #fdf9e7; }

.casc__fields th, .casc__fields td { border-bottom: none; vertical-align: baseline; }
.casc__cell-label { display: block; }
.casc__row-value, .casc__row-pct { color: #16324f; font-weight: 600; }
.casc__row-why td { padding-top: 0; border-bottom: 1px solid #eef1f5; }

.casc__why summary { cursor: pointer; list-style: none; font-size: .78rem; }
.casc__why summary::-webkit-details-marker { display: none; }
.casc__why-item { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; margin-right: .9rem; }
.casc__why-perturb { color: #64748b; }
.casc__delta { font-variant-numeric: tabular-nums; }
.casc__delta--up { color: #922; }
.casc__delta--down { color: #17632a; }
.casc__delta--flat, .casc__delta--broken { color: #8a5a00; }

.casc__phase-bar { display: block; width: 100%; margin: .5rem 0 .35rem; border-radius: .15rem; overflow: hidden; }
.chart__seg--a, .chart__seg--now { fill: #16324f; }
.chart__seg--b { fill: #4b7ba8; }
.chart__seg--past { fill: #b9c6d6; }
.chart__seg--rest { fill: #e8edf3; }

.casc__out { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .3rem 0; font-size: .82rem; }
.casc__out-item b { font-weight: 600; }
.casc__edges { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; margin: .3rem 0; }
.casc__edge { display: inline-flex; align-items: baseline; gap: .25rem; padding: .1rem .45rem; border: 1px solid #cbd5e1; border-radius: 1rem; font-size: .74rem; text-decoration: none; color: #16324f; background: #fff; }
.casc__edge:hover { border-color: #16324f; }
.casc__edge-target { font-weight: 700; }

@media (max-width: 640px) {
  .casc__rail-steps { gap: .3rem; }
  .casc__rail-step { flex: 0 0 6.5rem; }
  .casc__phase-src { margin-left: 0; width: 100%; }
  .casc__fields, .casc__fields tbody, .casc__fields tr, .casc__fields th, .casc__fields td { display: block; width: 100%; }
  .casc__fields td { text-align: left; padding: .2rem 0; }
  .casc__fields .num { text-align: left; }
  .casc__row-value, .casc__row-pct { display: inline-block; width: auto; margin-right: .8rem; }
}

/* --- Simulador de impresión ---------------------------------------------- */
/* Mismo registro que la cascada: cifras tabulares, micro-etiquetas en
   mayúscula, reglas de 1px, dos tonos sobre el #16324f de la topbar. Lo que
   cambia es que acá el protagonista es el dibujo: los SVG traen el viewBox en
   milímetros reales, así que el CSS solo los deja respirar — nunca los escala
   con transform, que rompería la proporción que se está revisando. */
.press__specimen { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1rem 0 2rem; padding: .9rem 1.1rem; border: 1px solid #e2e6ec; border-radius: .4rem; background: #fff; }
.press__specimen-id h2 { margin: 0; font-size: 1.05rem; }
.press__dims { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin: 0; }
.press__dims dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #475569; }
.press__dims dd { margin: 0; font-size: .95rem; font-weight: 600; color: #16324f; font-variant-numeric: tabular-nums; }

.press__block { margin: 2.2rem 0; padding-top: .9rem; border-top: 1px solid #d8dee7; }
.press__head h2 { margin: 0; font-size: .95rem; }
.press__head .card__meta { margin: .15rem 0 .9rem; font-size: .8rem; color: #5a6a7c; }

/* El escenario del dibujo: fondo neutro para que el film claro no se pierda. */
.press__stage { padding: 1.2rem 1rem; border-radius: .4rem; background: #f8fafc; border: 1px solid #eef1f5; overflow-x: auto; }
.press__stage--wide { padding: .9rem 1rem; }
.press__web, .press__cylinder { display: block; width: 100%; height: auto; overflow: visible; }
.press__dim { font-size: 13px; fill: #475569; font-variant-numeric: tabular-nums; }
.press__rep-num { font-size: 26px; fill: #64748b; font-variant-numeric: tabular-nums; }

.press__caption { margin: .6rem 0 0; font-size: .82rem; color: #5a6a7c; }
.press__caption b { color: #16324f; }
.press__legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: .78rem; color: #5a6a7c; }
.press__legend li { display: inline-flex; align-items: center; gap: .35rem; }
.press__chip { display: inline-block; width: .85rem; height: .85rem; border-radius: .15rem; border: 1px solid #94a3b8; }
.press__chip--face { background: #fff; }
.press__chip--gusset { background: #dbeafe; border-color: #2563eb; }
.press__chip--knife { width: 0; height: 1rem; border: 0; border-left: 2px dashed #dc2626; border-radius: 0; }
.press__chip--refile { background: #fecaca; border-color: #dc2626; }
.press__chip--accessory { background: #ede9fe; border-color: #7c3aed; }

/* Los cuatro números que hay que poder leer de un vistazo en la reunión. */
.press__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin: 1rem 0 0; }
.press__fact { padding: .55rem .7rem; border-radius: .35rem; background: #f8fafc; border-left: 3px solid #cbd5e1; }
.press__fact span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #475569; }
.press__fact b { display: block; font-size: 1.25rem; font-weight: 600; color: #16324f; font-variant-numeric: tabular-nums; }
.press__fact small { display: block; font-size: .74rem; color: #64748b; }
.press__fact--strong { border-left-color: #16324f; }
.press__fact--warn { border-left-color: #dc2626; }
.press__fact--warn b { color: #922; }

.press__editable { margin-top: 1rem; }
.press__editable td, .press__editable th { vertical-align: baseline; }
.press__note { white-space: normal; font-size: .78rem; color: #5a6a7c; }

/* La línea: una tarjeta por estación, en el orden en que corre el material. */
.press__line { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .7rem; margin: 0; padding: 0; list-style: none; }
.press__station { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: .8rem .9rem; border: 1px solid #e2e6ec; border-radius: .4rem; background: #fff; }
.press__station h3 { margin: 0; font-size: .88rem; }
.press__station .card__meta { margin: 0; font-size: .78rem; color: #5a6a7c; }
.press__station-num { position: absolute; top: .5rem; right: .7rem; font-size: .8rem; font-weight: 700; color: #cbd5e1; }
.press__station-cost { margin-top: auto; padding-top: .4rem; border-top: 1px solid #eef1f5; font-size: .85rem; font-weight: 600; color: #16324f; font-variant-numeric: tabular-nums; }
.press__station--ink { border-color: #cbd5e1; }
.press__station--off { background: #f8fafc; color: #94a3b8; }
.press__station--off h3, .press__station--off .press__station-cost { color: #94a3b8; }

.press__inks { display: flex; flex-wrap: wrap; gap: .5rem; }
.press__ink-body { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.press__ink-body small { font-size: .68rem; color: #64748b; }
.press__ink { display: block; }
.press__ink-label { font-size: 11px; font-weight: 700; fill: #fff; }
.press__ink-label--dark { fill: #334155; }

.press__layers, .press__passes, .press__knives, .press__accessories { display: flex; flex-wrap: wrap; gap: .35rem; }
.press__layer, .press__pass, .press__knife, .press__acc { display: inline-flex; align-items: baseline; gap: .3rem; padding: .12rem .5rem; border: 1px solid #cbd5e1; border-radius: 1rem; font-size: .75rem; color: #16324f; background: #fff; }
.press__layer small { font-size: .68rem; color: #64748b; }
.press__knife { border-color: #fca5a5; color: #922; font-variant-numeric: tabular-nums; }
.press__pass { border-color: #bfdbfe; color: #1e40af; }

@media (max-width: 640px) {
  .press__specimen { flex-direction: column; align-items: flex-start; }
  .press__dims { gap: .3rem 1rem; }
  .press__stage { padding: 1rem .5rem; }
  .press__line { grid-template-columns: 1fr; }
}

/* --- Simulador: el escenario editable ------------------------------------ */
/* El formulario vive FUERA del turbo-frame del dibujo: se re-simula sin que el
   gerente pierda el campo que está moviendo. Por eso puede verse como un
   panel de control fijo y no como parte del contenido. */
.sim__form { margin: 1rem 0 .8rem; padding: .9rem 1.1rem; border: 1px solid #cbd5e1; border-radius: .4rem; background: #fff; }
.sim__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .7rem 1rem; }
.sim__form .field { margin: 0; }
.sim__form label { display: block; margin-bottom: .15rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #475569; font-weight: 600; }
.sim__control { width: 100%; padding: .35rem .5rem; border: 1px solid #cbd5e1; border-radius: .25rem; font: inherit; font-size: .9rem; background: #fff; }
.sim__control:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px #bfdbfe; }
.sim__control--num { text-align: right; font-variant-numeric: tabular-nums; }

.sim__accessories { margin: .8rem 0 0; padding: .5rem .7rem; border: 1px solid #e2e6ec; border-radius: .3rem; }
.sim__accessories legend { padding: 0 .3rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #475569; font-weight: 600; }
.sim__check { display: inline-flex; align-items: center; gap: .3rem; margin-right: .9rem; font-size: .85rem; text-transform: none; letter-spacing: 0; color: #1a2330; font-weight: 400; }
.sim__check input { margin: 0; }

.sim__actions { display: flex; align-items: center; gap: .8rem; margin-top: .8rem; }

.sim__state { margin: 0 0 1rem; padding: .5rem .9rem; border-radius: .35rem; font-size: .84rem; }
.sim__state--golden { background: #e2f4e5; color: #17632a; }
.sim__state--custom { background: #fdf1dc; color: #8a5a00; }
.sim__state a { color: inherit; }
.sim__rejected { margin: -.6rem 0 1rem; padding: .45rem .9rem; border-radius: .35rem; font-size: .82rem; background: #fbe4e4; color: #922; }

/* El cierre del ruteo: la spec de arriba llega hasta acá. */
.sim__prices { margin-top: 1.4rem; }
.sim__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }
.sim__tier { padding: .55rem .7rem; border-radius: .35rem; background: #16324f; color: #fff; }
.sim__tier span { display: block; font-size: .72rem; letter-spacing: .03em; color: #b9c6d6; }
.sim__tier b { display: block; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sim__tier small { display: block; font-size: .72rem; color: #b9c6d6; }

@media (max-width: 640px) {
  .sim__grid { grid-template-columns: 1fr; }
  .sim__tiers { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
}

/* --- Cotizador: precio en vivo ------------------------------------------- */
/* El vendedor cotiza en el celular: el precio queda pegado abajo para verlo
   sin dejar de escribir. .live--stale lo apaga mientras viaja el recálculo —
   un número atenuado se lee como "esto todavía no es el final". */
.live { position: sticky; bottom: 0; z-index: 6; margin: .6rem 0 1.2rem; padding: .7rem .9rem; border: 1px solid #16324f; border-radius: .5rem; background: #16324f; color: #fff; box-shadow: 0 -2px 10px rgb(0 0 0 / .12); transition: opacity .15s ease; }
.live--stale { opacity: .45; }
.live__empty { margin: 0; font-size: .85rem; color: #b9c6d6; }
.live__errors { font-size: .85rem; color: #fecaca; }
.live__errors ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.live__trigger { margin-bottom: .5rem; }

.live__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem; }
.live__tier { padding: .4rem .55rem; border-radius: .35rem; background: rgb(255 255 255 / .07); }
.live__qty { display: block; font-size: .72rem; letter-spacing: .03em; color: #b9c6d6; }
.live__price { display: block; font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.live__total, .live__meta { display: block; font-size: .72rem; color: #b9c6d6; font-variant-numeric: tabular-nums; }

.live__costs { margin-top: .6rem; }
.live__costs summary { cursor: pointer; font-size: .78rem; color: #b9c6d6; }
.live__costs .mdata { background: #fff; color: #1a2330; border-radius: .3rem; margin-top: .4rem; }

@media (max-width: 640px) {
  .live__tiers { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
  .live__price { font-size: 1.2rem; }
}

/* --- Panel comercial ------------------------------------------------------ */
/* Seis indicadores: de a dos en el teléfono, de a tres desde tablet. */
@media (min-width: 640px) { .metrics--six { grid-template-columns: repeat(3, 1fr); } }
.metric small { display: block; color: #5a6a7c; font-size: .75rem; margin-top: .15rem; }
.metric--warn { border-left: 3px solid #ea580c; }
.chart__chip--quoted { background: #2563eb; border-color: #2563eb; }
.chart__chip--approved { background: #0891b2; border-color: #0891b2; }