/* ─────────────────────────────────────────────
   TIPOGRAFÍAS · servidas desde el propio sitio

   Antes venían de Google Fonts. Se trajeron acá por tres razones, y la
   primera es la que importa: con señal mala —que es el caso de uso, alguien
   en la carretera— una hoja de estilos de terceros bloquea el render. Además
   era la única dependencia externa que le quedaba al proyecto, y hacía que
   cada visita le contara a Google que alguien entró.

   Archivo e IBM Plex Mono son SIL Open Font License: redistribuirlas está
   permitido. Se bajaron solo los subconjuntos latin y latin-ext, y de la mono
   solo los pesos 500 y 600, que son los únicos que se usan. 229 KB en total.

   Los rangos Unicode son los que publica Google, copiados sin tocar: son los
   que hacen que el navegador baje latin-ext solo si la página lo necesita.
   ───────────────────────────────────────────── */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(fuentes/archivo-400900-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(fuentes/archivo-400900-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fuentes/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fuentes/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fuentes/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fuentes/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────────────────────
   TARIFARIO CL
   Tokens y componentes. Ver marca/identidad.html
   ───────────────────────────────────────────── */
:root{
  --bg:#e6e4de; --surface:#f7f6f2; --surface-2:#edebe5;
  --ink:#15171b; --ink-2:#4a4d54; --ink-3:#62646a;
  --line:#c9c6bd; --line-strong:#a9a69c;
  --ocre:#c58a12; --ocre-ink:#7d5605; --ocre-soft:#f5ecd6;
  --alto:#ae3826; --alto-soft:#f3ddd8;
  --ok:#2c6b4f; --ok-soft:#dde9e2;
  --max:960px;
  --r:2px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121317; --surface:#1a1c21; --surface-2:#22252b;
    --ink:#e8e6e0; --ink-2:#a9aab0; --ink-3:#8a8d95;
    --line:#32353c; --line-strong:#474b53;
    --ocre:#e0a52c; --ocre-ink:#e8b449; --ocre-soft:#33290f;
    --alto:#e66850; --alto-soft:#3a201b;
    --ok:#59a882; --ok-soft:#1b2f26;
  }
}
:root[data-theme="dark"]{
  --bg:#121317; --surface:#1a1c21; --surface-2:#22252b;
  --ink:#e8e6e0; --ink-2:#a9aab0; --ink-3:#8a8d95;
  --line:#32353c; --line-strong:#474b53;
  --ocre:#e0a52c; --ocre-ink:#e8b449; --ocre-soft:#33290f;
  --alto:#e66850; --alto-soft:#3a201b;
  --ok:#59a882; --ok-soft:#1b2f26;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
::selection{background:var(--ocre);color:var(--ink)}
*{scrollbar-color:var(--line-strong) var(--surface-2)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-variation-settings:'wdth' 100;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(.9rem,3vw,1.6rem)}

/* ── escala de tics ── */
.tics{height:14px;background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 16px);border-bottom:1px solid var(--line)}

/* ── marca ── */
/* Es el título de la página, no un adorno: sin un h1 la estructura empezaba en
   h2 y quien navega por encabezados no tenía dónde pararse. */
.marca{display:inline-flex;align-items:stretch;gap:.45rem;margin:0;font-size:1rem}
.marca__texto{font-variation-settings:'wdth' 125,'wght' 800;font-size:1.4rem;line-height:1;letter-spacing:-.02em;text-transform:uppercase;display:flex;align-items:center}
.marca__cl{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;font-size:.6rem;letter-spacing:.06em;
  display:flex;align-items:center;padding:0 .26rem;border:.1rem solid currentColor;border-radius:.13rem;
}
header.app{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem;flex-wrap:wrap}
.sub{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

/* ── secciones ── */
.panel{background:var(--surface);border:1px solid var(--line);margin-bottom:1rem}
.panel__cab{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--line);background:var(--surface-2);
}
.panel__t{font-variation-settings:'wdth' 112,'wght' 700;font-size:.98rem;margin:0}
.panel__c{padding:1.1rem}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ocre-ink);margin:0 0 .3rem}

/* ── formulario ── */
.campos{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.campo{display:flex;flex-direction:column;gap:.28rem;min-width:0}
.campo--ancho{grid-column:1/-1}
label{font-size:.8rem;color:var(--ink-2);font-weight:500}
.hint{font-size:.78rem;color:var(--ink-3);line-height:1.4}
/* un dato que puso Tarifario CL, no el usuario: se distingue */
.hint--ref{color:var(--ocre-ink)}
input[data-origen="referencia"]{border-color:var(--ocre);background:var(--ocre-soft)}
input[type=number],input[type=text],input[type=date],select{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;
  font-size:.95rem;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:var(--r);
  padding:.5rem .6rem;width:100%;min-width:0;
}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--ocre);outline-offset:2px}
.conUnidad{position:relative;display:flex;align-items:center}
.conUnidad input{padding-right:3.2rem}
.conUnidad span{position:absolute;right:.6rem;font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--ink-3);pointer-events:none}

/* ── selectores segmentados ── */
.seg{display:flex;flex-wrap:wrap;gap:.4rem}
.seg button{
  font-family:inherit;font-size:.8rem;font-weight:500;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:.42rem .7rem;cursor:pointer;
}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* ── vehículos ── */
.vehiculos{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.veh{
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:.6rem .5rem .5rem;cursor:pointer;display:flex;flex-direction:column;gap:.35rem;text-align:left;
  font-family:inherit;color:var(--ink-2);
  /* el hueco del cubo de rueda tiene que ser del color de la tarjeta, no del tema */
  --picto-hueco:var(--surface-2);
}
.veh[aria-pressed="true"]{
  background:var(--surface);border-color:var(--ocre);box-shadow:inset 0 -3px 0 var(--ocre);
  color:var(--ink);--picto-hueco:var(--surface);
}
.veh svg{display:block;width:100%;height:auto;color:currentColor}
.veh__n{font-size:.72rem;font-weight:600;line-height:1.2}
.veh__c{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--ink-3)}
.grupo{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:.9rem 0 .5rem}
.grupo:first-child{margin-top:0}

/* ── componentes de costo ── */
.comps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:.4rem}
.comp{background:var(--surface);display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;flex-wrap:wrap}
.comp[data-off="1"]{background:var(--surface-2);opacity:.6}
.comp__n{flex:1 1 120px;font-size:.83rem;min-width:0}
.comp input{width:120px;flex:none}
.comp__u{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--ink-3);width:58px;flex:none}
.sw{position:relative;width:34px;height:19px;flex:none;background:var(--line-strong);border:0;border-radius:10px;cursor:pointer;padding:0}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;background:var(--surface);border-radius:50%;transition:left .12s}
.sw[aria-pressed="true"]{background:var(--ok)}
.sw[aria-pressed="true"]::after{left:17px}
@media (prefers-reduced-motion:reduce){.sw::after{transition:none}}

/* ── el número grande: costo por km ── */
.km2{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:1fr 1fr;margin-top:1rem}
.km2 div{background:var(--surface-2);padding:.85rem 1rem}
.km2 .et{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:block}
.km2 .v{font-variation-settings:'wdth' 100,'wght' 700;font-variant-numeric:tabular-nums;font-size:clamp(1.3rem,1rem + 1.6vw,1.8rem);letter-spacing:-.02em}

/* ── resultado ── */
.res{background:var(--surface);border:1px solid var(--line)}
.res__barra{height:4px;background:var(--ocre)}
.escala{position:relative;height:70px;margin:1.4rem 0 .3rem}
.escala__riel{position:absolute;left:0;right:0;top:30px;height:10px;background:var(--surface-2);border:1px solid var(--line)}
.escala__banda{position:absolute;top:24px;height:22px;background:var(--ocre);border:1px solid var(--ocre-ink)}
.escala__piso{position:absolute;top:12px;bottom:20px;width:3px;background:var(--alto)}
.escala__piso::after{content:"PISO";position:absolute;left:5px;top:-3px;font-family:'IBM Plex Mono',monospace;font-size:.6rem;font-weight:600;letter-spacing:.1em;color:var(--alto);white-space:nowrap}
.escala__oferta{position:absolute;top:12px;bottom:20px;width:3px;background:var(--ink)}
.escala__oferta::after{content:"OFERTA";position:absolute;left:5px;bottom:-3px;font-family:'IBM Plex Mono',monospace;font-size:.6rem;font-weight:600;letter-spacing:.1em;color:var(--ink);white-space:nowrap}
.escala__tics{position:absolute;left:0;right:0;top:46px;height:8px;background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 12px)}

.cifras{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cifra{background:var(--surface-2);padding:.8rem 1rem}
.cifra .et{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.1rem}
.cifra .v{font-variation-settings:'wdth' 100,'wght' 700;font-variant-numeric:tabular-nums;font-size:1.25rem;letter-spacing:-.02em;display:block}
.cifra--destacada{background:var(--surface)}
.cifra--destacada .v{font-size:clamp(1.5rem,1.2rem + 1.8vw,2.1rem)}
.cifra--piso .v{color:var(--alto)}

.fila{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 1.1rem;border-bottom:1px solid var(--line);font-size:.87rem}
.fila:last-child{border-bottom:0}
.fila__n{color:var(--ink-2)}
.fila__v{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-weight:500}
.fila--total{background:var(--surface-2)}
.fila--total .fila__n{color:var(--ink);font-variation-settings:'wdth' 112,'wght' 700}
.fila--total .fila__v{font-weight:600}
.fila--piso{background:var(--alto-soft)}
.fila--piso .fila__n,.fila--piso .fila__v{color:var(--alto);font-weight:600}
.fila__sub{font-size:.78rem;color:var(--ink-3);display:block}

/* ── avisos ── */
.avisos{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem}
.aviso{display:flex;gap:.7rem;padding:.7rem .85rem;border:1px solid var(--line);background:var(--surface-2);align-items:flex-start}
.aviso__m{width:4px;flex:none;align-self:stretch;background:var(--ink-3)}
.aviso--alto{background:var(--alto-soft);border-color:var(--alto)}
.aviso--alto .aviso__m{background:var(--alto)}
.aviso--ojo .aviso__m{background:var(--ocre)}
.aviso--ok{background:var(--ok-soft)}
.aviso--ok .aviso__m{background:var(--ok)}
.aviso__t{font-variation-settings:'wdth' 112,'wght' 700;font-size:.84rem;display:block}
.aviso__d{font-size:.79rem;color:var(--ink-2);line-height:1.45}

/* ── cobertura ── */
.cob{padding:.8rem 1.1rem;border-top:1px solid var(--line);font-size:.79rem;color:var(--ink-2)}
.cob__barra{height:6px;background:var(--surface-2);border:1px solid var(--line);margin-top:.4rem;position:relative}
.cob__lleno{position:absolute;inset:0 auto 0 0;background:var(--ok)}
.cob__lleno[data-parcial="1"]{background:var(--ocre)}

/* ── misc ── */
details{border-top:1px solid var(--line);margin-top:1rem;padding-top:.8rem}
summary{cursor:pointer;font-size:.84rem;font-weight:600;color:var(--ocre-ink);font-variation-settings:'wdth' 112,'wght' 700}
.acciones{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.btn{
  font-family:inherit;font-size:.85rem;font-weight:600;padding:.55rem .95rem;
  border-radius:var(--r);border:1px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer;
}
.btn--fantasma{background:transparent;color:var(--ink-2);border-color:var(--line-strong);font-weight:500}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.pie{padding-block:2rem;color:var(--ink-3);font-size:.78rem;line-height:1.6}
.pie a{color:var(--ocre-ink)}
.oculto{display:none!important}

@media (max-width:520px){
  .km2{grid-template-columns:1fr}
  /* tres cifras en dos columnas dejaban una celda vacía que parecía tarjeta rota */
  .cifras{grid-template-columns:1fr}
  .comp input{width:100%;flex:1 1 100px}
}
/* ── los dos modos ── */
.modos{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:1.1rem 0 0}
.modo{text-align:left;padding:.7rem .85rem;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
  color:var(--ink-2);font:inherit;display:block}
.modo:hover{border-color:var(--line-strong)}
.modo[aria-pressed="true"]{background:var(--surface);border-color:var(--ocre);
  box-shadow:inset 0 -3px 0 var(--ocre);color:var(--ink)}
.modo__t{display:block;font-size:.92rem;font-variation-settings:'wdth' 108,'wght' 650}
.modo__d{display:block;font-size:.78rem;color:var(--ink-3);margin-top:.15rem}
.modo:focus-visible{outline:2px solid var(--ocre);outline-offset:2px}
.modo-intro{max-width:70ch;margin:.65rem 0 1rem;color:var(--ink-2);font-size:.86rem}
@media (max-width:560px){ .modos{grid-template-columns:1fr} }

/* Cada modo conserva su propia pregunta. El motor sigue recibiendo todos los
   datos: esto reduce ruido visual, no falsea el estado del cálculo. */
body[data-modo="viaje"] .solo-servicio,
body[data-modo="servicio"] .solo-viaje{display:none!important}

/* Historial/perfiles requieren una cuenta sincronizada y la banda requiere
   calibración. El código se conserva, pero ninguna de las dos promesas se
   publica antes de contar con la infraestructura y los datos necesarios. */
.funcion-cuenta,.funcion-en-validacion{display:none!important}

/* ── datos automáticos del vehículo ── */
.vehiculos-carga{margin-top:.9rem}
.vehiculos-carga .vehiculos{margin-top:.65rem}
.alcance-cotizador{max-width:72ch;margin:.6rem 0 0;padding:.7rem .8rem;
  border:1px solid var(--line-strong);box-shadow:inset 0 3px 0 var(--ocre);
  background:var(--ocre-soft);color:var(--ink-2);
  font-size:.82rem;line-height:1.45}
.alcance-cotizador strong{color:var(--ink)}
.datos-auto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  margin-top:1rem;background:var(--line);border:1px solid var(--line)}
.datos-auto>div{background:var(--surface-2);padding:.7rem .8rem;min-width:0}
.datos-auto__et{display:block;font-size:.72rem;color:var(--ink-3);margin-bottom:.08rem}
.datos-auto strong{display:block;font-family:'IBM Plex Mono',monospace;font-size:.84rem;
  font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.identificar,.ajustes-tecnicos{margin-top:.8rem}
.identificar>summary .elegido{display:block;margin-top:.15rem;font-family:'IBM Plex Mono',monospace;
  font-size:.74rem;font-weight:500;letter-spacing:0;color:var(--ink-2);
  font-variation-settings:normal;overflow-wrap:anywhere}
.identificar>summary .elegido[hidden]{display:none}
.kilometraje-mensual{margin-top:.9rem}
@media (max-width:620px){
  .datos-auto{grid-template-columns:1fr}
}

/* ── dedo grueso ──────────────────────────────────────────────────────
   En pantalla táctil los controles crecen. No se toca el diseño de
   escritorio: ahí el puntero es preciso y la densidad es parte de la
   herramienta. `pointer: coarse` distingue las dos situaciones sin
   adivinar por ancho de pantalla, que confunde una tablet con un monitor. */
@media (pointer: coarse){
  .seg button{padding-block:.62rem}
  .btn{padding-block:.7rem}
  summary{padding-block:.5rem}
  /* 16px no es estética: bajo eso, Safari en iPhone hace zoom al enfocar un
     campo y deja al usuario pellizcando para volver. Con la aplicación en la
     carretera, eso pasa en cada dato que escribe. */
  input[type=number],input[type=text],input[type=date],select{min-height:42px;font-size:16px}

  /* El interruptor de cada partida era de 34×19: el objetivo más chico de
     toda la interfaz, y hay siete seguidos. */
  .sw{width:46px;height:26px;border-radius:13px}
  .sw::after{width:20px;height:20px;top:3px;left:3px}
  .sw[aria-pressed="true"]::after{left:23px}

  .carga__x{padding:.45rem .6rem;font-size:1.15rem}
  .resumen__ir{padding-block:.5rem}
}

/* ── detalle de peajes, plegado ── */
.peajes{margin-top:.35rem}
.peajes summary{cursor:pointer;color:var(--ink-2);text-decoration:underline;
  text-underline-offset:2px;padding:.25rem 0}
.peajes summary:focus-visible{outline:2px solid var(--ocre-ink);outline-offset:2px}
.peajes__l{list-style:none;margin:.3rem 0 0;padding:0}
.peajes__l li{display:flex;justify-content:space-between;gap:1rem;
  padding:.18rem 0;border-bottom:1px solid var(--line)}
.peajes__l li span:last-child{font-family:'IBM Plex Mono',monospace;flex:none}
.peajes__n{margin:.4rem 0 0;color:var(--ink-3)}

/* ── buscador de modelo ── */
.modelos{max-height:240px;overflow-y:auto;border:1px solid var(--line);
  margin-top:.4rem;background:var(--surface-2)}
.modelo{display:flex;align-items:baseline;gap:.6rem;width:100%;text-align:left;
  padding:.45rem .6rem;background:none;border:0;border-bottom:1px solid var(--line);
  cursor:pointer;color:inherit;font:inherit;font-size:.82rem}
.modelo:last-child{border-bottom:0}
.modelo:hover{background:var(--surface)}
.modelo:focus-visible{outline:2px solid var(--ocre);outline-offset:-2px}
.modelo__n{flex:1;min-width:0;color:var(--ink)}
.modelo__r{font-family:'IBM Plex Mono',monospace;font-size:.76rem;
  color:var(--ink-2);flex:none;white-space:nowrap}
.modelo[aria-pressed="true"]{background:var(--ocre-soft);
  box-shadow:inset 3px 0 0 var(--ocre)}

/* ── registro de cargas ── */
.carga{display:flex;align-items:baseline;gap:.7rem;padding:.4rem 0;
  border-top:1px solid var(--line);font-size:.82rem}
.carga__f{font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--ink-3);flex:none}
.carga__d{color:var(--ink-2);flex:1;min-width:0}
.carga__r{font-family:'IBM Plex Mono',monospace;font-weight:600;flex:none}
.carga__x{background:none;border:0;color:var(--ink-3);cursor:pointer;
  font-size:1rem;line-height:1;padding:.1rem .3rem;flex:none}
.carga__x:hover{color:var(--alto)}
.carga__x:focus-visible{outline:2px solid var(--ocre-ink);outline-offset:1px}
.cargas__tot{margin-top:.6rem;padding-top:.5rem;border-top:1px solid var(--line-strong);
  font-size:.8rem;color:var(--ink-2)}

/* ── resumen fijo · trae el resultado arriba mientras se llena el formulario ── */
.resumen{position:sticky;top:0;z-index:20;background:var(--surface);
  border-bottom:1px solid var(--line-strong);box-shadow:0 1px 0 rgba(0,0,0,.04)}
.resumen[hidden]{display:none}
.resumen__int{padding-block:.45rem}
.resumen__ir{display:flex;align-items:baseline;gap:1.4rem;width:100%;
  background:none;border:0;padding:.2rem 0;cursor:pointer;text-align:left;color:inherit;font:inherit}
.resumen__grupo{display:flex;align-items:baseline;gap:.4rem;min-width:0}
.resumen__et{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);flex:none}
.resumen__v{font-family:'IBM Plex Mono',monospace;font-size:.95rem;font-weight:600;
  color:var(--ink);white-space:nowrap}
.resumen__v--fuerte{color:var(--ocre-ink)}
.resumen__ver{margin-left:auto;font-size:.78rem;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:2px;flex:none}
.resumen__ir:focus-visible{outline:2px solid var(--ocre-ink);outline-offset:2px}
@media (max-width:560px){
  .resumen__ver{display:none}
  .resumen__ir{gap:.9rem}
  .resumen__v{font-size:.88rem}
}

/* Los bloques de impresión no existen en pantalla. */
.imp{display:none}
.acciones--res{border-top:1px solid var(--line);margin-top:0}

/* ── resultado incompleto y trazabilidad ── */
.pendientes{padding:.75rem 1.1rem;border-bottom:1px solid var(--line);background:var(--alto-soft)}
.pendientes[hidden]{display:none}
.pendientes__t{margin:0 0 .45rem;font-family:'IBM Plex Mono',monospace;font-size:.72rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--alto)}
.pendientes__l{display:flex;flex-wrap:wrap;gap:.4rem}
.pendiente{border:1px solid var(--alto);background:var(--surface);color:var(--alto);
  font:inherit;font-size:.79rem;line-height:1.3;padding:.32rem .6rem;cursor:pointer;
  text-align:left}
.pendiente:hover{background:var(--alto);color:var(--surface)}
.pendiente:focus-visible{outline:2px solid var(--ocre-ink);outline-offset:2px}
.cifra[data-pendiente]{background:var(--alto-soft)}
.cifra[data-pendiente] .v{font-family:'Archivo',sans-serif;font-size:1rem;
  font-variation-settings:'wdth' 105,'wght' 680;color:var(--alto)}
.fila--pendiente{background:var(--alto-soft);color:var(--alto)}
.btn:disabled{cursor:not-allowed;opacity:.62;filter:saturate(.45)}
.trazabilidad{margin-top:1rem;border:1px solid var(--line);background:var(--surface-2)}
.trazabilidad>summary{cursor:pointer;padding:.7rem .8rem;font-size:.82rem;
  font-weight:650;color:var(--ink)}
.trazabilidad>summary:focus-visible{outline:2px solid var(--ocre-ink);outline-offset:2px}
.trazabilidad__intro{margin:0;padding:0 .8rem .7rem}
.trazabilidad__lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);border-top:1px solid var(--line)}
.trazabilidad__item{min-width:0;padding:.7rem .8rem;background:var(--surface)}
.trazabilidad__cab{display:flex;align-items:baseline;justify-content:space-between;
  gap:.6rem}
.trazabilidad__nivel{flex:none;font-family:'IBM Plex Mono',monospace;font-size:.72rem;
  font-weight:600;letter-spacing:.06em;color:var(--ok)}
.trazabilidad__item[data-nivel="revisar"] .trazabilidad__nivel{color:var(--alto)}
.trazabilidad__item[data-nivel="usuario"] .trazabilidad__nivel,
.trazabilidad__item[data-nivel="derivada"] .trazabilidad__nivel,
.trazabilidad__item[data-nivel="mixta"] .trazabilidad__nivel{color:var(--ocre-ink)}
.trazabilidad__item p{margin:.3rem 0 0;color:var(--ink-2);font-size:.78rem;line-height:1.45}
.trazabilidad__item a{display:inline-block;margin-top:.4rem;color:var(--ocre-ink);
  font-size:.76rem;text-underline-offset:2px}
@media (max-width:620px){
  .trazabilidad__lista{grid-template-columns:1fr}
  .trazabilidad__cab{align-items:flex-start}
}

@media print{
  /* La hoja es el documento que el transportista le manda al cliente.
     Se va todo lo que sea control: formularios, botones, interruptores. */
  @page{margin:14mm 12mm}
  body{background:#fff;color:#000}
  /* El encabezado de la aplicación no es del documento: la marca grande, el
     selector de tema y la bajada explican la herramienta a quien cotiza. En la
     hoja, esa bajada le hablaba al cliente del margen de su proveedor. */
  .panel--form,.acciones,header.app,.modo-intro,
  .modos,.resumen,.tics,.escala,.res__barra,.pie,.trazabilidad,.pendientes{display:none}
  .wrap{max-width:none;padding:0}

  .res{border:0;box-shadow:none}
  .res .panel__cab{display:none}          /* el título va en el encabezado impreso */
  .res .campos{display:none}              /* margen y oferta son controles, no resultado */

  .imp{display:block}
  .imp--cab{border-bottom:2px solid #000;padding-bottom:.5rem;margin-bottom:1rem}
  .imp__marca{display:flex;justify-content:space-between;align-items:baseline;
              font-size:9pt;letter-spacing:.04em;text-transform:uppercase}
  .imp__sello{flex:none;font-variation-settings:'wdth' 125,'wght' 800;
              font-size:8pt;color:#555;letter-spacing:.06em}
  .imp__emisor{font-size:14pt;font-variation-settings:'wdth' 112,'wght' 700;
               margin:.55rem 0 0;line-height:1.15;letter-spacing:-.01em}
  .imp__titulo{font-size:16pt;margin:.3rem 0 .15rem;line-height:1.15;font-weight:600}
  .imp__linea{font-size:9.5pt;color:#333;margin:0}

  .cifras{border:1px solid #999;page-break-inside:avoid}
  .cifra .v{color:#000}
  body[data-modo="servicio"][data-cotizacion-lista="false"] #cifra-precio,
  body[data-modo="servicio"][data-cotizacion-lista="false"] #cifra-porkm{display:none!important}

  .imp--pie{margin-top:1.1rem;padding-top:.6rem;border-top:1px solid #999;
            page-break-inside:avoid}
  .imp__h2{font-size:10pt;text-transform:uppercase;letter-spacing:.05em;margin:0 0 .45rem}
  .imp__sup{font-size:8.5pt;margin:0}
  .imp__sup dt{font-weight:600;margin-top:.35rem}
  .imp__sup dd{margin:.05rem 0 0;color:#333;line-height:1.35}
  .imp__nota{font-size:8pt;color:#444;margin-top:.8rem;line-height:1.4;
             border-left:2px solid #999;padding-left:.5rem}

  /* Que no se corte una partida entre dos hojas. */
  #desglose > *,.aviso{page-break-inside:avoid}
  a[href]::after{content:""}              /* sin URLs pegadas al texto */
}