/* ============================================================================
   Cargas Arisac — Hoja de estilos
   Rediseño 2026: sistema de tokens (claro + oscuro), sombras en capas,
   foco accesible y componentes modernos. Los nombres de clase se conservan
   para no tocar el HTML ni el JS.
   ============================================================================ */

/* ── Tokens · Tema claro (por defecto) ───────────────────────────────────── */
:root{
  /* superficies y texto */
  --bg:#eef1f6;
  --surface:#ffffff;
  --surface2:#f5f7fb;
  --surface3:#eef2f8;
  --border:rgba(15,30,60,0.10);
  --border2:rgba(15,30,60,0.18);
  --text:#15233b;
  --text2:#5b6b85;
  /* 20-sep-2026: el 4,6 de la nota de abajo era contra el BLANCO, pero este gris casi nunca cae
     sobre blanco — sobre el fondo de la app se quedaba en 3,85 y sobre una tarjeta en 4,36, por
     debajo del 4,5 que hace falta para leerlo sin esfuerzo. #6b7a90 → #616f83: ahora el peor caso
     es 4,51. Queda muy cerca de --text2 a propósito: antes que un tercer gris «bonito» pero flojo,
     que se lea. */
  --text3:#616f83;   /* antes #95a1b8 y luego #6b7a90 — legible al sol de la campa */

  /* marca (azul Arisac) */
  --blue:#185FA5; --blue-btn:#185FA5;
  --blue-l:#E6F1FB;
  --blue-d:#0C447C;          /* texto/acento azul fuerte */
  --blue-strong:#0C447C;
  --header-bg:#0C447C;       /* fondo de barras oscuras (topbar, cabeceras modal) */
  --header-bg-2:#0a3c6f;

  /* semánticos */
  --green:#3B6D11;  --green-l:#EAF3DE;
  --amber:#854F0B;  --amber-l:#FAEEDA;
  --red:#A32D2D;    --red-l:#FCEBEB;
  --teal:#085041;   --teal-l:#E1F5EE;

  /* Sistema de diseño (20-ago-2026, skill diseno-cargas): siete familias por PAPEL, no por
     color — fg=texto/acento, bg=fondo suave, ln=borde. La mayoría son alias de lo que YA
     había (verde=ok, azul=curso, ámbar=espera, rojo=problema): no se inventa un tono nuevo
     donde ya había uno decidido. Lo genuinamente nuevo es el índigo de marca (estructura y el
     ÚNICO botón principal — el azul deja de ser "el" color de marca, pasa a ser "en curso") y
     el morado de BC, que ya vivía suelto en varios sitios sin token propio.
     scripts/mapa-colores.json es la referencia de qué color viejo cae en qué familia. */
  --indigo:#2d2b8f; --indigo-l:#EBEAFA;
  /* Muelle de carga de gaviones (27-sep-2026, spec 2026-09-27-gaviones-muelle-de-carga.md): la
     silueta del camión/remolque y las ruedas del SVG lateral no son un estado (ok/curso/esp/
     prob) ni la marca — son dibujo de estructura, como --indigo. Token aparte para no forzar
     --text2/--text3 (que casi coinciden y dejarían camión y ruedas sin contraste entre sí). */
  --mu-camion:#5b6b85; --mu-rueda:#1f2937;
  /* la tractora del muelle (E5): cabina en el índigo de la casa con su sombra, cristal, llanta, la
     placa blanca donde va el logo y el faro — piezas de dibujo, no estados */
  --mu-cabina:#2d2b8f; --mu-cabina-2:#1c1a63; --mu-cristal:#b9c7dc; --mu-llanta:#c9d1dc; --mu-placa:#ffffff; --mu-faro:#f0c77e;
  --c-estr-fg:var(--indigo); --c-estr-bg:var(--indigo-l); --c-estr-ln:rgba(45,43,143,.35);
  /* El índigo hace dos trabajos que tiran en direcciones contrarias: FONDO de botón (con letra
     blanca encima: cuanto más oscuro, mejor se lee) y COLOR DE LETRA sobre el fondo de la app
     (cuanto más claro en tema oscuro, mejor se lee). En claro el mismo valor sirve para las dos
     cosas (blanco encima = 11,3); en oscuro no, así que el fondo del botón tiene su propio token.
     Sin esto, el botón principal en tema oscuro se quedaba en 3,81 — por debajo de 4,5. */
  --c-estr-btn:var(--indigo);
  --c-ok-btn:var(--green);   /* el mismo caso, para el botón relleno de verde */
  /* Mismo problema con el ámbar y el azul cuando hacen de FONDO con letra blanca: el chip de
     nivel de tolva iba en #B5710E y #1E8C6E a mano, que dejan el blanco en 3,94 y 4,17. */
  --c-esp-btn:#9A5F0B; --c-curso-btn:#2D6CB5; --c-prob-btn:var(--red);
  --c-ok-fg:var(--green);   --c-ok-bg:var(--green-l);   --c-ok-ln:#8FCBB4;
  --c-curso-fg:var(--blue-d); --c-curso-bg:var(--blue-l); --c-curso-ln:#BBD9F2;
  --c-esp-fg:var(--amber);  --c-esp-bg:var(--amber-l);  --c-esp-ln:#F0C77E;
  --c-prob-fg:var(--red);   --c-prob-bg:var(--red-l);   --c-prob-ln:#E8A599;
  --c-bc-fg:#3C3489; --c-bc-bg:#EEEDFE; --c-bc-ln:#C7C3F2;
  --c-neu-bg:#ECEFF3;
  /* Costes · el «precio para calcular» (spec 2026-10-15-costes-ventana-articulo.md): ciruela, a propósito distinto del azul de «¿Y si…?» (sin guardar) */
  --cst-calculo:#8A2A74; --cst-calculo-bg:#F6E6F1; --cst-calculo-ln:#D9A5CB;
  /* La cabecera oscura de Silos («Control de silos») es una SUPERFICIE oscura con texto claro
     encima, no tinta. Necesita token propio: sin él, el barrido la clasificaría por su tono
     (casi negro) y la mandaría a --text, con lo que el panel entero desaparecería. */
  --panel-oscuro:#1B2430;   --panel-oscuro-ln:#2A3645;
  --panel-oscuro-fg:#E8EDF2; --panel-oscuro-fg2:#9FB0C2;
  /* escala de letra — suelo 12,5px, nada por debajo en ninguna pantalla */
  --fs-xs:12.5px; --fs-sm:13.5px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:26px; --fs-3xl:34px;
  --rd:10px; --rd-sm:8px; --rd-pill:999px;
  --sh:var(--shadow-sm); --sh-float:var(--shadow-lg);
  --tap:44px; --tap-planta:52px;
  /* tablón de Planta (spec 2026-09-11): el corcho es la única superficie cálida de la app, a
     propósito — es «la pared» donde cuelgan los pedidos, no una tarjeta más */
  --tb-corcho:#E4D6BD; --tb-corcho-2:#D2BF9F; --tb-corcho-3:#F0E5D2; --tb-marco:#B18B5C; --tb-marco-2:#8E6C42;
  --tb-tinta:#4A3A27; --tb-tinta-2:#7D6A52; --tb-hilo:#8A6D4B; --tb-clip:#AEB7C3; --tb-clip-2:#8792A2;
  --tb-tape-bg:#232B3A; --tb-tape-fg:#FFFFFF;
  --sh-papel:0 1px 2px rgba(60,40,10,.20), 0 5px 12px -5px rgba(60,40,10,.30);
  /* colores de pósit del tablón (spec 2026-09-24-planta-tablon-mover-plegar-colores.md, decisión
     4 del dueño): el papel del pedido se tiñe entero con -bg y un borde -ln (el border-left de 5px
     sigue siendo el del estado, ver .tb-pos-* más abajo). Medidos el 24-sep con los tokens de hoy:
     contraste de --text/--c-bc-fg/--c-ok-fg y de --tb-pos-tinta2 sobre cada pósit ≥ 4,5; -ln ≥ 3
     contra blanco, corcho y el propio pósit. MISMA lista que _TB_COLORES de public/js/app.js y
     COLORES de services/tablonPlanta.js — un color nuevo se añade a los tres sitios a la vez.
  */
  --tb-pos-amarillo-bg:#FFF0A3; --tb-pos-amarillo-ln:#9A7300;
  --tb-pos-naranja-bg:#FFDDB8; --tb-pos-naranja-ln:#B85A12;
  --tb-pos-rosa-bg:#FBD6E3; --tb-pos-rosa-ln:#B82F63;
  --tb-pos-azul-bg:#D6E7FB; --tb-pos-azul-ln:#2A67B5;
  --tb-pos-verde-bg:#D8EEC8; --tb-pos-verde-ln:#467E20;
  --tb-pos-morado-bg:#E4DAF8; --tb-pos-morado-ln:#6A4BB0;
  --tb-pos-tinta2:#4A5870;   /* tinta secundaria sobre pósit: --text2/--text3 no llega a 4,5 en naranja/rosa/morado */

  /* preparación */
  --prep-ok:#EAF3DE;   --prep-ok-text:#27500A;
  --prep-no:#FCEBEB;   --prep-no-text:#791F1F;

  /* estado de carga (consumidos también desde JS: STATUS_COL) */
  --st-pend-b:#9ca3af; --st-pend-bg:#f4f6fa; --st-pend-t:#475569;
  --st-plan-b:#185FA5; --st-plan-bg:#E6F1FB; --st-plan-t:#0C447C;
  --st-ruta-b:#854F0B; --st-ruta-bg:#FAEEDA; --st-ruta-t:#633806;
  --st-entr-b:#0F6E56; --st-entr-bg:#E1F5EE; --st-entr-t:#085041;

  /* badges neutros */
  --badge-gray-bg:#eef1f6; --badge-gray-t:#5b6b85;

  /* formas */
  --radius:12px;
  --radius-sm:8px;
  --radius-pill:999px;

  /* sombras en capas */
  --shadow-sm:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --shadow:0 1px 3px rgba(16,24,40,.06), 0 6px 16px -4px rgba(16,24,40,.10);
  --shadow-lg:0 12px 36px -8px rgba(16,24,40,.22);
  --ring:0 0 0 3px rgba(24,95,165,.28);

  /* Gaviones · Calculador (fase 4, 2-sep-2026, spec 2026-09-02-gaviones-fase4-calculador.md,
     2.2): paleta del propio dibujo del muro (croquis, secciones, plano por hiladas, visor 3D,
     ficha técnica) — el motor trasplantado de GavControl la lee en runtime con _gcColor(), así
     que gav-calculador.js/gav-muro3d.js/gav-ficha.js no llevan ni un hex a mano. Es la MISMA en
     los dos temas a propósito: es un dibujo técnico (como un plano en papel), no chrome de la
     app — cambiar de tema no debe cambiar de qué color es un gavión ni la línea de rasante.
     Norma de colores de gaviones: tono = tipo (ancho×alto), intensidad = largo. */
  --gvc-azul-osc:#1e40af; --gvc-azul-med:#3b82f6; --gvc-azul-cla:#93c5fd; --gvc-azul-borde:#1e3a8a;
  --gvc-verde-osc:#15803d; --gvc-verde-med:#22c55e; --gvc-verde-cla:#86efac; --gvc-verde-borde:#14532d;
  --gvc-marron-osc:#5f3a1c; --gvc-marron-med:#96613a; --gvc-marron-cla:#c99e77; --gvc-marron-borde:#3f2512;
  --gvc-amarillo-osc:#ca8a04; --gvc-amarillo-med:#eab308; --gvc-amarillo-cla:#fde047; --gvc-amarillo-borde:#854d0e;
  --gvc-morado-osc:#6d28d9; --gvc-morado-med:#8b5cf6; --gvc-morado-cla:#c4b5fd; --gvc-morado-borde:#4c1d95;
  --gvc-rosa-osc:#be185d; --gvc-rosa-med:#ec4899; --gvc-rosa-cla:#f9a8d4; --gvc-rosa-borde:#831843;
  --gvc-gris-osc:#374151; --gvc-gris-med:#6b7280; --gvc-gris-cla:#d1d5db; --gvc-gris-borde:#1f2937;
  --gvc-texto-fuerte:#0f172a; --gvc-texto-medio:#334155; --gvc-texto-suave:#475569; --gvc-texto-tenue:#64748b;
  --gvc-linea-media:#94a3b8; --gvc-linea-suave:#cbd5e1; --gvc-borde-ficha:#e2e8f0; --gvc-borde-suave:#e5e7eb;
  --gvc-superficie-suave:#f8fafc; --gvc-superficie-media:#f1f5f9; --gvc-blanco:#fff; --gvc-chrome-fondo:#111827;
  --gvc-rasante:#dc2626; --gvc-terreno:#8a6d3b; --gvc-terreno-claro:#8a7a5c; --gvc-terreno-base:#9c855c;
  --gvc-terreno-texto:#7c6a45; --gvc-terreno-media:#b3a67f; --gvc-terreno-fondo:#d8ccb0;
  --gvc-terreno-sombra:#e2d3b3; --gvc-terreno-cara:#cabf9d; --gvc-ensanche:#fcd34d;
  --gvc-azul-fuerte:#2563eb; --gvc-azul-linea:#1d4ed8; --gvc-azul-fondo:#eff6ff; --gvc-azul-borde-claro:#bfdbfe;
  --gvc-inicio:#16a34a;
  --gvc-tramo-par:#d6e0f0; --gvc-tramo-impar:#c4d3e8; --gvc-tramo-borde:#5b7599; --gvc-tramo-linea:#8fa3bf;
  --gvc-marca-navy:#1e3a5f; --gvc-marca-navy-claro:#7f96b3;
  --gvc-amber-linea:#f59e0b; --gvc-amber-borde:#b45309; --gvc-amber-texto:#92400e;
  --gvc-amber-fondo:#fffbeb; --gvc-amber-borde-claro:#fde68a;
  --gvc-3d-fondo:#e8edf3; --gvc-ficha-fondo-suave:#fbfdff; --gvc-grid-menor:#eef2f7;

  /* Gaviones · Ventas, «lo demás» (28-sep-2026, spec 2026-09-28-gaviones-ventas-unica.md): los
     cinco dibujos nuevos de _gavMaterialSVG (public/js/preparacion.js) — SOLO estos tokens, nunca
     un color a mano (skill diseno-cargas). La piedra del big bag usa los mismos cuatro colores
     que ya reconoce la fábrica (forna/rojo/gris/blanco). */
  --gob-mat-bag:#D9C9A3; --gob-mat-strap:#A88B57; --gob-mat-malla:#8A94A3; --gob-mat-malla-bg:#EEF1F6;
  --gob-mat-metal:#9CA6B4; --gob-mat-caja:#C08A4E; --gob-mat-rollo:#6B7280;
  --gob-piedra-forna:#C9A467; --gob-piedra-rojo:#A9503A; --gob-piedra-gris:#8B92A0; --gob-piedra-blanco:#D8DCE2;

  color-scheme:light;
}

/* ── Tokens · Tema oscuro ────────────────────────────────────────────────── */
[data-theme="dark"]{
  --bg:#0c1322;
  --surface:#141d30;
  --surface2:#1b2740;
  --surface3:#22304c;
  --border:rgba(255,255,255,0.10);
  --border2:rgba(255,255,255,0.20);
  --text:#e6ecf6;
  --text2:#9fadc6;
  /* mismo arreglo que en claro, aquí hacía más falta: #6c7a96 daba 3,05 sobre --surface3 y 3,45
     sobre --surface2. Con #8d9ab4 el peor caso es 4,65. */
  --text3:#8d9ab4;

  --blue:#4d97e0;
  /* relleno del botón principal: NO se aclara como --blue, o la letra blanca se queda sin fondo donde apoyarse (medido: 3,08 con --blue) */
  --blue-btn:#2f6fae;
  --blue-l:#16263e;
  --blue-d:#8cc0f3;          /* azul claro como texto/acento sobre oscuro */
  --blue-strong:#4d97e0;
  --header-bg:#0d1b30;
  --header-bg-2:#0a1526;

  --green:#5fa92e;  --green-l:#16291a;
  --amber:#cf9a36;  --amber-l:#2c2414;
  --red:#e06a63;    --red-l:#321a1c;
  --teal:#2f9e7e;   --teal-l:#13271f;

  /* Sistema de diseño (20-ago-2026): mismo criterio de arriba en oscuro. Los alias (ok/curso/
     esp/prob) ya salen bien solos, porque --green/--blue-d/--amber/--red YA tienen su versión
     oscura arriba en este mismo bloque. Solo hacen falta los tonos que NO son alias. */
  --indigo:#7c79d1; --indigo-l:#231f4a;
  --mu-camion:#8d9ab4; --mu-rueda:#0b0f17;
  --mu-cabina:#5a57b8; --mu-cabina-2:#35328a; --mu-cristal:#2c3a55; --mu-llanta:#6b7a90; --mu-placa:#f5f7fb; --mu-faro:#cf9a36;
  /* ver el porqué en :root — el botón lleva su propio índigo, más apagado, para que la letra
     blanca de encima llegue a 4,56 sin dejar de despegarse del fondo (4,07 contra --bg). */
  --c-estr-btn:#706dbc;
  /* verde de BOTÓN (no de letra): el #5fa92e de --green deja el blanco en 2,92 encima. Este da
     4,69 con el blanco y 3,95 contra el fondo, así que se lee y se despega. */
  --c-ok-btn:#46821f;
  /* ámbar, azul y rojo de FONDO en oscuro: el blanco llega a 4,85 / 5,03 / 5,32, y los tres se
     despegan de la tarjeta. Los -fg de esas familias son tonos CLAROS (para leerse sobre el fondo
     oscuro), así que de fondo con letra blanca encima se quedaban en 3,28 el rojo. */
  --c-esp-btn:#96691a; --c-curso-btn:#3a6fbb; --c-prob-btn:#b8453a;
  --c-estr-ln:rgba(124,121,209,.35);
  --c-bc-fg:#a89be0; --c-bc-bg:#241f3d; --c-bc-ln:#4a3f78;
  --c-neu-bg:#22304c;
  --cst-calculo:#E08AC9; --cst-calculo-bg:#2E1F34; --cst-calculo-ln:#6B3F66;
  --c-ok-ln:#2f5a46; --c-curso-ln:#2d4a6b; --c-esp-ln:#5a4420; --c-prob-ln:#5a2e2c;
  /* en oscuro ese panel no puede hundirse MÁS que el fondo (se perdería): se eleva sobre él */
  --panel-oscuro:#1b2740;   --panel-oscuro-ln:#2a3a5c;
  --panel-oscuro-fg:#e6ecf6; --panel-oscuro-fg2:#9fadc6;

  --prep-ok:#16291a;   --prep-ok-text:#9bd8a4;
  --prep-no:#321a1c;   --prep-no-text:#f0a59d;

  --st-pend-b:#64748b; --st-pend-bg:#1a2236; --st-pend-t:#b4c0d4;
  --st-plan-b:#4d97e0; --st-plan-bg:#16263e; --st-plan-t:#9fc6f0;
  --st-ruta-b:#cf9a36; --st-ruta-bg:#2a2415; --st-ruta-t:#e6c984;
  --st-entr-b:#2f9e7e; --st-entr-bg:#13271f; --st-entr-t:#8fd9bf;

  --badge-gray-bg:#22304c; --badge-gray-t:#9fadc6;
  /* tablón de Planta (spec 2026-09-11): el mismo corcho, en su versión oscura */
  --tb-corcho:#2B2420; --tb-corcho-2:#221c18; --tb-corcho-3:#362d26; --tb-marco:#4A3A2C; --tb-marco-2:#33271d;
  --tb-tinta:#DACEBD; --tb-tinta-2:#A69884; --tb-hilo:#A98E69; --tb-clip:#8b95a3; --tb-clip-2:#66707e;
  --tb-tape-bg:#EAE3D7; --tb-tape-fg:#1B1710;
  --sh-papel:0 1px 2px rgba(0,0,0,.55), 0 7px 16px -6px rgba(0,0,0,.65);
  /* colores de pósit, versión oscura — misma nota que en :root */
  --tb-pos-amarillo-bg:#332C12; --tb-pos-amarillo-ln:#E3B83B;
  --tb-pos-naranja-bg:#3E2917; --tb-pos-naranja-ln:#F0934A;
  --tb-pos-rosa-bg:#3D1F2E; --tb-pos-rosa-ln:#EC6E9E;
  --tb-pos-azul-bg:#172C47; --tb-pos-azul-ln:#6AA8EE;
  --tb-pos-verde-bg:#1B3219; --tb-pos-verde-ln:#7BC24A;
  --tb-pos-morado-bg:#2B2347; --tb-pos-morado-ln:#A98BEA;
  --tb-pos-tinta2:#B3BFD4;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 6px rgba(0,0,0,.4), 0 8px 22px -6px rgba(0,0,0,.5);
  --shadow-lg:0 16px 44px -10px rgba(0,0,0,.6);
  --ring:0 0 0 3px rgba(77,151,224,.35);

  /* Gaviones · Calculador: MISMOS valores que en claro (ver el porqué en :root) — un dibujo
     técnico no cambia de color con el tema; solo se repiten aquí para que el trinquete de
     test-diseno.js no los vea "a medias entre los dos temas" (regla 4, el fallo que rompe el
     modo oscuro en cualquier OTRO token si se define en un solo tema). */
  --gvc-azul-osc:#1e40af; --gvc-azul-med:#3b82f6; --gvc-azul-cla:#93c5fd; --gvc-azul-borde:#1e3a8a;
  --gvc-verde-osc:#15803d; --gvc-verde-med:#22c55e; --gvc-verde-cla:#86efac; --gvc-verde-borde:#14532d;
  --gvc-marron-osc:#5f3a1c; --gvc-marron-med:#96613a; --gvc-marron-cla:#c99e77; --gvc-marron-borde:#3f2512;
  --gvc-amarillo-osc:#ca8a04; --gvc-amarillo-med:#eab308; --gvc-amarillo-cla:#fde047; --gvc-amarillo-borde:#854d0e;
  --gvc-morado-osc:#6d28d9; --gvc-morado-med:#8b5cf6; --gvc-morado-cla:#c4b5fd; --gvc-morado-borde:#4c1d95;
  --gvc-rosa-osc:#be185d; --gvc-rosa-med:#ec4899; --gvc-rosa-cla:#f9a8d4; --gvc-rosa-borde:#831843;
  --gvc-gris-osc:#374151; --gvc-gris-med:#6b7280; --gvc-gris-cla:#d1d5db; --gvc-gris-borde:#1f2937;
  --gvc-texto-fuerte:#0f172a; --gvc-texto-medio:#334155; --gvc-texto-suave:#475569; --gvc-texto-tenue:#64748b;
  --gvc-linea-media:#94a3b8; --gvc-linea-suave:#cbd5e1; --gvc-borde-ficha:#e2e8f0; --gvc-borde-suave:#e5e7eb;
  --gvc-superficie-suave:#f8fafc; --gvc-superficie-media:#f1f5f9; --gvc-blanco:#fff; --gvc-chrome-fondo:#111827;
  --gvc-rasante:#dc2626; --gvc-terreno:#8a6d3b; --gvc-terreno-claro:#8a7a5c; --gvc-terreno-base:#9c855c;
  --gvc-terreno-texto:#7c6a45; --gvc-terreno-media:#b3a67f; --gvc-terreno-fondo:#d8ccb0;
  --gvc-terreno-sombra:#e2d3b3; --gvc-terreno-cara:#cabf9d; --gvc-ensanche:#fcd34d;
  --gvc-azul-fuerte:#2563eb; --gvc-azul-linea:#1d4ed8; --gvc-azul-fondo:#eff6ff; --gvc-azul-borde-claro:#bfdbfe;
  --gvc-inicio:#16a34a;
  --gvc-tramo-par:#d6e0f0; --gvc-tramo-impar:#c4d3e8; --gvc-tramo-borde:#5b7599; --gvc-tramo-linea:#8fa3bf;
  --gvc-marca-navy:#1e3a5f; --gvc-marca-navy-claro:#7f96b3;
  --gvc-amber-linea:#f59e0b; --gvc-amber-borde:#b45309; --gvc-amber-texto:#92400e;
  --gvc-amber-fondo:#fffbeb; --gvc-amber-borde-claro:#fde68a;
  --gvc-3d-fondo:#e8edf3; --gvc-ficha-fondo-suave:#fbfdff; --gvc-grid-menor:#eef2f7;

  /* Gaviones · Ventas, «lo demás» — versión oscura de los tokens de arriba (más claros/saturados
     para leerse sobre el fondo oscuro, misma nota que el resto del fichero). */
  --gob-mat-bag:#E0D0A8; --gob-mat-strap:#C9A76E; --gob-mat-malla:#A6B0C0; --gob-mat-malla-bg:#1B2740;
  --gob-mat-metal:#B7C0CC; --gob-mat-caja:#D99A5C; --gob-mat-rollo:#8B95A5;
  --gob-piedra-forna:#D9B578; --gob-piedra-rojo:#C1705A; --gob-piedra-gris:#A3ABB8; --gob-piedra-blanco:#DFE3E8;

  color-scheme:dark;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .25s ease,color .25s ease}
::selection{background:rgba(24,95,165,.22)}
*:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}

/* scrollbars discretas */
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border2);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar{background:linear-gradient(135deg,var(--header-bg),var(--header-bg-2));padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:56px;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm);border-bottom:1px solid rgba(255,255,255,.06)}
.tb-brand{display:flex;align-items:center;gap:11px}
.tb-logo{width:34px;height:34px;background:linear-gradient(135deg,#3f93e6,#2f7fd0);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.tb-title{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.01em}
.tb-sub{font-size:10.5px;color:#9fc4ed;margin-top:1px}
/* V1.5(a) · solo hay texto cuando algo requiere atención: ámbar mientras sincroniza, rojo
   si no hay conexión. Sincronizado = sin texto (el vacío no necesita clase). */
.tb-sub.syncing{color:#f3c969}
.tb-sub.err{color:#ef8076}
.tb-right{display:flex;gap:7px;align-items:center}
.tb-btn{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-sm);padding:7px 12px;color:#eaf2fc;font-size:12.5px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:5px;font-family:inherit;transition:background .15s,transform .05s}
.tb-btn:hover{background:rgba(255,255,255,0.22)}
.tb-btn:active{transform:translateY(1px)}
.tb-btn.accent{background:linear-gradient(135deg,#3f93e6,#2f7fd0);border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(47,127,208,.4)}
.tb-btn.accent:hover{filter:brightness(1.07)}
.sync-dot{width:8px;height:8px;border-radius:50%;background:#5fd0a8;box-shadow:0 0 0 3px rgba(95,208,168,.2);margin:0 2px}
.sync-dot.syncing{background:#f3c969;box-shadow:0 0 0 3px rgba(243,201,105,.2);animation:pulse 1s infinite}
.sync-dot.error{background:#ef8076;box-shadow:0 0 0 3px rgba(239,128,118,.2)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Pestañas ────────────────────────────────────────────────────────────── */
.tabs-bar{background:var(--surface);border-bottom:1px solid var(--border);display:flex;padding:0 14px;gap:2px;overflow-x:auto;position:sticky;top:56px;z-index:90}
.tab{padding:13px 14px;font-size:12.5px;font-weight:500;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;display:flex;align-items:center;gap:6px;white-space:nowrap;transition:color .15s,background .15s;border-radius:8px 8px 0 0}
.tab:hover{color:var(--text);background:var(--surface2)}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
/* V1.4 · puntito rojo en la pestaña Ajustes mientras haya un aviso pendiente (p.ej. copia
   de seguridad atrasada) — discreto, no interrumpe, solo señala que hay algo que mirar. */
.nav-dot{width:7px;height:7px;border-radius:50%;background:var(--red);margin-left:3px;flex-shrink:0}
/* V1.4 · aviso de copia de seguridad atrasada: caja ámbar DENTRO de la vista Ajustes (ya no
   flota tapando otras vistas). */
.ajustes-copia-banner{margin:12px 14px 0;background:#FFF7E6;border:1px solid #F0C77E;border-radius:10px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:'DM Sans',sans-serif}
.ajustes-copia-banner .acb-txt{font-size:12.5px;color:#7A4E00}
.ajustes-copia-banner .acb-btn{font-size:11px;padding:6px 12px;border:none;background:#0F6E56;color:#fff;border-radius:6px;cursor:pointer;font-weight:600;flex-shrink:0}
/* V1.5(b) · línea discreta con la versión de la app, visible solo dentro de Ajustes (antes era
   una etiqueta fija en la esquina inferior izquierda de toda la app). */
.ajustes-version-line{margin:10px 14px 0;font-size:10.5px;color:var(--text3);opacity:.7}
[data-theme="dark"] .tab.active{color:var(--blue-d)}
.csub{padding:10px 14px;font-size:12.5px;font-weight:500;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s}
.csub:hover{color:var(--text)}
.csub.active{color:var(--blue);border-bottom-color:var(--blue)}
[data-theme="dark"] .csub.active{color:var(--blue-d)}
/* «Más ▾» de la barra de subpestañas (6-oct-2026, spec 2026-10-06-costes-gastos-y-pantallas.md): las pantallas de segundo orden de un grupo (hoy Costes) se recogen en un
   desplegable. El botón es una pestaña más (.csub) y, si la vista abierta está dentro, sale activo con su nombre. La lista es fixed (la barra tiene scroll horizontal y un
   absolute quedaría recortado): navMasAbrir (nucleo.js) la coloca bajo el botón. */
.csub-mas{display:inline-flex;flex-shrink:0}
.csub-mas-btn{background:none;border:0;border-bottom:2px solid transparent;font-family:inherit;margin:0}
.csub-mas-btn:focus-visible,.csub-mas-item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;box-shadow:none}
.csub-mas-menu{position:fixed;z-index:10050;min-width:200px;max-width:calc(100vw - 16px);padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg)}
.csub-mas-menu[hidden]{display:none}
.csub-mas-item{display:block;width:100%;padding:9px 12px;border:0;border-radius:var(--radius-sm);background:none;color:var(--text);font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer;white-space:nowrap}
.csub-mas-item:hover{background:var(--surface2)}
.csub-mas-item.active{color:var(--blue);font-weight:600}
[data-theme="dark"] .csub-mas-item.active{color:var(--blue-d)}
@media (max-width:640px){
  /* móvil: lista grande, de lado a lado, con blancos de dedo (mínimo 48 px de alto) */
  .csub-mas-menu{left:8px!important;right:8px;min-width:0}
  .csub-mas-item{min-height:48px;font-size:var(--fs-md);padding:12px 14px}
}

/* Gaviones como MUNDO propio (fase 1b, 2-sep-2026): igual que data-chrome/data-en-planta, un
   atributo en <html> decide qué fila de pestañas se ve — la de Cargas o la del mundo. */
#tabs-bar-gaviones{display:none}
html[data-mundo="gaviones"] #tabs-bar-cargas{display:none}
html[data-mundo="gaviones"] #tabs-bar-gaviones{display:flex}
/* pantalla completa esconde TODO también dentro del mundo: id explícito para que no dependa de
   que la regla general de arriba (html[data-chrome="oculto"] .tabs-bar) conserve su !important */
html[data-chrome="oculto"] #tabs-bar-gaviones{display:none}

.view{display:none;animation:viewIn .2s ease}
.view.active{display:block}
@keyframes viewIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.container{max-width:1240px;margin:0 auto;padding:18px 20px}

/* ── Planificación ───────────────────────────────────────────────────────── */
.plan-body{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
.panel{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow-sm)}
.panel-hdr{padding:12px 14px;border-bottom:1px solid var(--border);background:var(--blue-l);display:flex;align-items:center;justify-content:space-between}
.panel-title{font-size:11px;font-weight:600;color:var(--blue-d);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:5px}
.panel-actions{padding:10px;border-bottom:1px solid var(--border);display:flex;gap:6px}
.panel-actions input{flex:1;font-size:12.5px;padding:8px 11px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface2);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}
.panel-actions input:focus{border-color:var(--blue);box-shadow:var(--ring)}
.panel-filter{padding:8px 10px;border-bottom:1px solid var(--border);display:flex;gap:6px}
.filter-btn{flex:1;padding:6px 6px;font-size:10.5px;font-weight:500;border:1px solid var(--border2);border-radius:var(--radius-pill);background:var(--surface);cursor:pointer;font-family:inherit;color:var(--text2);text-align:center;transition:all .15s}
.filter-btn:hover{border-color:var(--text3)}
.filter-btn.active-all{background:var(--blue);color:#fff;border-color:var(--blue)}
.filter-btn.active-prep{background:var(--green-l);color:var(--prep-ok-text);border-color:var(--green)}
.filter-btn.active-noprep{background:var(--red-l);color:var(--prep-no-text);border-color:var(--red)}
.panel-list{padding:8px;max-height:600px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}

/* ── Tarjeta de pedido ───────────────────────────────────────────────────── */
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;cursor:grab;border-left:4px solid var(--blue);box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s,transform .08s}
@media (hover:hover){ .pcard:hover{box-shadow:var(--shadow);transform:translateY(-1px)} }   /* Tanda 2 D6: sin ratón no hay hover (en la tablet se quedaba «levantada» tras tocar) */
.pcard:active{cursor:grabbing}
.pcard.dragging{opacity:.4;cursor:grabbing;transform:scale(.98)}
.pcard.prep-preparado{background:var(--prep-ok);border-left-color:var(--green)}
.pcard.prep-sin_preparar{background:var(--prep-no);border-left-color:var(--red)}
.pcard.urgente{border-left-color:#e0524f!important}
.pcard.baja{border-left-color:var(--text3)}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:3px}
.pc-num{font-size:10.5px;font-weight:600;color:var(--blue);font-family:'DM Mono',monospace;letter-spacing:-.01em}
[data-theme="dark"] .pc-num{color:var(--blue-d)}
/* Acciones del pedido SIEMPRE visibles (antes solo con hover: en táctil eran invisibles y en
   escritorio parecía que "ver líneas / editar / partir" habían desaparecido) */
.pc-acts{display:flex;gap:2px;opacity:.75}
@media (hover:hover){ .pcard:hover .pc-acts{opacity:1} }   /* Tanda 2 D6: sin ratón no hay hover (en la tablet se quedaba «levantada» tras tocar) */
.pc-acarga{width:100%;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--blue-l);color:var(--blue-d);border:1px solid transparent;border-radius:8px;padding:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif}
.pc-acarga:hover{border-color:var(--blue)}
/* Táctil (tablet/móvil): área de toque decente */
@media (pointer:coarse){
  .ico{padding:8px 10px;font-size:14px}
  .pc-acarga{padding:11px;font-size:12.5px}
}

/* ── Táctil: toque fiable (lag + "se me seleccionan las letras" en la tablet) ── */
/* manipulation = sin doble-tap-zoom → el navegador dispara el toque al instante */
body{touch-action:manipulation}
/* Tamaño de letra fijo por tablet (botón «Aa», ago-2026): zoom en vez de font-size porque la
   app está maquetada en px — zoom escala TODO (texto, iconos, área táctil) a la vez, que es
   justo lo que pidió el dueño; font-size solo habría movido el texto y no el resto. */
html[data-fuente="grande"] body{zoom:1.15}
html[data-fuente="xl"] body{zoom:1.3}
/* Pantalla completa (botón ⛶, ago-2026): fuera cabecera y pestañas — son sticky EN FLUJO,
   así que al esconderlas el contenido recupera todo el alto sin tocar ningún padding. El
   chip flotante devuelve los menús; va DEBAJO de los diálogos (ellos: z-index 10060+). */
html[data-chrome="oculto"] .topbar,
html[data-chrome="oculto"] .tabs-bar,
html[data-chrome="oculto"] #subtab-bar{display:none!important}   /* !important: #subtab-bar lleva display:flex EN LÍNEA y ganaría a cualquier selector */
#chrome-exit{display:none;position:fixed;top:8px;right:8px;z-index:9000;width:40px;height:40px;
  align-items:center;justify-content:center;border:1px solid var(--border2);border-radius:10px;
  background:var(--surface);color:var(--text2);font-size:17px;opacity:.6;cursor:pointer;box-shadow:var(--shadow-sm)}
#chrome-exit:active{opacity:1}
html[data-chrome="oculto"] #chrome-exit{display:flex}
/* G1 (tanda de arreglo v310, F3): dentro de Planta el chip ⛶ NO se ve — tocarlo tocaba la
   preferencia 'pantalla' guardada de la tablet (podía re-armar el atasco de F1 por otra puerta
   y dejar TODA la app sin menús para siempre) y encima solapaba la esquina de la pestaña BIG
   BAG. Las salidas de Planta son «Salir» (botón propio) y la ayuda (i). !important: gana al
   display:flex de arriba, que también es !important pero este selector es más específico. */
html[data-en-planta] #chrome-exit{display:none!important}
/* Los menús se recogen al bajar (20-sep-2026; spec 2026-09-20-menus-que-se-recogen.md). El
   dueño: «que el menú no esté fijo, para aprovechar al máximo la pantalla». Medido en su PC a
   1280×900: cabecera (56) + fila de grupos (45) + barra de estado (33) = 134px que NO se van
   nunca, el 15% de la pantalla ocupado mientras se leen datos. Bajas y se recogen; subes un
   pelín y vuelven, sin tener que llegar arriba del todo.
   transform y NO display: las tres son sticky EN FLUJO, así que apagarlas daría un salto del
   contenido y no habría nada que animar. Esto no compite con el ⛶ (data-chrome), que las apaga
   a mano y para siempre: con él puesto, el oyente del scroll ni toca data-nav. */
.topbar,.tabs-bar,.statusbar{transition:transform .22s ease}
html[data-nav="oculta"] .topbar{transform:translateY(-100%)}
html[data-nav="oculta"] .tabs-bar{transform:translateY(calc(-100% - 56px))}   /* lo suyo MÁS la cabecera que tiene encima */
html[data-nav="oculta"] .statusbar{transform:translateY(100%)}
/* ── Franja del ENTORNO DE PRUEBAS (2-oct-2026; spec 2026-10-02-entorno-de-pruebas.md) ────────────
   Con CARGAS_PRUEBAS=1 el servidor lo dice en /api/health y nucleo.js · pruebasMarcar() pone
   data-pruebas en <html> y esta franja arriba del todo. Que nadie confunda el entorno de pruebas con
   producción: roja (--c-prob-btn: el rojo de FONDO con letra blanca, definido en los dos temas), fija,
   y en el MISMO sitio en todas las pantallas — Planta con los menús escondidos incluida, por eso no
   cuelga de la cabecera. Sin data-pruebas la altura es 0 y ninguna regla de aquí abajo cambia nada.
   Es sticky y EN FLUJO (como la cabecera y las pestañas, que también lo son): ocupa su sitio y no
   tapa nada, y a cambio las dos barras pegadas debajo bajan lo que ella mide (--franja-h) — si no, la
   cabecera se pegaría a top:0 POR ENCIMA de la franja al hacer scroll. Los diálogos (position:fixed,
   z-index ≥ 200) la cubren mientras están abiertos, como cubren todo; el login no (ver abajo). */
/* 8-oct-2026 (spec 2026-10-08-progreso-sync.md): junto a la franja de pruebas (--pr-h) hay otra, fina, para las
   sincronizaciones con BC lanzadas a mano (--sp-h, nucleo.js · _spPintarFranja, que pone data-sync). --franja-h pasa a
   ser la SUMA de las que haya: todo lo que ya colgaba de ella (cabecera, pestañas, notificaciones…) baja lo que midan
   las dos, y con ninguna puesta vale 0 como siempre. */
html{--pr-h:0px;--sp-h:0px;--franja-h:calc(var(--pr-h) + var(--sp-h))}
html[data-pruebas]{--pr-h:26px}
html[data-sync]{--sp-h:26px}
.franja-pruebas{position:sticky;top:0;z-index:101;box-sizing:border-box;height:var(--pr-h);display:block;
  line-height:var(--pr-h);padding:0 16px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--c-prob-btn);color:#fff;font-size:var(--fs-xs);font-weight:700;letter-spacing:.03em}
html[data-pruebas] .topbar,html[data-sync] .topbar{top:var(--franja-h)}
html[data-pruebas] .tabs-bar,html[data-sync] .tabs-bar{top:calc(56px + var(--franja-h))}
/* lo que se pegaba debajo de la cabecera con una medida puesta a mano (56 + 8, o 113 en el CRM) */
html[data-pruebas] .notif-centro,html[data-sync] .notif-centro{top:calc(64px + var(--franja-h))}
html[data-pruebas] #chrome-exit,html[data-sync] #chrome-exit{top:calc(8px + var(--franja-h))}
/* el login es una hoja a pantalla completa (position:fixed;inset:0 puesto en línea desde app.js: de ahí el
   !important): sin esto taparía la franja justo en la pantalla donde más falta hace verla */
html[data-pruebas] #login-ov,html[data-sync] #login-ov{top:var(--franja-h)!important}
@media(min-width:1024px){
  html[data-pruebas] .crmx .crm-lista-col,html[data-sync] .crmx .crm-lista-col{top:calc(113px + var(--franja-h));max-height:calc(100vh - 174px - var(--franja-h))}
  html[data-pruebas][data-nav="oculta"] .crmx .crm-lista-col,html[data-sync][data-nav="oculta"] .crmx .crm-lista-col{top:calc(12px + var(--franja-h));max-height:calc(100vh - 24px - var(--franja-h))}
  html[data-pruebas][data-chrome="oculto"] .crmx .crm-lista-col,html[data-sync][data-chrome="oculto"] .crmx .crm-lista-col{top:calc(12px + var(--franja-h));max-height:calc(100vh - 74px - var(--franja-h))}
}
/* ── Progreso de las sincronizaciones con BC (8-oct-2026, spec 2026-10-08-progreso-sync.md) ─────────
   Tres sitios, las mismas piezas: la barra grande de Ajustes (.sp), la pequeña dentro del botón «Traer de BC»
   (.sp-mini) y la franja de arriba de la app (.franja-sync). Todo con las familias de siempre: «en curso» mientras
   corre, «hecho» cuando acaba bien, «problema» si falla — sin colores sueltos, así el tema oscuro sale solo. */
.sp{margin-top:6px}
.sp-tit{font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.sp-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.sp-barra{display:block;position:relative;overflow:hidden;box-sizing:border-box;width:260px;max-width:100%;height:10px;border-radius:var(--rd-pill);
  background:var(--c-curso-bg);border:1px solid var(--c-curso-ln)}
.sp-barra>i{display:block;height:100%;width:0;background:var(--c-curso-fg);transition:width .4s ease}
.sp-ok .sp-barra{background:var(--c-ok-bg);border-color:var(--c-ok-ln)}
.sp-ok .sp-barra>i{background:var(--c-ok-fg)}
.sp-mal .sp-barra{background:var(--c-prob-bg);border-color:var(--c-prob-ln)}
.sp-mal .sp-barra>i{background:var(--c-prob-fg)}
.sp-txt{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--text2)}
.sp-ok .sp-txt{color:var(--c-ok-fg)}
.sp-mal .sp-txt{color:var(--c-prob-fg)}
/* sin porcentaje (un recurso suelto que no es pedidos): un tramo que se desliza, para no inventar un número */
.sp-indef>i{width:35%!important;animation:sp-desliza 1.2s ease-in-out infinite}
@keyframes sp-desliza{0%{margin-left:-35%}100%{margin-left:100%}}
@media (prefers-reduced-motion:reduce){ .sp-indef>i{animation:none;width:100%!important;opacity:.5} }
.sp-gira{display:inline-block;animation:girar 1s linear infinite}
.sp-mini{display:inline-flex;align-items:center;gap:8px;max-width:100%;vertical-align:middle;font-variant-numeric:tabular-nums}
.sp-mini .sp-barra{width:64px;height:8px;flex:none}
.sp-mini-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* la franja: sticky y EN FLUJO como la de pruebas, justo debajo de ella (top:--pr-h), con el avance como una línea fina al pie */
.franja-sync{position:sticky;top:var(--pr-h);z-index:101;box-sizing:border-box;height:var(--sp-h);display:block;overflow:hidden;
  line-height:calc(var(--sp-h) - 4px);padding:0 16px;text-align:center;white-space:nowrap;text-overflow:ellipsis;
  background:var(--c-curso-bg);color:var(--c-curso-fg);border-bottom:1px solid var(--c-curso-ln);font-size:var(--fs-xs);font-weight:700;font-variant-numeric:tabular-nums}
.sp-franja-t{display:block;overflow:hidden;text-overflow:ellipsis}
.sp-franja-linea{position:absolute;left:0;bottom:0;display:block;height:3px;width:0;background:var(--c-curso-fg);transition:width .4s ease}
.sp-franja-linea.sp-indef{width:35%;animation:sp-desliza 1.2s ease-in-out infinite}
@media print{ .franja-sync{display:none} }
/* superficies interactivas: mantener el dedo o arrastrar un pelín NO debe seleccionar texto
   (la selección se comía el primer toque y el siguiente solo servía para quitarla) */
.prow,.prow *,.pcard,.pcard *,button,.tab,.csub,.ico{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.prow{-webkit-tap-highlight-color:transparent}
.prow:active{filter:brightness(.955)}   /* feedback inmediato al pulsar la fila (el apretón scale(.98) va en el bloque «Tanda 2» del final) */
@keyframes girar{to{transform:rotate(360deg)}}   /* spinner de "Cargando líneas…" */
@media (pointer:coarse){
  .prow{min-height:60px}
  .prow-acts{gap:8px!important}
  .prow-acts button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:19px!important}
  /* P19 · táctil 40px: chips de filtro, subtabs y botones de diálogo (los que ya tienen su
     propio padding en línea, p.ej. iconos sueltos en filas de tabla, no se tocan: gana el
     estilo en línea sobre esta regla y así la densidad de esas filas no se rompe) */
  .chip-urgente{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .filter-btn{min-height:40px}
  .csub{min-height:40px;display:inline-flex;align-items:center}
  .btn-primary{min-height:40px;padding:11px 18px}
  .btn-sec,.btn-del{min-height:40px;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center}
}
.ico{background:none;border:none;cursor:pointer;padding:3px 6px;border-radius:6px;font-size:12.5px;color:var(--text2);transition:background .12s,color .12s}
.ico:hover{background:var(--surface3);color:var(--text)}
.ico.del:hover{background:var(--red-l);color:var(--red)}
.pc-client{font-size:12.5px;font-weight:600;line-height:1.3;margin-bottom:2px}
.pc-dest{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:3px}
.pc-ubic{font-size:10.5px;display:flex;align-items:center;gap:3px;margin-top:3px;font-weight:500}
.pc-ubic.has-ubic{color:var(--blue-d);background:var(--blue-l);padding:2px 7px;border-radius:var(--radius-pill);display:inline-flex}
.pc-footer{display:flex;justify-content:space-between;align-items:center;margin-top:7px;padding-top:6px;border-top:1px solid var(--border)}
.pc-kg{font-size:11px;font-weight:600}
.pc-porte{font-size:11px;font-weight:600;color:var(--green)}
.prep-toggle{font-size:10.5px;padding:3px 8px;border-radius:var(--radius-pill);border:none;cursor:pointer;font-family:inherit;font-weight:600;transition:all .15s}
.prep-toggle.preparado{background:var(--green-l);color:var(--prep-ok-text)}
.prep-toggle.sin_preparar{background:var(--red-l);color:var(--prep-no-text)}

/* ── Cajones de Preparación: cola con regla fija (cargas → cola → faltas → hechos hoy) ──── */
.cajon-resumen{font-size:12.5px;color:var(--text2);font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.cajon-resumen b{color:var(--text)}
.cajon-siguiente{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-bottom:16px}
.cajon-siguiente-vacio{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:var(--radius-sm);background:var(--green-l);color:var(--prep-ok-text);font-weight:700;font-size:14px;margin-bottom:16px}
.cajon{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;overflow:hidden}
.cajon-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;background:var(--surface2);font-weight:700;font-size:12.5px}
.cajon-cab[onclick]{cursor:pointer}
.cajon-titulo{display:flex;align-items:center;gap:7px}
.cajon-contador{background:var(--border2);color:var(--text2);border-radius:var(--radius-pill);padding:1px 8px;font-size:11px;font-weight:700}
.cajon-body{padding:0}
.cajon-vacio{padding:18px;text-align:center;color:var(--text3);font-size:12.5px}
.chip-mios{display:flex;align-items:center;gap:8px;background:var(--blue-l);color:var(--blue-d);border-radius:var(--radius-sm);padding:8px 12px;font-size:12.5px;font-weight:700;margin-bottom:10px}
.chip-mios button{margin-left:auto;background:none;border:1px solid var(--blue-d);color:var(--blue-d);border-radius:var(--radius-pill);padding:3px 11px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.chip-urgente{background:none;border:none;cursor:pointer;color:var(--text3);padding:6px;font-size:16px;line-height:1;border-radius:6px;transition:color .12s,background .12s}
.chip-urgente:hover{background:var(--red-l);color:var(--red)}
.chip-urgente.on{color:var(--red)}
/* v240 (auditoría) · área de toque extendida SIN agrandar el dibujo: el ::after invisible
   estira la zona que responde al dedo hasta ~44px alrededor de los controles pequeños —
   guantes y tablet en movimiento. position:relative para anclar el pseudoelemento. */
.prow-dots,.chip-urgente,.menu-fila button{position:relative}
/* vertical -8 (ahí se falla con el dedo) pero horizontal solo -2: con -8 a los lados, la zona
   invisible PISABA al botón vecino en las filas apretadas y un toque en su borde disparaba
   el control equivocado — peor que no ampliar */
.prow-dots::after,.chip-urgente::after,.menu-fila button::after{content:'';position:absolute;inset:-8px -2px}

.cajon-carga{border:none;border-radius:0;box-shadow:none}
.cajon-carga+.cajon-carga{border-top:2px solid var(--border2)}
.cajon-carga-cab{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:9px 14px;background:var(--surface2);border-bottom:1px solid var(--border);font-size:12.5px;font-weight:800}
.cajon-carga-cab .ti-truck{color:var(--blue-d)}
.cajon-carga-comp{font-weight:600;color:var(--text2);font-size:11px}
.cajon-carga-comp.t{cursor:pointer;user-select:none}
.cajon-compa-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:8px 14px 8px 26px;border-bottom:1px solid var(--border);font-size:12.5px;cursor:pointer;background:var(--surface2)}
.cajon-compa-row:hover{filter:brightness(.97)}
.cajon-compa-chip{border-radius:var(--radius-pill);padding:1px 8px;font-size:10.5px;font-weight:800;white-space:nowrap}
.cajon-compa-meta{margin-left:auto;color:var(--text2);font-size:11px;text-align:right}
.cajon-hecho-row{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--border);font-size:12.5px;cursor:pointer}
.cajon-hecho-row:last-child{border-bottom:none}
.cajon-hecho-row:hover{background:var(--surface2)}
.cajon-hecho-hora{margin-left:auto;color:var(--text3);font-size:11px}

/* ── Cargas ──────────────────────────────────────────────────────────────── */
.cargas-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.cargas-title{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em}
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;align-items:start}
.cc{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .08s;box-shadow:var(--shadow-sm)}
@media (hover:hover){ .cc:hover{box-shadow:var(--shadow)} }   /* Tanda 2 D6: sin ratón no hay hover (en la tablet se quedaba «levantada» tras tocar) */
.cc.drag-over{border-color:var(--blue);box-shadow:0 0 0 3px rgba(24,95,165,.25),var(--shadow);transform:translateY(-2px)}
/* Cargas plegadas: solo nombre + resumen + chevron (para que quepan muchas al arrastrar) */
.cc-collapse-btn i{transition:transform .15s}
.cc-collapsed-info{display:none;font-size:11px;font-weight:600;opacity:.75;align-items:center;white-space:nowrap;margin-right:2px}
.cc-collapsed .cc-collapsed-info{display:inline-flex}
.cc-collapsed .cc-codigo,
.cc-collapsed .mat-row,
.cc-collapsed .cc-kpis,
.cc-collapsed .cc-prep-summary,
.cc-collapsed .cc-coste-box,
.cc-collapsed .cc-meta,
.cc-collapsed .carga-drop,
.cc-collapsed .cc-selects{display:none!important}
.cc-collapsed .cc-hdr{border-bottom:none;padding:8px 11px}
.cc-collapsed .cc-top{margin-bottom:0}
.cc-collapsed.drag-over{border-style:dashed}
.cc-hdr{padding:11px 13px;border-bottom:1px solid var(--border)}
.cc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:5px}
.cc-name-wrap{flex:1;min-width:0}
.cc-name-input{font-size:12.5px;font-weight:600;border:none;background:none;color:inherit;width:100%;outline:none;padding:1px 0}
.cc-name-input:focus{background:rgba(127,127,127,.1);border-radius:5px;padding:1px 5px}
.cc-codigo{font-size:10.5px;margin-top:3px;display:flex;align-items:center;gap:3px;color:var(--text2)}
.cc-codigo input{font-size:10.5px;border:1px solid var(--border);border-radius:5px;padding:2px 6px;background:var(--surface);color:inherit;width:100%;font-family:'DM Mono',monospace;outline:none}
.cc-codigo input:focus{border-color:var(--blue)}
.cc-acts{display:flex;gap:2px;flex-shrink:0}
.cc-btn{background:none;border:none;cursor:pointer;padding:3px 5px;border-radius:5px;font-size:12.5px;color:var(--text2);transition:background .12s,color .12s}
.cc-btn:hover{background:rgba(127,127,127,.14);color:var(--text)}
.cc-kpis{display:flex;gap:8px;font-size:11px;flex-wrap:wrap;margin-bottom:7px;align-items:center}
.ckv{font-weight:600}
.ckl{font-size:10.5px;color:var(--text2)}
.cc-prep-summary{display:flex;gap:5px;margin-bottom:7px}
.prep-pill{font-size:10.5px;padding:2px 8px;border-radius:var(--radius-pill);font-weight:600}
.pp-ok{background:var(--green-l);color:var(--prep-ok-text)}
.pp-no{background:var(--red-l);color:var(--prep-no-text)}
.cc-bar-track{background:rgba(127,127,127,.16);border-radius:var(--radius-pill);height:5px;overflow:hidden;margin-bottom:7px}
.cc-bar-fill{height:5px;border-radius:var(--radius-pill);transition:width .4s ease}
.cc-coste-box{background:var(--surface2);border-radius:var(--radius-sm);padding:8px 10px;border:1px solid var(--border);margin-bottom:7px}
.cc-coste-lbl{font-size:10.5px;color:var(--text2);margin-bottom:4px;display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;letter-spacing:.04em}
.cc-coste-row{display:flex;align-items:center;gap:6px}
.cc-coste-input{font-size:12.5px;font-weight:600;border:1px solid var(--border2);border-radius:6px;padding:5px 8px;background:var(--surface);color:var(--text);width:96px;outline:none}
.cc-coste-input:focus{border-color:var(--blue);box-shadow:var(--ring)}
.cc-mode-btn{font-size:10.5px;font-weight:500;padding:3px 8px;border-radius:6px;border:1px solid var(--border2);background:var(--surface);color:var(--text2);cursor:pointer;font-family:inherit;transition:all .12s}
.cc-mode-btn.pendiente{border-color:var(--red);color:var(--red);background:var(--red-l)}
.cc-mode-btn.fijo{border-color:var(--green);color:var(--green);background:var(--green-l)}
.cc-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cc-date{font-size:10.5px;border:1px solid var(--border2);border-radius:6px;padding:4px 7px;background:var(--surface);color:inherit;flex:1}
.carga-drop{min-height:74px;padding:6px;display:flex;flex-direction:column;gap:4px}
.carga-drop.empty-drop{align-items:center;justify-content:center;min-height:94px}
.drop-hint{font-size:11px;color:var(--text3);text-align:center;margin-top:3px}
.mini-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 11px;display:flex;align-items:flex-start;gap:9px;transition:background .12s,box-shadow .12s;background:var(--surface)}
.mini-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
@media (hover:hover){ .mini-card:hover{box-shadow:var(--shadow-sm)} }   /* Tanda 2 D6: sin ratón no hay hover (en la tablet se quedaba «levantada» tras tocar) */
.mini-card.mc-preparado{background:var(--prep-ok);border-color:transparent}
.mini-card.mc-sin_preparar{background:var(--prep-no);border-color:transparent}
.mini-card.mc-default{background:var(--surface2)}
.mini-card.mc-en_prep{background:var(--amber-l);border-color:transparent;box-shadow:inset 3px 0 0 var(--amber)}
.cp-col.cp-over{outline:2px dashed var(--blue);outline-offset:-2px;background:var(--blue-l)}
.mini-order{min-width:24px;height:24px;padding:0 6px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;background:var(--blue-l);color:var(--blue-d)}
.mini-body{min-width:0}
.mini-client{font-size:12.5px;font-weight:700;white-space:normal;overflow-wrap:break-word;line-height:1.3}
.mini-meta{font-size:10.5px;color:var(--text2);display:flex;gap:4px;margin-top:1px;flex-wrap:wrap}
.mini-ubic{font-size:10.5px;font-weight:600;color:var(--blue-d);display:flex;align-items:center;gap:2px}
.mini-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;border-top:1px solid var(--border2);padding-top:7px;margin-top:1px}
.mini-rm{background:none;border:none;cursor:pointer;color:var(--text3);font-size:16px;padding:5px;border-radius:6px;line-height:1;transition:background .12s,color .12s}
.mini-rm:hover{color:var(--red);background:var(--red-l)}
.order-input{width:42px;height:30px;font-size:12.5px;text-align:center;border:1px solid var(--border2);border-radius:6px;padding:0 2px;background:var(--surface);color:var(--text);box-sizing:border-box;-moz-appearance:textfield;appearance:textfield}
.order-input:focus{border-color:var(--blue);outline:none}
.order-input::-webkit-outer-spin-button,.order-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Selectores con buscador de Reparto (spec 2026-10-08-reparto-desplegables-con-buscador.md). El botón
   .sb-btn sustituye a la vista del <select> y copia sus clases (cc-sel, ctl, ctl-sm…): por eso su base
   va ANTES de .cc-sel — con igual especificidad manda lo que se declara después, y así la clase del select
   (tamaño de letra, relleno) gana a este aspecto de partida. El resto (.sb-pop…) va más abajo, ANTES del kit «ds»: ese bloque solo admite reglas bajo .ds (test-front-ds). */
.sb-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;max-width:100%;
  padding:6px 10px;border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text);
  font-size:var(--fs-sm);text-align:left;cursor:pointer;vertical-align:middle}
.cc-selects{padding:9px 11px;border-top:1px solid var(--border);background:var(--surface2);display:flex;flex-direction:column;gap:5px}
.cc-sel{width:100%;font-size:11px;padding:6px 8px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);outline:none}
.cc-sel:focus{border-color:var(--blue)}
.cc-pdf-btn{width:100%;margin-top:5px;padding:8px;font-size:11px;font-weight:500;background:var(--blue-strong);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;transition:filter .15s}
.cc-pdf-btn:hover{filter:brightness(1.1)}
.new-carga-btn{background:var(--surface);border:2px dashed var(--border2);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:var(--text2);font-size:12.5px;font-weight:500;transition:all .15s;min-height:130px;font-family:inherit}
.new-carga-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-l)}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:600}
.b-blue{background:var(--blue-l);color:var(--blue-d)}
.b-green{background:var(--green-l);color:var(--green)}
.b-amber{background:var(--amber-l);color:var(--amber)}
.b-red{background:var(--red-l);color:var(--red)}
.b-gray{background:var(--badge-gray-bg);color:var(--badge-gray-t)}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ── P6 · chip único de estado de PEDIDO — mismos colores y texto en toda la app ── */
.chip-ped{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:700;white-space:nowrap}
.chip-ped-sin_preparar{background:var(--red-l);color:var(--prep-no-text)}
.chip-ped-en_preparacion{background:var(--amber-l);color:var(--amber)}
.chip-ped-preparado{background:var(--green-l);color:var(--prep-ok-text)}
.chip-ped-carga{background:var(--blue-l);color:var(--blue-d)}
.chip-ped-entregado{background:var(--teal-l);color:var(--teal)}

/* ── Mapa de la campa ──────────────────────────────────────────────────────── */
.campa-mk{position:absolute;transform:translate(-50%,-50%);width:3.1%;aspect-ratio:1;min-width:16px;min-height:16px;border-radius:50%;border:2px solid var(--green);background:rgba(59,109,17,.14);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;font-family:'DM Sans',sans-serif;color:#fff;line-height:1;transition:.1s}
.campa-mk:hover{background:rgba(59,109,17,.34)}
.campa-mk.occ{background:var(--blue);border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.4)}
.campa-mk.occ:hover{background:var(--blue-d)}
.campa-mk.sel{outline:3px solid var(--amber);outline-offset:1px;z-index:3}
.campa-zone{position:absolute;transform:translate(-50%,-50%);border:2px dashed transparent;border-radius:8px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.campa-zone:hover{border-color:var(--blue);background:rgba(24,95,165,.12)}
.campa-zone.occ{border-color:var(--teal);background:rgba(20,140,110,.16)}
.campa-zone.sel{outline:3px solid var(--amber);outline-offset:1px}
.campa-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:20px;border:1px solid var(--blue);background:var(--blue-l);color:var(--blue-d);cursor:pointer}
.campa-chip.sel{background:var(--blue);color:#fff}

/* ── Calendario ──────────────────────────────────────────────────────────── */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-nav-title{font-size:16px;font-weight:600}
.cal-nb{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:6px 13px;font-size:12.5px;cursor:pointer;color:var(--text2);font-family:inherit;transition:all .12s}
.cal-nb:hover{background:var(--surface2);color:var(--text)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:14px;border:1px solid var(--border)}
.cal-dow{background:var(--surface2);text-align:center;padding:8px;font-size:10.5px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}
.cal-day{background:var(--surface);padding:7px;min-height:74px}
.cal-day.other{background:var(--surface2)}
.cal-day.today{background:var(--blue-l)}
.cal-dn{font-size:11px;color:var(--text2);margin-bottom:3px;font-weight:600}
.cal-day.today .cal-dn{color:var(--blue);font-weight:700}
[data-theme="dark"] .cal-day.today .cal-dn{color:var(--blue-d)}
.cal-ev{border-radius:6px;padding:2px 6px;font-size:10.5px;font-weight:600;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-drop-hi{outline:2px dashed var(--blue)!important;outline-offset:-2px;background:var(--blue-l)!important}

/* ── Transportistas ──────────────────────────────────────────────────────── */
.trans-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.trans-hdr{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.trans-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0;box-shadow:var(--shadow-sm)}
.trans-body{padding:13px 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tf-label{font-size:10.5px;color:var(--text2);margin-bottom:2px;text-transform:uppercase;letter-spacing:.04em}
.tf-val{font-size:12.5px;font-weight:500}
.trans-tarifas{padding:11px 16px;border-top:1px solid var(--border)}
.tarifa-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;font-size:11px;border-bottom:1px solid var(--border)}
.tarifa-row:last-child{border-bottom:none}

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.dash-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);transition:box-shadow .15s,transform .08s}
@media (hover:hover){ .dash-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)} }   /* Tanda 2 D6: sin ratón no hay hover (en la tablet se quedaba «levantada» tras tocar) */
.dash-val{font-size:18px;font-weight:600;margin-top:5px;letter-spacing:-.02em}
.dash-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);font-weight:600}
.dash-sub{font-size:11px;color:var(--text2);margin-top:4px}
.dash-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.list-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.lc-hdr{padding:12px 16px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);display:flex;align-items:center;justify-content:space-between;background:var(--surface2)}
.list-row{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--border);transition:background .12s}
.list-row:last-child{border-bottom:none}
.list-row:hover{background:var(--surface2)}
.list-main{flex:1;min-width:0}
.list-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-meta{font-size:11px;color:var(--text2);margin-top:1px}
.prog-bar{height:5px;border-radius:var(--radius-pill);overflow:hidden;background:var(--surface3);width:80px;margin-top:4px}
.prog-fill{height:5px;border-radius:var(--radius-pill)}

/* ── Dashboard de planta (tablón para tablet: se MIRA de pie, letra y badges grandes) ──────── */
.pdash-hdr{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pdash-fecha{font-size:24px;font-weight:700;letter-spacing:-.01em}
.pdash-resumen{font-size:14px;color:var(--text2);font-weight:600}
.pdash-filtros{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.pdash-chip{min-height:44px;padding:10px 20px;font-size:14px;font-weight:700;border-radius:var(--radius-pill);border:2px solid var(--border2);background:var(--surface);color:var(--text2);cursor:pointer;font-family:inherit;transition:all .15s;display:inline-flex;align-items:center;gap:7px}
.pdash-chip:hover{border-color:var(--text3)}
.pdash-chip.active{background:var(--blue);border-color:var(--blue);color:#fff}
.pdash-chip-saco.active{background:var(--amber);border-color:var(--amber);color:#fff}
.pdash-seccion{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);margin:24px 0 12px}
.pdash-seccion:first-of-type{margin-top:0}
.pdash-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:700px){
  .pdash-grid3{grid-template-columns:1fr}
  .pdash-col-hoy{order:-1}   /* apiladas: HOY primero, aunque en el grid vaya en el medio */
}
.pdash-col{display:flex;flex-direction:column;gap:10px}
.pdash-col-hdr{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;padding-bottom:8px;border-bottom:2px solid var(--border)}
.pdash-col-n{background:var(--border2);color:var(--text2);border-radius:var(--radius-pill);padding:1px 10px;font-size:12.5px;font-weight:700}
.pdash-card{background:var(--surface);border:1px solid var(--border);border-left:5px solid transparent;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-sm)}
.pdash-card-no{border-left-color:var(--red);background:var(--red-l)}
.pdash-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pdash-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--radius-pill);font-size:14px;font-weight:800;letter-spacing:.02em}
.pdash-b-blue{background:var(--blue-l);color:var(--blue-d)}
.pdash-b-amber{background:var(--amber-l);color:var(--amber)}
.pdash-b-teal{background:var(--teal-l);color:var(--teal)}
.pdash-b-gray{background:var(--badge-gray-bg);color:var(--badge-gray-t)}
.pdash-kgud{font-size:11px;color:var(--text2);margin:-4px 0 8px;font-weight:600}
.pdash-mat{font-size:16px;font-weight:700;line-height:1.3;margin-bottom:4px}
.pdash-cant{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px}
.pdash-cant .pdash-kg{font-weight:500;color:var(--text2)}
.pdash-meta{font-size:11px;color:var(--text2)}
.pdash-est{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:4px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:800}
.pdash-est-ok{background:var(--green-l);color:var(--green)}
.pdash-est-no{background:var(--red);color:#fff}
.pdash-est-proceso{background:var(--amber-l);color:var(--amber)}
.pdash-stock{display:inline-flex;padding:3px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:800;background:var(--blue-l);color:var(--blue-d)}
.pdash-vacio{text-align:center;padding:26px 10px;color:var(--text3);font-size:12.5px}
.pdash-sinfecha{margin-top:14px;background:var(--amber-l);color:var(--amber);border-radius:var(--radius-sm);padding:9px 13px;font-size:12.5px;font-weight:600}
.pdash-prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:700px){ .pdash-prod-grid{grid-template-columns:1fr} }
.pdash-prod-sub{display:flex;flex-direction:column;gap:10px}
.pdash-prod-hdr{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;padding-bottom:8px;border-bottom:2px solid var(--border)}

/* ── Barra de estado ─────────────────────────────────────────────────────── */
.statusbar{background:var(--surface);border-top:1px solid var(--border);padding:9px 20px;align-items:center;justify-content:space-between;position:sticky;bottom:0;backdrop-filter:blur(6px)}
/* «Solo donde sirve» (20-sep-2026, decisión del dueño; spec 2026-09-20-menus-que-se-recogen.md).
   Esta leyenda habla de ARRASTRAR pedidos a las cargas, y solo se arrastra en Planificación y
   Preparación. En Compras, Producción, CRM o Ajustes no decía nada y se comía 33px FIJOS de
   alto en TODAS las pantallas — de los 134px de menús que nunca se van.
   Hasta hoy se apagaba a mano pantalla por pantalla (Planta v324, Gaviones fase 7, Finanzas
   13-sep): tres parches que había que acordarse de repetir en cada pantalla nueva. Ahora nace
   APAGADA y se enciende donde sirve, que es la lista corta — y Gaviones sigue cubierto, porque
   su Expedición › Planificación es esta misma vista (data-vista="plan").
   No se pierde ningún aviso: lo que log() escribe aquí sale también en el toast flotante
   (#toast-box), que se ve en todas partes. */
.statusbar{display:none}
html[data-vista="plan"] .statusbar,
html[data-vista="prep"] .statusbar{display:flex}
.sb-msg{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:5px}
.sb-msg.ok{color:var(--green)}
.sb-msg.warn{color:var(--amber)}

/* V1.3 · avisos de log() como toast FLOTANTE: fixed, fuera del flujo, no desplaza nada de
   abajo. Se apila en columna (los nuevos se añaden al final del contenedor, que está anclado
   por 'bottom', así que la pila crece hacia arriba). */
.toast-box{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:11000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;max-width:480px;width:max-content}
.toast-item{background:#2B3440;color:#fff;border-radius:10px;padding:11px 16px;font-size:14px;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.25);display:flex;align-items:flex-start;gap:10px;pointer-events:auto;max-width:480px;font-family:'DM Sans',sans-serif;line-height:1.35}
.toast-item i{font-size:16px;flex-shrink:0;margin-top:1px}
.toast-item .toast-msg{min-width:0}
.toast-item.ok{background:#0F6E56}
.toast-item.warn{background:#9A2A1B}
.toast-action-btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:800;cursor:pointer;flex-shrink:0;font-family:inherit}
@media (max-width:480px){
  .toast-box{width:calc(100% - 24px);max-width:calc(100% - 24px)}
  .toast-item{width:100%;max-width:100%}
}

/* ── Notificaciones (F24, 17-sep-2026, spec 2026-09-17-f24-notificaciones.md): campana + centro +
   emergentes de notif.js. SOLO tokens ya existentes (ni un color a mano, skill diseno-cargas). El
   servidor es el dueño del estado (buzón en Postgres): esto solo pinta lo que trae notif.js. ────── */
#notif-btn{position:relative}
/* mismo motivo que .cf-pr-fila[hidden] de más abajo: .tb-btn fija display:flex, así que sin este
   override el atributo hidden de partida (antes de que notifArrancar() lo quite) no escondería nada */
#notif-btn[hidden]{display:none}
.notif-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;
  border-radius:var(--rd-pill);background:var(--c-prob-fg);color:#fff;font-size:var(--fs-xs);
  font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 0 0 2px var(--header-bg)}
.notif-badge[hidden]{display:none}

/* Centro: panel ANCLADO bajo la campana (no una hoja a pantalla completa) — notif.js lo cierra
   con Esc, con la × o tocando fuera (_notifClickFueraListener) */
.notif-centro{position:fixed;top:64px;right:12px;width:380px;max-width:calc(100vw - 24px);
  max-height:70vh;background:var(--surface);border:1px solid var(--border);border-radius:var(--rd);
  box-shadow:var(--sh-float);z-index:11040;display:flex;flex-direction:column;overflow:hidden}
.notif-centro-hdr{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--border);font-size:var(--fs-md);font-weight:700;color:var(--text)}
.notif-centro-hdr-btns{display:flex;gap:4px}
.notif-icobtn{background:none;border:none;color:var(--text2);cursor:pointer;padding:6px;
  border-radius:var(--rd-sm);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-md);min-height:var(--tap);min-width:var(--tap)}
.notif-icobtn:hover{background:var(--surface2);color:var(--text)}
.notif-marcartodas{margin:8px 14px 0;align-self:flex-start;background:none;border:1px solid var(--border2);
  color:var(--c-estr-fg);border-radius:var(--rd-sm);padding:7px 12px;font-size:var(--fs-xs);
  font-weight:700;cursor:pointer;font-family:inherit;min-height:var(--tap)}
.notif-marcartodas:hover{background:var(--c-estr-bg)}
.notif-lista{overflow-y:auto;padding:6px 0}
.notif-grupo{padding:8px 14px 4px;font-size:var(--fs-xs);font-weight:700;color:var(--text3);text-transform:uppercase}
.notif-item{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;margin:0 6px;
  border-radius:var(--rd-sm);cursor:pointer}
.notif-item:hover{background:var(--surface2)}
.notif-item:focus-visible{outline:2px solid var(--c-estr-fg);outline-offset:-2px}
.notif-item.noleida{background:var(--c-estr-bg)}
.notif-item.noleida:hover{filter:brightness(.97)}
.notif-item.noleida .notif-item-tit::after{content:'';display:inline-block;width:7px;height:7px;
  border-radius:50%;background:var(--c-estr-fg);margin-left:7px;vertical-align:middle}
.notif-ico{font-size:var(--fs-lg);flex-shrink:0;margin-top:1px}
.notif-item-txt{min-width:0;flex:1}
.notif-item-tit{font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.notif-item-desc{font-size:var(--fs-xs);color:var(--text2);margin-top:2px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif-item-cuando{font-size:var(--fs-xs);color:var(--text3);margin-top:3px}
.notif-vacio{text-align:center;padding:40px 20px;color:var(--text3);font-size:var(--fs-sm)}
.notif-vacio i{font-size:var(--fs-2xl);display:block;margin-bottom:8px;opacity:.4}
.notif-veranteriores{margin:4px 14px 12px;background:none;border:1px solid var(--border2);color:var(--text2);
  border-radius:var(--rd-sm);padding:8px 12px;font-size:var(--fs-xs);font-weight:600;cursor:pointer;
  font-family:inherit;min-height:var(--tap)}
.notif-veranteriores:hover{background:var(--surface2);color:var(--text)}
.notif-prefs{padding:10px 14px 14px;display:flex;flex-direction:column;gap:4px}
.notif-pref-fila{display:flex;align-items:center;gap:10px;padding:9px 2px;font-size:var(--fs-sm);
  color:var(--text);cursor:pointer;min-height:var(--tap)}
.notif-pref-fila input{width:18px;height:18px;flex-shrink:0}
.notif-prefs-guardar{margin-top:8px}

/* familias de color (mismo criterio que los chips del CRM): tarea=estructura, hecha=ok,
   visita=en curso, pedido=espera — icono y borde del emergente comparten familia */
.notif-fam-estr{color:var(--c-estr-fg)}
.notif-fam-ok{color:var(--c-ok-fg)}
.notif-fam-curso{color:var(--c-curso-fg)}
.notif-fam-esp{color:var(--c-esp-fg)}

/* Emergentes: abajo a la derecha, por encima de casi todo. «Casi» porque el aviso de versión
   nueva (#ver-chip, app.js, z-index:9999) vive en la misma esquina — con las hojas del CRM ya en
   11020-11030, quedar por debajo de ELLAS habría dejado el emergente invisible con cualquier
   ficha abierta; se prioriza que se vea (8 s y se cierra solo) sobre no tapar nunca el chip de
   versión, que rara vez coincide y sigue ahí en cuanto el emergente desaparece. */
/* Revisión de quien firma (17-sep-2026): bottom 84px, no 18 — en esa misma esquina vive el botón
   flotante «Nota» del CRM (#crm-fab-nota, 44px de alto a 26px del borde) y el emergente, que va por
   encima de todo, lo tapaba 8 s justo cuando más se usa; así la pila nace encima de él. */
.notif-pop-box{position:fixed;right:18px;bottom:84px;display:flex;flex-direction:column;gap:10px;
  z-index:11050;pointer-events:none}
.notif-pop{pointer-events:auto;width:340px;max-width:calc(100vw - 36px);background:var(--surface);
  border:1px solid var(--border);border-left:4px solid var(--c-estr-fg);border-radius:var(--rd);
  box-shadow:var(--sh-float);padding:12px 12px 12px 14px;display:flex;gap:10px;align-items:flex-start;
  cursor:pointer;animation:notifPopIn .18s ease}
.notif-pop.notif-fam-ok{border-left-color:var(--c-ok-fg)}
.notif-pop.notif-fam-curso{border-left-color:var(--c-curso-fg)}
.notif-pop.notif-fam-esp{border-left-color:var(--c-esp-fg)}
.notif-pop:hover{box-shadow:var(--sh-float),0 0 0 1px var(--border2)}
@keyframes notifPopIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .notif-pop{animation:none} }
.notif-pop-txt{min-width:0;flex:1;font-size:var(--fs-sm)}
.notif-pop-txt b{color:var(--text);font-weight:700}
.notif-pop-desc{color:var(--text2);font-size:var(--fs-xs);margin-top:3px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif-pop-cuando{display:block;color:var(--text3);font-size:var(--fs-xs);margin-top:4px}
.notif-pop-x{background:none;border:none;color:var(--text3);cursor:pointer;padding:2px;flex-shrink:0}
.notif-pop-x:hover{color:var(--text)}
@media (max-width:640px){
  /* Revisión de quien firma (17-sep-2026): en el móvil la barra de arriba se desliza de lado y la
     campana quedaba fuera de la pantalla, detrás de «Gaviones» y «Planta» — con order:-1 pasa a
     ser lo primero de la derecha (junto al buscador), a la vista sin deslizar: un contador que no
     se ve no avisa de nada. */
  #notif-btn{order:-1}
  .notif-centro{left:12px;right:12px;width:auto;top:60px;max-height:75vh}
  .notif-pop-box{left:12px;right:12px;bottom:84px}
  .notif-pop{width:100%;max-width:100%}
}

/* ── Modales ─────────────────────────────────────────────────────────────── */
.overlay{display:none;position:fixed;inset:0;background:rgba(8,15,30,0.5);backdrop-filter:blur(4px);align-items:flex-start;justify-content:center;z-index:200;padding-top:56px}
.overlay.open{display:flex;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);width:400px;max-width:calc(100vw - 28px);overflow:hidden;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:modalIn .2s cubic-bezier(.2,.8,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.modal-hdr{background:linear-gradient(135deg,var(--header-bg),var(--header-bg-2));padding:13px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-size:12.5px;font-weight:600;color:#fff;display:flex;align-items:center;gap:7px}
.modal-x{background:none;border:none;color:#9fc4ed;cursor:pointer;font-size:16px;padding:2px;border-radius:5px;transition:color .12s}
.modal-x:hover{color:#fff}
.modal-body{padding:16px;display:flex;flex-direction:column;gap:11px;overflow-y:auto;flex:1}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:10.5px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.04em}
.field input,.field select,.field textarea{font-size:12.5px;width:100%;padding:8px 11px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface2);color:var(--text);font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:var(--ring);background:var(--surface)}
.field textarea{min-height:62px;resize:vertical}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.modal-foot{padding:13px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;background:var(--surface2);flex-shrink:0}
.btn-primary{background:var(--blue-btn);color:#fff;border:none;border-radius:var(--radius-sm);padding:8px 16px;font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;font-family:inherit;box-shadow:0 2px 8px rgba(24,95,165,.3);transition:filter .15s,transform .05s}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:active{transform:translateY(1px)}
.btn-sec{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:8px 13px;font-size:12.5px;font-weight:500;color:var(--text2);cursor:pointer;font-family:inherit;transition:background .12s,color .12s}
.btn-sec:hover{background:var(--surface2);color:var(--text)}
.btn-del{background:var(--red);color:#fff;border:none;border-radius:var(--radius-sm);padding:8px 12px;font-size:12.5px;font-weight:500;cursor:pointer;margin-right:auto;font-family:inherit;transition:filter .15s}
.btn-del:hover{filter:brightness(1.08)}
.empty-state{text-align:center;padding:44px 20px;color:var(--text2)}
.empty-state i{font-size:38px;display:block;margin-bottom:10px;opacity:.3}
.loading{text-align:center;padding:44px;color:var(--text2);font-size:12.5px}

/* ── Modal selección PDF ─────────────────────────────────────────────────── */
.pdf-modal-overlay{display:none;position:fixed;inset:0;background:rgba(8,15,30,0.55);backdrop-filter:blur(4px);align-items:center;justify-content:center;z-index:300}
.pdf-modal-overlay.open{display:flex;animation:fadeIn .18s ease}
.pdf-modal{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);width:360px;max-width:calc(100vw - 28px);overflow:hidden;box-shadow:var(--shadow-lg);animation:modalIn .2s cubic-bezier(.2,.8,.2,1)}
.pdf-modal-hdr{background:linear-gradient(135deg,var(--header-bg),var(--header-bg-2));padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.pdf-modal-title{font-size:12.5px;font-weight:600;color:#fff;display:flex;align-items:center;gap:7px}
.pdf-modal-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.pdf-option{border:1px solid var(--border2);border-radius:var(--radius);padding:13px 14px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:11px}
@media (hover:hover){ .pdf-option:hover{border-color:var(--blue);background:var(--blue-l);transform:translateY(-1px)} }   /* Tanda 2 D6: sin ratón no hay hover (en la tablet se quedaba «levantada» tras tocar) */
.pdf-option-icon{width:38px;height:38px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.pdf-option-title{font-size:12.5px;font-weight:600}
.pdf-option-desc{font-size:11px;color:var(--text2);margin-top:2px}
.mat-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}
.mat-input{font-size:11px;border:1px solid var(--border);border-radius:6px;padding:4px 7px;background:var(--surface);color:inherit;outline:none;width:100%}
.mat-input:focus{border-color:var(--blue)}
.mat-input::placeholder{opacity:.5}

/* ── Vista de impresión (siempre en claro, va a papel) ───────────────────── */
.print-preview{display:none;position:fixed;inset:0;background:#fff;color:#15233b;z-index:500;overflow-y:auto;padding:0}
.print-preview.open{display:block}
.print-toolbar{background:#1F3864;padding:11px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;gap:10px}
.print-toolbar-title{color:#fff;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.print-toolbar-right{display:flex;gap:8px}
.print-btn{background:#378ADD;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:inherit}
.print-btn:hover{background:#185FA5}
/* el display:flex de arriba le ganaba al atributo hidden: el botón «Excel» (solo del informe de
   ventas del CRM) salía en TODAS las vistas previas de imprimir (visto el 29-sep-2026 en el
   informe diario de gaviones) */
.print-btn[hidden]{display:none}
.print-btn.close-btn{background:rgba(255,255,255,0.15)}
.print-btn.close-btn:hover{background:rgba(255,255,255,0.25)}
.print-content{max-width:750px;margin:0 auto;padding:30px 20px}
@media print{
  .print-toolbar{display:none!important}
  body > *:not(.print-preview){display:none!important}
  /* la hoja pasa al FLUJO NORMAL: si se queda fixed/absolute con inset:0 + overflow, el
     navegador recorta a una pantalla y la impresión sale como una "captura" de 1 página */
  .print-preview{position:static!important;inset:auto!important;height:auto!important;overflow:visible!important}
  .print-content{max-width:none!important;margin:0!important;padding:0!important}
  html,body{height:auto!important;overflow:visible!important;background:#fff!important}
  /* no partir filas ni el dibujo del camión entre páginas */
  .print-content tr,.print-content svg,.print-content img{break-inside:avoid;page-break-inside:avoid}
}
@page{margin:10mm 9mm}
/* ── Hoja de carga impresa · Planta › Pedidos (spec 2026-09-18-imprimir-pedido-planta.md) ──
   Es PAPEL: colores FIJOS aquí, iguales en los dos temas a propósito — con los tokens, el tema
   oscuro pintaría letra clara sobre la hoja blanca de la vista previa. Pensada para la impresora en
   blanco y negro de la nave: nada se distingue SOLO por color (el sello lleva palabra, el «no va» va
   tachado y lo dice, las casillas son casillas). print-color-adjust:exact para que la cabecera y las
   cifras salgan aunque el diálogo de imprimir tenga apagados los «gráficos de fondo».
   UN A4 SIEMPRE (el dueño: «que encaje SÍ o SÍ»): ancho fijo de papel (184 mm) y tres densidades —
   normal, .ip-d1 y .ip-d2— que imprimirPedidoCli elige midiendo (_ipEncajarA4); si ni la más densa
   cabe, zoom en .ip-hoja. Lo grande es lo que pidió: cliente, líneas, palets y kg. Los tamaños por
   encima de la escala (cliente, nº de pedido, cifras) son de papel: se leen desde la carretilla. */
.ip-doc{--ip-tinta:#15233b;--ip-tinta2:#4a5870;--ip-linea:#1d2a40;--ip-suave:#cfd6e0;--ip-fondo:#f2f4f8;
  --ip-indigo:#2d2b8f;--ip-ok:#3B6D11;--ip-esp:#854F0B;--ip-esp-bg:#FAEEDA;--ip-curso:#0C447C;--ip-prob:#A32D2D;
  width:184mm;margin:0 auto;background:#fff;color:var(--ip-tinta);font-family:'DM Sans',Arial,Helvetica,sans-serif;
  font-size:var(--fs-sm);line-height:1.3;break-inside:avoid;page-break-inside:avoid;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.ip-doc *{box-sizing:border-box}
.ip-mono,.ip-num,.ip-fechas b,.ip-cifra b,td.ip-cant,td.ip-pals,.ip-ref,td.ip-kg{font-family:'DM Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.ip-k{font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ip-tinta2)}
/* cabecera: una franja fina, como el membrete de BC — lo importante va debajo */
.ip-cab{display:flex;align-items:center;gap:12px;padding-bottom:6px;margin-bottom:8px;border-bottom:2px solid var(--ip-linea)}
.ip-logo{height:34px;width:auto;display:block}
.ip-emp{flex:1;min-width:0;font-size:var(--fs-xs);color:var(--ip-tinta2);line-height:1.35}
.ip-emp div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-emp b{color:var(--ip-tinta)}
.ip-sello{border:2.5px solid currentColor;border-radius:6px;padding:3px 9px;font-size:var(--fs-sm);font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ip-sello-ok{color:var(--ip-ok)}
.ip-sello-esp{color:var(--ip-esp)}
.ip-sello-curso{color:var(--ip-curso)}
/* el cliente, lo primero que se lee; el pedido al lado, en la banda de la marca */
.ip-hero{display:flex;gap:10px;margin-bottom:8px;align-items:stretch}
.ip-hero-cli{flex:1;min-width:0;border:2px solid var(--ip-linea);border-radius:10px;padding:8px 14px}
.ip-cli{font-size:30px;font-weight:800;line-height:1.1;overflow-wrap:anywhere}
.ip-sub{margin-top:3px;font-size:var(--fs-sm);color:var(--ip-tinta2)}
.ip-hero-ped{background:var(--ip-indigo);color:#fff;border-radius:10px;padding:8px 14px;display:flex;flex-direction:column;justify-content:center}
.ip-hero-ped .ip-k{color:#fff;opacity:.85}
.ip-num{font-size:30px;font-weight:600;line-height:1.1;white-space:nowrap}
.ip-fechas{font-size:var(--fs-sm);white-space:nowrap;margin-top:2px}
.ip-fechas b{font-weight:600}
/* palets y kg: las dos cifras que se miran desde lejos */
.ip-cifras{display:flex;gap:10px;margin-bottom:8px}
.ip-cifra{flex:1;border:2px solid var(--ip-linea);border-radius:10px;padding:6px 14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.ip-cifra b{font-size:40px;font-weight:600;line-height:1.05}
.ip-cifra span{font-size:var(--fs-md);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ip-cifra small{flex-basis:100%;font-size:var(--fs-xs);font-weight:700;margin-top:-2px}
.ip-cifra-fuerte{flex:1.4;background:var(--ip-tinta);border-color:var(--ip-tinta);color:#fff}
.ip-banda-txt{border:1.5px solid var(--ip-linea);border-radius:8px;padding:5px 12px;margin-bottom:6px;font-size:var(--fs-md);line-height:1.35}
.ip-banda-txt .ip-k{margin-right:6px}
.ip-entrega{display:inline-block;border:2px solid var(--ip-esp);background:var(--ip-esp-bg);color:var(--ip-esp);border-radius:6px;padding:0 6px;font-weight:800}
.ip-nota{border-width:2.5px;border-left-width:8px;background:var(--ip-fondo);font-weight:800}
/* las líneas: lo que se carga, en el orden del pedido de BC */
.ip-tabla{width:100%;border-collapse:collapse;margin:4px 0 8px}
.ip-tabla th{background:var(--ip-tinta);color:#fff;font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:5px 6px}
.ip-tabla td{border-bottom:1px solid var(--ip-suave);padding:6px 6px;vertical-align:middle}
.ip-tabla tr{break-inside:avoid;page-break-inside:avoid}
.ip-tabla .ip-chk{width:60px;text-align:center}
.ip-tabla .ip-cant{width:82px;text-align:right}
.ip-tabla .ip-pals{width:66px;text-align:right}
.ip-tabla .ip-kg{width:92px;text-align:right}
.ip-tabla td.ip-cant,.ip-tabla td.ip-pals{font-size:24px;font-weight:700;white-space:nowrap;line-height:1.05}
.ip-tabla td.ip-pals small{font-family:'DM Sans',Arial,sans-serif;font-size:var(--fs-xs);font-weight:700;color:var(--ip-tinta2)}
.ip-tabla td.ip-kg{font-size:var(--fs-lg);font-weight:600;white-space:nowrap}
.ip-tabla td.ip-art{padding-left:12px}
.ip-box{display:inline-block;width:22px;height:22px;border:2.5px solid var(--ip-tinta);border-radius:4px;background:#fff;vertical-align:middle}
.ip-desc{font-size:var(--fs-lg);font-weight:700}
.ip-ref{font-size:var(--fs-xs);color:var(--ip-tinta2);margin-left:8px;white-space:nowrap}
.ip-nota-lin{font-size:var(--fs-xs);font-weight:700;color:var(--ip-curso);margin-top:1px}
.ip-com td{padding:7px 6px 3px;border-bottom:2px solid var(--ip-linea)}
.ip-com-t{font-size:var(--fs-md);font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-left:6px solid var(--ip-tinta);padding-left:8px}
.ip-nova td.ip-cant,.ip-nova td.ip-pals,.ip-nova .ip-desc,.ip-nova td.ip-kg{text-decoration:line-through;color:var(--ip-tinta2)}
.ip-nova .ip-nota-lin{color:var(--ip-prob)}
.ip-pal td{color:var(--ip-tinta2)}
.ip-pal td.ip-cant{font-size:var(--fs-lg);font-weight:600}
.ip-pal .ip-desc{font-size:var(--fs-sm);font-weight:600}
.ip-pal .ip-nota-lin{color:var(--ip-tinta2);font-weight:600}
.ip-vacio{text-align:center;color:var(--ip-tinta2);font-style:italic}
.ip-tabla .ip-total td{border-top:2.5px solid var(--ip-tinta);border-bottom:none;font-weight:800;font-size:var(--fs-md);padding-top:6px}
.ip-tabla .ip-total td.ip-pals{font-size:24px}
.ip-tabla .ip-total td.ip-kg{font-size:var(--fs-xl);font-weight:700}
/* para escribir a mano: quién preparó, quién cargó, y los palets de abono que devuelve un cliente */
.ip-firmas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.ip-firmas div{border:1.5px solid var(--ip-linea);border-radius:8px;height:62px;padding:5px 9px}
.ip-firmas span{font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ip-tinta2)}
.ip-pie{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:var(--fs-xs);color:var(--ip-tinta2)}
/* densidad 0: pedido corto — todo más grande, que sobra papel y se lee desde la carretilla */
.ip-d0 .ip-cli,.ip-d0 .ip-num{font-size:36px}
.ip-d0 .ip-cifra b{font-size:52px}
.ip-d0 .ip-cifra span{font-size:var(--fs-xl)}
.ip-d0 .ip-banda-txt{font-size:var(--fs-lg)}
.ip-d0 .ip-tabla th{font-size:var(--fs-sm);padding:7px 6px}
.ip-d0 .ip-tabla td{padding:11px 6px}
.ip-d0 .ip-tabla td.ip-cant,.ip-d0 .ip-tabla td.ip-pals,.ip-d0 .ip-tabla .ip-total td.ip-pals{font-size:32px}
.ip-d0 .ip-tabla td.ip-kg,.ip-d0 .ip-desc{font-size:var(--fs-xl)}
.ip-d0 .ip-com-t{font-size:var(--fs-lg)}
.ip-d0 .ip-tabla .ip-total td{font-size:var(--fs-lg)}
.ip-d0 .ip-tabla .ip-total td.ip-kg{font-size:var(--fs-2xl)}
.ip-d0 .ip-box{width:28px;height:28px}
.ip-d0 .ip-firmas div{height:76px}
/* densidad 1 y 2: el pedido tiene muchas líneas — letra y filas más apretadas, lo grande sigue grande */
.ip-d1 .ip-cli,.ip-d1 .ip-num{font-size:26px}
.ip-d1 .ip-cifra b{font-size:34px}
.ip-d1 .ip-tabla td{padding:3px 6px}
.ip-d1 .ip-tabla td.ip-cant,.ip-d1 .ip-tabla td.ip-pals,.ip-d1 .ip-tabla .ip-total td.ip-pals{font-size:var(--fs-xl)}
.ip-d1 .ip-tabla td.ip-kg,.ip-d1 .ip-desc{font-size:var(--fs-md)}
.ip-d1 .ip-box{width:18px;height:18px}
.ip-d1 .ip-firmas div{height:52px}
.ip-d2 .ip-cab{margin-bottom:5px;padding-bottom:4px}
.ip-d2 .ip-logo{height:28px}
.ip-d2 .ip-hero,.ip-d2 .ip-cifras{margin-bottom:5px}
.ip-d2 .ip-cli,.ip-d2 .ip-num{font-size:var(--fs-2xl)}
.ip-d2 .ip-cifra b{font-size:var(--fs-3xl)}
.ip-d2 .ip-banda-txt{padding:3px 10px;margin-bottom:4px;font-size:var(--fs-sm)}
.ip-d2 .ip-tabla td{padding:1px 6px}
.ip-d2 .ip-com td{padding:4px 6px 1px}
.ip-d2 .ip-tabla td.ip-cant,.ip-d2 .ip-tabla td.ip-pals,.ip-d2 .ip-tabla .ip-total td.ip-pals{font-size:var(--fs-lg)}
.ip-d2 .ip-tabla td.ip-kg,.ip-d2 .ip-desc,.ip-d2 .ip-com-t{font-size:var(--fs-sm)}
.ip-d2 .ip-box{width:15px;height:15px;border-width:2px}
.ip-d2 .ip-firmas div{height:46px}
/* «Notas para el carretillero» (adenda 2): escritas a mano en la app, entre la tabla y las firmas;
   sin nota, renglones para el bolígrafo */
.ip-notas{border:2.5px solid var(--ip-tinta);border-radius:8px;padding:4px 12px 8px;margin:2px 0 6px}
.ip-notas-t{font-size:var(--fs-lg);font-weight:800;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}
.ip-renglon{height:9mm;border-bottom:1.5px dashed var(--ip-suave)}
.ip-d0 .ip-notas-t{font-size:var(--fs-xl)}
.ip-d2 .ip-notas-t{font-size:var(--fs-md)}
.ip-d2 .ip-renglon{height:7mm}
/* el recuadro para ESCRIBIRLA, encima de la hoja y solo en pantalla (.no-print lo quita al imprimir).
   Colores fijos como el papel: la vista previa es blanca también en tema oscuro. 17 px en el
   textarea: con menos, el iPad hace zoom al tocarlo. */
.ip-editor{width:184mm;max-width:100%;margin:0 auto 14px;border:2px solid #2d2b8f;border-radius:10px;padding:10px 12px;background:#EBEAFA;color:#15233b;font-family:'DM Sans',Arial,sans-serif;box-sizing:border-box}
.ip-editor-tit{display:block;font-size:var(--fs-sm);font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.ip-editor-tit small{font-weight:600;text-transform:none;letter-spacing:0;color:#4a5870;margin-left:6px}
.ip-editor textarea{display:block;width:100%;min-height:84px;box-sizing:border-box;border:1.5px solid #4a5870;border-radius:8px;padding:10px 12px;font-family:inherit;font-size:var(--fs-lg);font-weight:700;color:#15233b;background:#fff;resize:vertical}
.ip-editor textarea:focus{outline:3px solid rgba(45,43,143,.35);outline-offset:1px}
.ip-editor-est{min-height:18px;margin-top:4px;font-size:var(--fs-xs);font-weight:700;color:#3B6D11}
.ip-editor-est.mal{color:#A32D2D}
/* el calco que se mide fuera de la pantalla para elegir densidad (_ipEncajarA4) */
.ip-medida{position:fixed;left:-10000px;top:0;visibility:hidden;pointer-events:none}
/* la tablet con letra «grande»/«xl» agranda el body entero con zoom: en papel eso desborda el A4 —
   la hoja lo deshace SOLO al imprimir (en pantalla, que se lea grande) */
@media print{
  html[data-fuente="grande"] .ip-doc{zoom:.8696}
  html[data-fuente="xl"] .ip-doc{zoom:.7692}
}
/* vista previa en el MÓVIL (solo pantalla: al imprimir manda el A4 de arriba): la hoja se recoloca
   en una columna en vez de salirse de ancho — solo dentro de .print-content, así el calco que se
   mide para el A4 no se entera */
@media screen and (max-width:640px){
  .print-content .ip-doc{width:auto}
  .print-content .ip-hoja{width:auto!important;zoom:1!important}
  .print-content .ip-cab,.print-content .ip-hero,.print-content .ip-cifras{flex-wrap:wrap}
  .print-content .ip-cli,.print-content .ip-num{font-size:var(--fs-2xl)}
  .print-content .ip-cifra b{font-size:var(--fs-2xl)}
  .print-content .ip-tabla .ip-chk{display:none}
  .print-content .ip-tabla .ip-cant,.print-content .ip-tabla .ip-pals{width:46px}
  .print-content .ip-tabla .ip-kg{width:56px}
  .print-content .ip-tabla th{letter-spacing:0;padding:5px 3px}
  .print-content .ip-tabla td{padding:5px 3px}
  .print-content .ip-tabla td.ip-cant,.print-content .ip-tabla td.ip-pals{font-size:var(--fs-lg)}
  .print-content .ip-tabla td.ip-kg,.print-content .ip-desc{font-size:var(--fs-sm)}
  .print-content .ip-firmas{grid-template-columns:1fr 1fr}
}
/* la nota en la tarjeta del pedido de Planta (pantalla: tokens de los dos temas) */
.pl-nota-carga{display:flex;gap:10px;align-items:flex-start;background:var(--c-esp-bg);border:1px solid var(--c-esp-ln);border-left:5px solid var(--c-esp-fg);border-radius:var(--rd-sm);padding:10px 12px;margin:0 0 10px;color:var(--text)}
.pl-nota-carga>i{font-size:var(--fs-xl);color:var(--c-esp-fg);flex:0 0 auto}
.pl-nota-carga-k{font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c-esp-fg)}
.pl-nota-carga-k span{font-weight:600;text-transform:none;letter-spacing:0;color:var(--text2)}
.pl-nota-carga-t{font-size:var(--fs-md);font-weight:700;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}
/* la nota de oficina (descripción del trabajo de BC): del tamaño de una línea del pedido o más —
   el dueño la quiere «bien grande» —, con el color de BC para que se lea como comentario y no
   como material */
.pl-nota-of{display:flex;gap:12px;align-items:flex-start;background:var(--c-bc-bg);border:1px solid var(--c-bc-ln);border-left:5px solid var(--c-bc-fg);border-radius:var(--rd-sm);padding:12px 14px;margin:0 0 10px;color:var(--text)}
.pl-nota-of>i{font-size:var(--fs-2xl);color:var(--c-bc-fg);flex:0 0 auto;line-height:1}
.pl-nota-of-k{font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c-bc-fg)}
.pl-nota-of-t{font-size:var(--fs-xl);font-weight:800;line-height:1.3;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}
/* escribirla desde la tarjeta (adenda 3): 17 px, que el iPad no haga zoom al tocar el recuadro */
.ncar-txt{display:block;width:100%;min-height:120px;box-sizing:border-box;margin:10px 0;padding:10px 12px;border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text);font-family:inherit;font-size:var(--fs-lg);font-weight:600;resize:vertical}
/* PDF PRINT */
@media print{
  body{background:#fff}
  .topbar,.tabs-bar,.statusbar,.overlay,.tb-right,.cc-pdf-btn,.cc-acts,.pc-acts,.mini-acts,.new-carga-btn,.cc-selects,.panel,.cargas-hdr select,.btn-primary,.btn-sec,.btn-del{display:none!important}
  .view{display:block!important}
  #view-plan .plan-body{display:block}
  .pdf-doc{display:block!important}
  .no-print{display:none!important}
}
.pdf-doc{display:none}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  /* tablet (p. ej. la de la campa en vertical): la planificación apila las dos columnas */
  .plan-body{grid-template-columns:1fr}
  .plan-body>*{min-width:0}   /* evita que los hijos del grid desborden a lo ancho */
}
@media(max-width:680px){
  .plan-body{grid-template-columns:1fr}
  .dash-kpis{grid-template-columns:1fr 1fr}
  .dash-grid2{grid-template-columns:1fr}
  .container{padding:14px 14px}
  .topbar{padding:0 12px}
}
@media(max-width:480px){
  /* móvil: menos relleno, KPIs en una columna, pestañas algo más compactas */
  .container{padding:10px}
  .dash-kpis{grid-template-columns:1fr}
  .tab{padding:11px 10px;font-size:12.5px}
  .csub{padding:9px 11px}
  .topbar{padding:0 8px;overflow-x:auto}   /* la barra superior se desliza en vez de empujar toda la página */
  body{overflow-x:hidden}                   /* sin scroll horizontal de página en móvil */
}


/* El arrastre del HUB de portes (v221): la fila en la mano se atenúa y el día que puede
   recibirla se ilumina en ámbar — el idioma de "aquí puedes soltar" sin una palabra. */
.hub-arrastrando{opacity:.45}
.hub-drop-ok{outline:2px dashed #E0B43C;outline-offset:2px;border-radius:12px;background:#FFFBF0}

/* ── P8 · menú «⋯» compartido de las filas de pedido (v232): agrupa ubicación en campa,
   eliminar y el urgente cuando no es la acción primaria de esa fila. Popover simple sin
   dependencias — lo posiciona _menuFila() en JS pegado al botón que lo abrió. */
.prow-dots{background:none;border:none;cursor:pointer;color:var(--text3);padding:6px;font-size:16px;line-height:1;border-radius:6px;transition:color .12s,background .12s}
.prow-dots:hover{background:var(--surface3);color:var(--text)}
.menu-fila{position:fixed;z-index:10200;min-width:180px;max-width:240px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:var(--shadow-lg);padding:4px}
.menu-fila button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:10px;min-height:40px;font-size:12.5px;font-weight:600;border-radius:7px;color:var(--text);font-family:inherit}
.menu-fila button:hover{background:var(--surface2)}
.menu-fila button.peligro{color:#c0392b}

/* ── P12 · dos plantillas de diálogo (v232): antes cada overlay creado por JS repetía su
   cssText a mano. Migración mecánica de los que casan limpio con uno de estos dos patrones
   (el resto sigue con su cssText en línea — ver informe de la tanda). ────────────────────── */
/* hoja inferior: el patrón del cobro del HUB (#hcb-ov) — overlay oscuro + panel que sube desde abajo */
.dlg-hoja{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center}
/* Importar de BC (23-sep-2026, spec 2026-09-23-maestros-transportistas.md): la tabla de camiones de
   cada empresa no se aprieta en un móvil (las columnas se pegaban: «4455BCD—», «820018.000») — se
   queda con su ancho y se desliza de lado dentro de su tarjeta, que ya lleva overflow-x:auto */
.impbc-tabla{width:100%;min-width:600px;border-collapse:collapse;font-size:var(--fs-sm)}
.impbc-tabla th,.impbc-tabla td{padding:3px 12px 3px 0;white-space:nowrap}
.impbc-tabla td[colspan]{white-space:normal}
/* ventana centrada: el patrón de la ficha del pedido (#pedido-detalle-ov) — la propia hoja hace scroll */
.dlg-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:30px 16px}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   MODO PLANTA (v305) — panel de entrada para la tablet de producción.
   CSS adaptado de specs/2026-08-19-modo-planta-maqueta.html a los tokens de aquí arriba
   (mismos --blue/--green/--amber/--red, --surface, --radius, --shadow de siempre: ni un color
   nuevo). Prefijo pl- para las piezas propias del panel; acc- para la hoja de acciones de una
   tolva (la comparten Planta y la tira de tolvas de Producir); tk- para el teclado numérico.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* «Qué llega — y a dónde va»: la franja más importante del panel (palabras del dueño) */
/* decisión 10 (19-ago, tarde): el selector sacos/big bag va arriba del panel — cada carril
   enseña SUS tolvas; reutiliza el estilo de las pestañas de Producir (.pl-prodtab). A su
   izquierda, el botón «Salir» del modo pantalla completa. */
.pl-top{display:flex;gap:10px;margin-bottom:14px;align-items:stretch}
.pl-salir{flex:none;min-width:104px;border-radius:var(--radius);border:2px solid var(--border2);background:var(--surface);
  font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;cursor:pointer;font-family:inherit;color:var(--text)}
.pl-carril{display:flex;gap:10px;flex:1}
/* G4 (tanda de arreglo v310): botón de ayuda de Planta, junto al carril — la única pantalla
   pensada para los menos duchos con el móvil no podía ser la única sin manual. Mismo look que
   .pl-salir (borde 2px, fondo surface) pero cuadrado, para no competir con el carril por ancho. */
.pl-ayuda{flex:none;width:44px;min-height:44px;border-radius:var(--radius);border:2px solid var(--border2);background:var(--surface);
  font-size:19px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;color:var(--text2)}
.pl-llega{margin-bottom:16px}
.pl-llega-tit{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;color:var(--text2);text-transform:uppercase;margin:2px 2px 8px}
.pl-llega-band{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.pl-llega-card{flex:none;min-width:252px;max-width:300px;text-align:left;background:var(--surface);border:1px solid var(--border);
  border-left:5px solid var(--c-curso-fg);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:12px 15px;cursor:pointer;font-family:inherit}
@media (hover:hover){ .pl-llega-card:hover{box-shadow:var(--shadow)} }   /* Tanda 2 D6: sin ratón no hay hover (en la tablet se quedaba «levantada» tras tocar) */
.pl-llega-card.pl-llega-compra{border-left-color:var(--c-esp-fg)}
.pl-llega-card.pl-llega-espera{border-left-color:var(--c-prob-fg);background:var(--c-prob-bg)}
/* arrastrar a una tolva vacía (spec 2026-08-24-llega-hoy-ayer-arrastrar-tolva-tn-albaran.md):
   solo las tarjetas con data-llega-tipo aceptan el gesto — la de "Nuestro camión" no lo lleva */
.pl-llega-card[data-llega-tipo]{cursor:grab}
.pl-ll-top{font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;color:var(--text3);text-transform:uppercase}
.pl-ll-mat{font-size:var(--fs-lg);font-weight:700;margin-top:3px;color:var(--text)}
.pl-ll-dest{font-size:var(--fs-sm);font-weight:700;color:var(--blue-d);margin-top:3px}
.pl-ll-dest-red{color:#791F1F}
[data-theme="dark"] .pl-ll-dest-red{color:#f0a59d}
.pl-ll-meta{font-size:var(--fs-xs);color:var(--text2);margin-top:2px}
/* spec 2026-09-04-planta-compra-para-quien: la nota de Compras y el botón «Para quién ›» en la
   tarjeta; el botón frena su pointerdown para no disparar el toque/arrastre de la tarjeta */
.pl-ll-nota{font-size:var(--fs-sm);color:var(--text);background:var(--c-esp-bg);border-radius:var(--radius-sm);padding:5px 8px;margin-top:6px;white-space:pre-line}
.pl-ll-quien{margin-top:8px;min-height:36px;width:100%;cursor:pointer}
.pl-llega-vacia{font-size:var(--fs-sm);color:var(--text3);background:var(--surface2);border:1.5px dashed var(--border2);border-radius:var(--radius);padding:13px 15px}

/* rejilla de tolvas + carril de botonazos.
   Revisión del dueño (22-ago): «no hay más tolvas y ahí queda un hueco». La rejilla fija de
   3 columnas dejaba una celda muerta en SACOS (5 tolvas) y dos en BIG BAG (4), y el carril
   se quedaba a media altura con media pantalla en blanco debajo. Ahora la fila incompleta la
   reparten las propias tolvas (crecen hasta llenarla) y el carril se estira hasta abajo: sin
   huecos y todo más grande, que esta pantalla se mira de lejos y se toca con guantes. */
.pl-main{display:flex;gap:16px;align-items:stretch}
.pl-tolvas-zona{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pl-grid{display:flex;flex-wrap:wrap;align-content:stretch;gap:14px;flex:1}
.pl-tolva{flex:1 1 30%}
/* 4 tolvas (BIG BAG) con base del 30% caían 3 arriba y una sola abajo ocupando todo el ancho:
   con base del 44% caen 2 y 2, cuadradas y del mismo tamaño. */
.pl-grid[data-n="4"]>.pl-tolva{flex-basis:44%}
.pl-leyenda{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text3);padding:10px 2px 0}
.pl-leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.pl-leyenda-hint{margin-left:auto}

.pl-tolva{background:var(--surface);border:1px solid var(--border2);border-left:6px solid var(--border2);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;padding:14px 16px 14px 18px;text-align:left;min-height:170px;cursor:pointer;font-family:inherit;color:inherit}
@media (hover:hover){ .pl-tolva:hover{box-shadow:var(--shadow)} }   /* Tanda 2 D6: sin ratón no hay hover (en la tablet se quedaba «levantada» tras tocar) */
.pl-tolva.pl-vaciando{border:2px solid var(--c-prob-fg);border-left-width:6px;box-shadow:0 0 0 3px rgba(163,45,45,.14)}
/* el rótulo manda en la tarjeta y el estado se va al otro extremo: de un vistazo, «qué
   tolva» a la izquierda y «cómo anda» a la derecha, sin que se toquen ni compitan */
.pl-t-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
/* v326 (el dueño, mirándolo): «más grandes y de color, ahora que cabe». Índigo de marca, que
   en este sistema es el color de cabeceras — nunca uno de los de estado, que aquí significan
   cómo está la tolva y ya los llevan el dibujo, la pastilla y la barra de la izquierda. */
/* margin-right:auto en el rótulo (y NO margin-left en la pastilla: ahí un :first-of-type casa
   con el propio rótulo, que también es un span — probado y falla) */
.pl-t-nom{font-size:var(--fs-3xl);font-weight:800;letter-spacing:.02em;line-height:1.05;color:var(--c-estr-fg);text-transform:uppercase;margin-right:auto}
.pl-badge{font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:var(--radius-pill)}
.pl-t-head .pl-badge{font-size:var(--fs-sm);padding:5px 12px}
.pl-b-baja{background:var(--blue-l);color:var(--blue-d)}
.pl-b-normal{background:var(--green-l);color:var(--green)}
.pl-b-alta{background:var(--amber-l);color:var(--amber)}
.pl-b-vacia{background:var(--badge-gray-bg);color:var(--badge-gray-t)}
.pl-b-vaciando{background:var(--c-prob-fg);color:#fff}
.pl-t-body{flex:1;display:flex;gap:14px;align-items:center;margin-top:8px}
/* el dibujo vuelve a su tamaño natural (104px, el que trae el SVG): estaba encogido a 78 para
   caber en tres columnas apretadas, y el % de dentro era lo primero que se dejaba de leer.
   El tope por altura (16vh) es para las tablets bajitas de 720p: allí el dibujo a tamaño
   natural hacía que el panel ya no cupiera entero y aparecía una tira de scroll. */
.pl-t-body svg{flex:none;width:auto;height:auto;max-width:104px;max-height:min(138px,16vh);align-self:center}
.pl-t-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.pl-t-mat{font-size:var(--fs-xl);font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.pl-t-mat.pl-vacia{color:var(--text3);font-weight:500}
/* los kg son cifra: DM Mono con tabular-nums, para que las columnas de tolvas cuadren */
.pl-t-kg{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.01em;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.pl-t-kg small{font-size:var(--fs-sm);color:var(--text2);font-weight:500}
.pl-t-cap{font-size:var(--fs-sm);color:var(--text2)}
.pl-t-dem{font-size:var(--fs-sm);font-weight:700;color:var(--c-esp-fg);background:var(--c-esp-bg);border-radius:var(--radius-sm);padding:4px 9px;margin-top:5px;width:fit-content}
.pl-t-dem.pl-t-dem-ok{color:var(--c-curso-fg);background:var(--c-curso-bg);font-weight:600}

/* el carril reparte TODA la altura de la zona de tolvas entre sus botonazos (flex:1) — antes
   se quedaban de 88px arriba del todo y debajo no había nada */
.pl-rail{flex:none;width:250px;display:flex;flex-direction:column;gap:14px}
.pl-nav-btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;flex:1 1 0;
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:18px 20px;text-align:left;min-height:104px;cursor:pointer;font-family:inherit;color:inherit}
@media (hover:hover){ .pl-nav-btn:hover{box-shadow:var(--shadow)} }   /* Tanda 2 D6: sin ratón no hay hover (en la tablet se quedaba «levantada» tras tocar) */
.pl-nav-btn i{font-size:30px;color:var(--c-estr-fg)}
.pl-nav-lbl{font-size:var(--fs-xl);font-weight:800}
.pl-nav-cnt{font-size:var(--fs-sm);color:var(--text2);font-weight:600;line-height:1.35}
.pl-nav-cnt b{color:var(--c-prob-fg)}

/* el panel llena la pantalla de la tablet: sin esto sobraba media pantalla en blanco debajo
   y las tarjetas se apelotonaban arriba. Solo el panel (.pl-es-panel) — las pantallas espejo
   de dentro (Pedidos, Producción, Camión, Compras) siguen siendo scroll normal. */
/* 100vh justos: en Planta la barra de estado ya no está (regla de arriba), así que el panel
   se queda con la pantalla entera y no hay nada debajo que empuje una tira de scroll */
html[data-en-planta] #view-planta>.container{max-width:1560px;min-height:100vh;display:flex;flex-direction:column}
html[data-en-planta] #planta-content{flex:1}
#planta-content.pl-es-panel{display:flex;flex-direction:column}
.pl-es-panel .pl-main{flex:1;min-height:0}

@media(max-width:1080px){
  .pl-main{flex-direction:column}
  .pl-rail{width:100%;flex-direction:row;flex-wrap:wrap}
  .pl-nav-btn{flex:1 1 220px}
  /* apilado (el carril baja debajo de las tolvas) el panel NO se estira a pantalla completa:
     estirarlo solo serviría para empujar los botonazos fuera de la vista */
  html[data-en-planta] #view-planta>.container{min-height:0}
  .pl-es-panel .pl-main{flex:none}
}
/* 1000px, no 760: por debajo de ahí tres tolvas por fila dejan la columna de texto en 92px y
   «Gravilla forna 12-20» se parte en tres líneas — medido en una tablet de 800 de ancho. Con
   dos por fila el texto vuelve a tener 220px y se lee de lejos, que es de lo que va esto. */
@media(max-width:1000px){ .pl-tolva,.pl-grid[data-n="4"]>.pl-tolva{flex-basis:44%} }
@media(max-width:480px){ .pl-tolva,.pl-grid[data-n="4"]>.pl-tolva{flex-basis:100%} }

/* C · Producir: pestañas SACOS | BIG BAG + tira de tolvas del carril */
.pl-prodtabs{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.pl-prodtab{flex:1;min-width:150px;min-height:56px;border-radius:var(--radius);border:2px solid var(--border2);background:var(--surface);
  font-size:15px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:8px 10px;cursor:pointer;font-family:inherit;color:var(--text)}
.pl-prodtab small{font-size:var(--fs-xs);font-weight:600;color:var(--text2)}
.pl-prodtab.on{background:var(--c-estr-fg);border-color:var(--c-estr-fg);color:#fff}
.pl-prodtab.on small{color:#d7e8fa}
.pl-prodtolvas{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:14px}
.pl-mini-tolva{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;text-align:left;
  font-size:11.5px;cursor:pointer;font-family:inherit;color:var(--text)}
.pl-mini-tolva b{display:block;font-size:12.5px;margin-bottom:1px}
.pl-mt-mat{display:block;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-mt-bar{display:block;height:7px;border-radius:4px;background:var(--surface3);margin:5px 0 3px;overflow:hidden}
.pl-mt-bar i{display:block;height:100%;border-radius:4px}
.pl-mt-kg{color:var(--text3);font-weight:600}

/* Hoja de acciones de una tolva (Planta + tira de Producir) y «¿a qué tolva la vacías?» de una espera */
.acc-panel{background:var(--bg);width:100%;max-width:440px;border-radius:16px 16px 0 0;padding:18px;font-family:inherit;color:var(--text);
  max-height:92vh;overflow-y:auto;overscroll-behavior:contain}   /* Tanda 2 D7: «Cambiar pedido» con muchas líneas se salía de la pantalla */
.acc-asa{width:48px;height:5px;border-radius:3px;background:var(--border2);margin:0 auto 14px}
.acc-sub{font-size:12.5px;color:var(--text2);margin:2px 0 14px}
.acc-lista{display:flex;flex-direction:column;gap:8px}
.acc-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface2);border:2px solid var(--border2);
  border-radius:var(--radius);padding:13px 15px;min-height:56px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--text)}
.acc-btn i{font-size:19px;color:var(--c-estr-fg)}
.acc-txt{display:flex;flex-direction:column;gap:1px}
.acc-btn small{display:block;font-weight:500;font-size:11.5px;color:var(--text2);margin-top:1px}
.acc-btn.destacado{background:var(--c-estr-bg);border-color:var(--c-estr-fg)}
.acc-btn.peligro{background:var(--red-l);border-color:var(--red);color:#791F1F}
.acc-btn.peligro i{color:#791F1F}
[data-theme="dark"] .acc-btn.peligro{color:#f0a59d}
.acc-cerrar{width:100%;margin-top:14px;min-height:var(--tap-planta);border-radius:var(--radius);background:var(--surface2);border:1px solid var(--border);
  font-size:13.5px;font-weight:700;color:var(--text2);cursor:pointer;font-family:inherit}
.pl-grid-botones{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pl-grid-botones .acc-btn{justify-content:center;text-align:center;flex-direction:column;gap:2px}
@media(max-width:480px){ .pl-grid-botones{grid-template-columns:1fr 1fr} }

/* v312 (decisión 13 del dueño): espejos de Producción y Compras DENTRO de Planta — mismo
   lenguaje visual que el panel, contrato de specs/2026-08-19-modo-planta-maqueta.html (bandas
   verde/roja, tarjetas grandes, botones ≥52px). CERO lógica nueva: esto es solo pintura sobre
   las MISMAS acciones de siempre. */
.pl-espejo-hdr{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.pl-espejo-hdr h2{font-size:var(--fs-xl);font-weight:800;margin:0;color:var(--text)}
.pl-espejo-meta{font-size:12.5px;color:var(--text2)}
/* botón «‹ Panel» de cada espejo: MISMO estilo que «Salir» del panel (.pl-salir) — se reutiliza
   la clase tal cual en el HTML, esto solo cubre el caso de que alguna vez lleve texto más largo */
.pl-cajon-tit{font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--text3);text-transform:uppercase;margin:18px 2px 8px}
.pl-cajon-tit:first-child{margin-top:2px}
.pl-btn{min-height:var(--tap-planta);font-size:var(--fs-md);padding:12px 20px;border-radius:var(--rd)}
/* el ÚNICO botón principal de una tarjeta (skill diseno-cargas): SIEMPRE índigo estructural,
   nunca el verde de «hecho» — el verde es para DECIR que algo ya está, no para pulsarlo. */
.pl-btn-cta{background:var(--c-estr-fg)}
.pl-banda-verde,.pl-banda-roja{display:flex;align-items:center;gap:10px;border-radius:var(--rd);padding:10px 14px;font-weight:800;font-size:var(--fs-md);margin:16px 0 10px}
.pl-banda-verde{background:var(--c-ok-bg);color:var(--c-ok-fg);border-left:5px solid var(--c-ok-fg)}
.pl-banda-roja{background:var(--c-prob-bg);color:var(--c-prob-fg);border-left:5px solid var(--c-prob-fg)}
.pl-grupo-tit{font-size:var(--fs-md);font-weight:800;margin:14px 2px 8px}
.pl-grupo-tit small{font-weight:600;color:var(--text2);font-size:var(--fs-xs)}
/* .pl-tarea/.pl-fila: tarjeta grande de Planta (contrato v312 + skill diseno-cargas) — 1px de
   línea, sin sombra de flotar (--sh, casi imperceptible: es tarjeta, no diálogo), y el estado
   SIEMPRE en la barra de la izquierda de quien la use (.pl-banda-verde/roja, .pl-fila-espera…),
   nunca solo en una palabra. */
.pl-tarea{background:var(--surface);border:1px solid var(--border);border-radius:var(--rd);box-shadow:var(--sh);
  padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* resalte al llegar desde "Ver cambio" del aviso de BC (spec 2026-08-24-aviso-bc-en-planta.md):
   el "acceso directo" no vale de nada si la tarjeta se pierde entre las demás nada más llegar */
@keyframes pl-flash{0%,100%{box-shadow:var(--sh)}20%,60%{box-shadow:0 0 0 3px var(--c-esp-fg)}}
.pl-flash{animation:pl-flash 2.2s ease-in-out}
.pl-tarea-q{font-size:var(--fs-lg);font-weight:800;white-space:nowrap}
/* .pl-tarea-q hace doble uso (cifra en Producción/Pedidos, nombre de material en Compras) — el
   modo cifra (DM Mono + tabular-nums) se pone aparte, solo donde de verdad hay un número */
.pl-tarea-q.pl-cifra{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.pl-tarea-cli{font-size:var(--fs-md);color:var(--text2);flex:1;min-width:140px}
.pl-tarea-acc{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
/* ── HISTORIAL, HECHO BIEN (24-sep-2026, spec 2026-09-24-planta-historial-bonito.md) ── piezas
   .hst-* (estilo de Planta, las pl- y tb- de siempre: EL PANEL DE PLANTA NO SE MIGRA al kit «ds»);
   OJO: nunca «asterisco-barra» dentro de este comentario (cerraría el comentario ahí mismo y el
   resto del texto se tragaría la primera regla de abajo — pasó con .hst-barra al revisar).
   sustituyen a las clases del historial viejo de la v534 (sin uso en ningún otro sitio, grep hecho). */
.hst-barra{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin-bottom:14px}
.hst-buscar{position:relative;flex:1 1 240px;min-width:200px}
.hst-buscar>.ti-search{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text3)}
.hst-buscar input{width:100%;box-sizing:border-box;min-height:var(--tap-planta);font-size:var(--fs-md);
  padding:10px 14px 10px 40px;border:1px solid var(--border2);border-radius:var(--rd-sm);
  background:var(--surface);color:var(--text);font-family:inherit}
.hst-per{display:flex;flex:0 0 auto;border:1px solid var(--border2);border-radius:var(--rd-sm);overflow:hidden}
.hst-per button{min-height:var(--tap);min-width:44px;padding:8px 14px;border:0;border-left:1px solid var(--border2);
  background:var(--surface);color:var(--text2);font-size:var(--fs-sm);font-weight:700;cursor:pointer;font-family:inherit}
.hst-per button:first-child{border-left:0}
.hst-per button.on{background:var(--c-estr-btn);color:#fff}
/* en columna, el flex-basis de 240px del buscador pasaba a ser su ALTO (hueco enorme con la lupa
   flotando en medio, visto a 390 px): en estrecho se queda a su altura natural */
@media(max-width:640px){ .hst-barra{flex-direction:column} .hst-buscar{flex:0 0 auto;min-width:0} .hst-per{width:100%} .hst-per button{flex:1} }
/* cada día: cabecera pegajosa (se sabe SIEMPRE en qué día estás al bajar por uno largo) */
.hst-dia{margin-bottom:18px}
.hst-dia-cab{position:sticky;top:0;z-index:2;background:var(--bg);display:flex;align-items:center;
  gap:10px;padding:10px 2px;flex-wrap:wrap}
.hst-dia-num{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-2xl);
  font-weight:800;color:var(--c-estr-fg);line-height:1}
.hst-dia-txt{display:flex;flex-direction:column;line-height:1.25}
.hst-dia-txt b{font-size:var(--fs-md)}
.hst-dia-txt span{font-size:var(--fs-sm);color:var(--text2)}
.hst-dia-cab .pl-btn{margin-left:auto}
/* la línea de tiempo: un raíl fino y, por pedido, un tramo con su hora y un punto sobre el raíl */
.hst-fila{display:flex;align-items:stretch;margin-bottom:10px}
.hst-riel{flex:0 0 52px;display:flex;flex-direction:column;align-items:center;position:relative;padding-top:20px}
.hst-riel::before{content:'';position:absolute;left:50%;top:0;bottom:-10px;width:2px;background:var(--border2);transform:translateX(-50%)}
.hst-fila:last-child .hst-riel::before{bottom:50%}
.hst-riel-hora{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-sm);color:var(--text2)}
.hst-riel-punto{width:9px;height:9px;border-radius:50%;background:var(--c-ok-fg);margin-top:5px;position:relative;z-index:1}
.hst-fila>.hst-ped{flex:1;min-width:0}
.hst-ped-hora{display:none}
@media(max-width:640px){ .hst-riel{display:none} .hst-ped-hora{display:flex;align-items:center;gap:5px;
  font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-sm);color:var(--text2);margin-bottom:6px} }
/* la tarjeta del pedido: cerrada de entrada (D2), la barra de la izquierda es SIEMPRE del estado
   (cargado = verde) — el color de pósit del tablón va aparte, de puntito junto al cliente (D6) */
.hst-ped{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--c-ok-fg);
  border-radius:var(--rd)}
.hst-ped-cab{display:flex;flex-direction:column;gap:4px;width:100%;min-height:64px;padding:12px 14px;
  border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer;font-family:inherit}
.hst-ped-l1{display:flex;align-items:center;gap:8px;min-width:0}
.hst-ped-num{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-lg);
  font-weight:700;color:var(--c-bc-fg);flex:0 0 auto}
.hst-ped-cli{font-size:var(--fs-md);font-weight:800;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hst-ped-chev{flex:0 0 auto;margin-left:auto;color:var(--text3);transition:transform .15s}
.hst-ped-cab[aria-expanded="true"] .hst-ped-chev{transform:rotate(180deg)}
.hst-ped-l2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--text2)}
.hst-ped-l2 .hst-mono{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.hst-ped-cuerpo{border-top:1px solid var(--border);padding:12px 14px 14px}
/* «EL PEDIDO» / «ALBARÁN»: el mismo rótulo de sección en los dos sitios */
.hst-sec{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text2);margin-bottom:8px}
/* las líneas del pedido/del albarán: UNA rejilla para TODAS las filas (display:contents en cada
   .hst-lin: sus 4 celdas pasan a ser hijas directas de .hst-lin-grid), para que cantidad/kg
   queden en columna de verdad en vez de que cada fila calcule su propio ancho por su cuenta. */
.hst-lin-grid{display:grid;grid-template-columns:auto auto 1fr auto;gap:0 10px;align-items:baseline;font-size:var(--fs-sm)}
.hst-lin{display:contents}
.hst-lin-cant,.hst-lin-emb,.hst-lin-desc,.hst-lin-kg{padding:4px 0;border-bottom:1px solid var(--border)}
.hst-lin-cant{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
.hst-lin-emb{color:var(--text2);white-space:nowrap}
.hst-lin-desc{min-width:0;overflow-wrap:anywhere}
.hst-lin-kg{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.hst-lin-com{grid-column:1/-1;font-style:italic;color:var(--text2);padding:4px 0;border-bottom:1px solid var(--border)}
.hst-lin-nova .hst-lin-desc,.hst-lin-nova .hst-lin-cant,.hst-lin-nova .hst-lin-kg{text-decoration:line-through;color:var(--text2)}
.hst-lin-palet .hst-lin-cant,.hst-lin-palet .hst-lin-emb,.hst-lin-palet .hst-lin-desc,.hst-lin-palet .hst-lin-kg{color:var(--text2)}
.hst-tot{display:flex;justify-content:flex-end;gap:6px;margin-top:6px;font-family:'DM Mono',monospace;
  font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--fs-sm)}
.hst-nota-of{background:var(--c-bc-bg);color:var(--c-bc-fg);border-radius:var(--rd-sm);padding:8px 12px;
  margin-top:10px;font-size:var(--fs-sm)}
.hst-nota-of b{display:block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
/* cada albarán: un papel dentro del papel — franja fina arriba, como el canto de un albarán de verdad */
.hst-alb{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--rd);
  border-top:4px solid var(--c-bc-fg);padding:12px 14px;margin-top:12px}
.hst-alb-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.hst-alb-num{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-xl);font-weight:800}
.hst-alb-meta{margin-left:auto;font-size:var(--fs-sm);color:var(--text2);text-align:right}
.hst-alb-datos{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-bottom:10px}
.hst-alb-dato-k{font-size:var(--fs-xs);color:var(--text2);display:block}
.hst-alb-dato-v{font-size:var(--fs-sm);font-weight:700}
.hst-alb-dato-v.hst-mono{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
@media(max-width:640px){ .hst-alb-datos{grid-template-columns:1fr} }
.hst-alb-lin{font-size:var(--fs-sm);display:flex;gap:6px;padding:3px 0}
.hst-alb-lin b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;flex:0 0 auto}
.hst-alb-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
@media(max-width:640px){ .hst-alb-acc{flex-direction:column} .hst-alb-acc .pl-btn{width:100%;justify-content:center} }
.hst-alb-nota{font-size:var(--fs-xs);color:var(--text2);margin-top:6px}
.hst-vacio{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:40px 16px;color:var(--text2)}
.hst-vacio>.ti{font-size:var(--fs-3xl);color:var(--text3)}
/* PARTE DEL DÍA (S2.6): el mismo papel que la hoja de carga — .pd-doc hereda las tintas FIJAS de
   .ip-doc (siempre igual en los dos temas), pero puede ocupar VARIAS hojas: se quita el
   break-inside:avoid del documento entero (si no, el navegador lo intentaría meter en una sola
   página) y se deja cortar SOLO entre filas, que .ip-tabla tr ya evita partir. */
.pd-doc{break-inside:auto;page-break-inside:auto}
.pd-cab{margin-bottom:10px}
.pd-marca{font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ip-tinta2)}
.pd-tit{font-size:28px;font-weight:800;line-height:1.15;margin:2px 0}
.pd-sub{font-size:var(--fs-md);color:var(--ip-tinta2)}
.pd-tabla tbody tr:nth-child(even){background:var(--ip-fondo)}
/* anchos FIJOS por columna (revisión de quien firma): con los de la hoja de carga (.ip-tabla, pensados
   para cantidad/descripción/kg) los kg se quedaban medio folio y cliente/transporte se partían en tres
   renglones. Las cifras, en su tamaño de lectura normal: aquí no se leen desde la carretilla. */
.pd-tabla{table-layout:fixed}
.pd-tabla th:nth-child(1){width:9%}
.pd-tabla th:nth-child(2){width:18%}
.pd-tabla th:nth-child(3){width:27%}
.pd-tabla th:nth-child(4){width:26%}
.pd-tabla th:nth-child(5){width:9%}
.pd-tabla th:nth-child(6){width:11%}
.pd-tabla td{font-size:var(--fs-sm);overflow-wrap:break-word}
.pd-tabla td.pd-nw{white-space:nowrap}
.pd-alb{font-size:var(--fs-xs);color:var(--ip-tinta2)}
.pd-tabla td.ip-cant,.pd-tabla td.ip-kg,.pd-tabla .ip-total td.ip-cant,.pd-tabla .ip-total td.ip-kg{font-size:var(--fs-md);font-weight:700}
.pd-nota{font-size:var(--fs-xs);color:var(--ip-tinta2);margin:-2px 0 8px}
/* fila grande y tocable de Compras (en camino / a la espera de tolva) — como .pl-tarea pero
   pensada para ser ella misma el botón (recibir/vaciar de un toque), con acento a la izquierda */
.pl-fila{width:100%;display:flex;align-items:center;gap:14px;text-align:left;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--rd);box-shadow:var(--sh);
  padding:14px 16px;margin-bottom:10px;border-left:6px solid var(--border2);font-family:inherit;color:var(--text);cursor:pointer}
.pl-fila-espera{border-left-color:var(--c-prob-fg)}
.pl-fila-mat{font-size:var(--fs-lg);font-weight:800;flex:1;min-width:150px}
.pl-fila-meta{font-size:var(--fs-xs);color:var(--text2);white-space:nowrap}
/* spec 2026-09-04-planta-compra-para-quien: la fila de recibir lleva al lado su «Para quién»
   (dos botones hermanos, nunca uno dentro de otro) y, debajo, la nota de Compras si la hay */
.pl-fila-con-quien{display:flex;gap:8px;align-items:stretch;margin-bottom:10px}
.pl-fila-con-quien>.pl-fila{flex:1;min-width:0;margin-bottom:0}
.pl-fila-quien{flex:none;min-width:74px;min-height:48px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--fs-xs);font-weight:700}
.pl-fila-nota{font-size:var(--fs-sm);color:var(--text);background:var(--c-esp-bg);border-radius:var(--radius-sm);padding:6px 10px;margin:-4px 0 10px;white-space:pre-line}
/* ── Planta · Tablón de chinchetas (spec 2026-09-11) ── */
.tb-vista{display:inline-flex;border:1px solid var(--border2);border-radius:var(--rd-pill);overflow:hidden;background:var(--surface);margin-left:auto}
.tb-vista button{border:0;background:transparent;color:var(--text2);font-size:var(--fs-xs);font-weight:700;padding:8px 14px;cursor:pointer;min-height:var(--tap)}
.tb-vista button.on{background:var(--c-estr-fg);color:#fff}
.tb-strip{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:2px 2px 8px;font-size:var(--fs-xs);color:var(--text2)}
.tb-strip b{color:var(--text);font-weight:800}
.tb-seg{display:inline-flex;border:1px solid var(--border2);border-radius:var(--rd-pill);overflow:hidden;background:var(--surface)}
.tb-seg button{border:0;background:transparent;color:var(--text2);font-size:var(--fs-xs);font-weight:700;padding:6px 12px;cursor:pointer;min-height:32px}
.tb-seg button.on{background:var(--c-estr-fg);color:#fff}
.tb-board{position:relative;border:6px solid var(--tb-marco);border-radius:12px;padding:14px 12px 18px;min-height:300px;
  background-color:var(--tb-corcho);
  background-image:
    radial-gradient(circle at 21% 33%, var(--tb-corcho-2) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 68% 61%, var(--tb-corcho-3) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 44% 86%, var(--tb-corcho-2) 0 1px, transparent 1.6px),
    radial-gradient(circle at 86% 14%, var(--tb-corcho-3) 0 1.1px, transparent 1.8px);
  background-size:23px 23px, 31px 31px, 17px 17px, 43px 43px;
  box-shadow:inset 0 0 0 1px var(--tb-marco-2), inset 0 3px 10px rgba(0,0,0,.14)}
.tb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(222px,1fr));gap:16px 12px;align-items:start}
.tb-grid.tb-foco{grid-template-columns:minmax(280px,520px);justify-content:center}
.tb-vacio{grid-column:1/-1;text-align:center;color:var(--tb-tinta-2);font-weight:700;padding:70px 20px;font-size:var(--fs-lg)}
.tb-ramal{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:4px}
.tb-ramal::before{content:"";position:absolute;left:50%;top:22px;bottom:8px;width:2px;margin-left:-1px;background:var(--tb-hilo);border-radius:2px;opacity:.95}
.tb-ramal::after{content:"";position:absolute;left:50%;bottom:2px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--tb-hilo)}
.tb-pin{position:relative;z-index:3;width:var(--tap);height:var(--tap);border-radius:50%;border:0;cursor:pointer;color:#fff;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.45), rgba(255,255,255,0) 46%), var(--c-estr-fg);
  box-shadow:0 4px 8px rgba(0,0,0,.35), inset 0 -3px 6px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-lg);font-weight:700;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;transition:transform .12s}
.tb-pin:active{transform:scale(.94)}
.tb-pin.tb-urgente{background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.45), rgba(255,255,255,0) 46%), var(--c-prob-fg)}
/* ARRASTRAR (spec 2026-09-24-planta-tablon-mover-plegar-colores.md, S3.8): sin esto el navegador
   se come el gesto — Android abre su menú al mantener pulsado, y el móvil intenta seleccionar
   texto o desplazar la página con el mismo dedo que está moviendo la chincheta. */
.tb-pin,.tb-tape{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.tb-tape{position:relative;z-index:2;border:0;cursor:pointer;background:var(--tb-tape-bg);color:var(--tb-tape-fg);
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;max-width:100%;line-height:1.25;
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);text-align:center}
.tb-meta{position:relative;z-index:2;font-size:var(--fs-xs);font-weight:700;color:var(--tb-tinta);text-align:center;margin-top:-4px;line-height:1.35;
  background:var(--tb-corcho);padding:0 6px;border-radius:var(--rd-sm)}
.tb-meta .tb-otro{color:var(--tb-tinta-2);font-weight:600}
.tb-meta .tb-otro.ok{color:var(--c-ok-fg)}
.tb-papel{position:relative;z-index:1;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--border2);
  border-radius:var(--rd);box-shadow:var(--sh-papel);padding:9px 11px 8px 11px;cursor:pointer;color:var(--text);transition:transform .12s, box-shadow .12s}
@media (hover:hover){ .tb-papel:hover{transform:translateY(-1px)} }   /* Tanda 2 D6: sin ratón no hay hover (en la tablet se quedaba «levantada» tras tocar) */
.tb-papel::before{content:"";position:absolute;top:-8px;left:50%;width:24px;height:13px;margin-left:-12px;border-radius:3px;z-index:3;
  background:linear-gradient(var(--tb-clip),var(--tb-clip-2));box-shadow:0 1px 1px rgba(0,0,0,.3)}
.tb-papel.tb-empezado{border-left-color:var(--c-curso-fg)}
.tb-papel.tb-listo{border-left-color:var(--c-ok-fg)}
.tb-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:3px}
.tb-top .tb-chip{margin-left:auto}
.tb-fecha{font-size:var(--fs-xs);color:var(--text3);font-weight:500}
/* adenda 1 (11-sep): el papel lista sus artículos — cantidad en mono, nombre en negrita, ✓ en los hechos */
.tb-arts{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.tb-art{display:flex;align-items:baseline;gap:6px;min-width:0}
.tb-art-q{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-md);font-weight:700;flex:0 0 auto;white-space:nowrap}
.tb-art-d{font-size:var(--fs-sm);font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-art.ok .tb-art-q{color:var(--c-ok-fg)}
.tb-art.ok .tb-art-d{color:var(--text2);font-weight:600}
.tb-art-mas{font-size:var(--fs-xs);color:var(--text3);font-weight:600}
/* adenda 2 (11-sep, el dueño): número de pedido y palets/kg en grande, que se lean de lejos en la tablet */
.tb-num{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-lg);font-weight:700;color:var(--c-bc-fg);letter-spacing:-.01em;line-height:1.15}
/* nº de documento externo de BC (spec 2026-10-13-planta-doc-externo.md, el dueño: «debajo del numero de
   pedido nuestro, en pequeño»): el número y él, en columna, para que la fila de arriba no crezca a lo ancho */
.tb-numcol{display:inline-flex;flex-direction:column;min-width:0}
.tb-docext{font-family:'DM Mono',monospace;font-size:var(--fs-xs);font-weight:500;color:var(--text2);line-height:1.2;overflow-wrap:anywhere}
.tb-big{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;margin-top:5px;color:var(--text)}
.tb-big .tb-cifra{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-xl);font-weight:700;line-height:1.1}
.tb-big small{font-size:var(--fs-sm);font-weight:600;color:var(--text2);margin-right:6px}
.tb-pie{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.tb-bar{flex:1 1 70px;height:5px;border-radius:4px;background:var(--surface3);overflow:hidden;min-width:56px}
.tb-bar i{display:block;height:100%;border-radius:4px;background:var(--c-curso-fg)}
.tb-papel.tb-listo .tb-bar i{background:var(--c-ok-fg)}
.tb-pct{font-size:var(--fs-xs);font-weight:700;color:var(--text2)}
.tb-papel.tb-listo .tb-pct{color:var(--c-ok-fg)}
.tb-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:var(--rd-pill);font-size:var(--fs-xs);font-weight:800;white-space:nowrap;line-height:1.3}
.tb-c-curso{background:var(--c-curso-bg);color:var(--c-curso-fg)}
.tb-c-esp{background:var(--c-esp-bg);color:var(--c-esp-fg)}
.tb-c-prob{background:var(--c-prob-bg);color:var(--c-prob-fg)}
.tb-c-ok{background:var(--c-ok-bg);color:var(--c-ok-fg)}
.tb-c-bc{background:var(--c-bc-bg);color:var(--c-bc-fg)}
.tb-c-neu{background:var(--c-neu-bg);color:var(--text2)}
.tb-abrir{margin-left:auto;font-size:var(--fs-xs);font-weight:800;color:var(--c-estr-fg);letter-spacing:.03em;white-space:nowrap}
.tb-cta{width:100%;margin-top:6px}
.tb-leyenda{margin:14px 2px 0;font-size:var(--fs-sm);color:var(--text2)}
.tb-leyenda summary{cursor:pointer;font-weight:800;color:var(--text);min-height:var(--tap);display:flex;align-items:center}
.tb-leyenda ul{margin:6px 0 0;padding-left:20px;line-height:1.55}
.tb-leyenda li{margin:3px 0}
/* PLEGAR (decisiones 3/D6/D7) y la leyenda de colores (decisión 4) — junto a la leyenda del
   tablón, con la que comparten sitio en el pie del corcho. */
.tb-pliegue{display:flex;justify-content:center;gap:8px;padding:6px 0 2px;position:relative;z-index:1}
.tb-mas,.tb-plegar{min-height:var(--tap);border-radius:var(--rd-pill);border:1px solid var(--border2);background:var(--surface);
  color:var(--text2);font-size:var(--fs-xs);font-weight:700;padding:6px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tb-mas:hover,.tb-plegar:hover{background:var(--surface2)}
/* el montón: dos «hojas de debajo» asomando (box-shadow desplazado con --surface2/3, sin pintar
   nada nuevo) además de la sombra de papel de siempre. */
/* position+z-index como .tb-papel: sin ellos el cordel del ramal (::before, posicionado) pasaba
   POR ENCIMA del montón y cruzaba los puntitos y el «Desplegar». */
.tb-monton{position:relative;z-index:1;width:100%;min-height:var(--tap-planta);border-radius:var(--rd);border:1px solid var(--border);background:var(--surface);
  box-shadow:var(--sh-papel), 4px 6px 0 -3px var(--surface3), 8px 11px 0 -6px var(--surface2);
  color:var(--text);font-size:var(--fs-md);font-weight:700;padding:12px 14px;cursor:pointer;display:flex;align-items:center;gap:8px;margin-top:4px}
.tb-colores-ley{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0 2px 8px;font-size:var(--fs-xs);color:var(--text2);font-weight:600}
.tb-colores-ley span:nth-child(odd){margin-right:-2px}
/* el puntito de color de los pedidos plegados/ocultos — la MISMA .tb-pos-X le da el color; el
   borde es suyo (2px, transparente por defecto) para que .tb-pos-X no herede nada del papel. */
.tb-punto{display:inline-block;flex:0 0 auto;width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:2px solid transparent;vertical-align:middle}   /* flex:0 0 auto: dentro del montón (flex) se aplastaba en una raya */
.tb-hoja{background:var(--bg);width:100%;max-width:960px;height:min(92vh,100%);border-radius:16px 16px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh-float)}
.tb-hoja-hdr{padding:0 18px 12px;border-bottom:1px solid var(--border);flex:0 0 auto}
.tb-hoja-body{overflow:auto;padding:12px 18px 18px;flex:1 1 auto}
/* revisión (11-sep): la hoja ya lleva su propia cabecera (cliente, kg, x/y, anterior/siguiente); la
   primera fila de la tarjeta de hoy repite exactamente eso, así que dentro de la hoja se oculta —
   por posición y no tocando _plantaPedidoCardHTML, que sigue intacta para la vista Lista */
.tb-hoja-body>.pl-tarea>div:first-child{display:none!important}   /* !important: esa fila lleva display:flex en línea */
.tb-nav{min-height:var(--tap);border-radius:var(--rd-sm);border:1px solid var(--border2);background:var(--surface);color:var(--text);font-size:var(--fs-sm);font-weight:700;padding:8px 12px;cursor:pointer}
.tb-nav:disabled{opacity:.4;cursor:default}
/* selector de color de la hoja (D5): 44×44, círculo — el borde (3px, sobre padding-box) es el
   «círculo interior»; .tb-pos-X (arriba) le da el fondo y el color del borde. «Sin color» lleva
   su propia raya en diagonal, sin depender de ningún .tb-pos-X. */
.tb-sw{width:44px;height:44px;padding:0;box-sizing:border-box;border-radius:50%;border:3px solid var(--border2);
  background:var(--surface);background-clip:padding-box;cursor:pointer}
/* «Sin color»: la raya encima de la superficie (el color va de ÚLTIMA capa del shorthand — sin él
   el botón se quedaba transparente y en la hoja solo se veía una raya suelta, sin su círculo). */
.tb-sw-none{background:linear-gradient(135deg, transparent calc(50% - 1.5px), var(--text3) calc(50% - 1.5px), var(--text3) calc(50% + 1.5px), transparent calc(50% + 1.5px)), var(--surface)}
.tb-sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--c-estr-fg)}
/* COLORES de pósit (decisión 4 del dueño): el papel se tiñe entero, y la MISMA clase pinta el
   punto (.tb-punto) y el selector de la hoja (.tb-sw) — A PROPÓSITO, DESPUÉS de los tres en el
   fichero: los tres (.tb-papel, .tb-punto, .tb-sw) fijan su propio background/border de base con
   UNA sola clase — misma especificidad que .tb-pos-X — y en un empate manda quien va DETRÁS. Solo
   el border-left de .tb-papel.tb-empezado/.tb-listo (dos clases: MÁS especificidad) sigue
   mandando en la izquierda pase lo que pase con el orden. */
.tb-pos-amarillo{background:var(--tb-pos-amarillo-bg);border-color:var(--tb-pos-amarillo-ln)}
.tb-pos-naranja{background:var(--tb-pos-naranja-bg);border-color:var(--tb-pos-naranja-ln)}
.tb-pos-rosa{background:var(--tb-pos-rosa-bg);border-color:var(--tb-pos-rosa-ln)}
.tb-pos-azul{background:var(--tb-pos-azul-bg);border-color:var(--tb-pos-azul-ln)}
.tb-pos-verde{background:var(--tb-pos-verde-bg);border-color:var(--tb-pos-verde-ln)}
.tb-pos-morado{background:var(--tb-pos-morado-bg);border-color:var(--tb-pos-morado-ln)}
/* …pero la barra de la IZQUIERDA es del estado, no del color: sin esto un pósit azul SIN EMPEZAR
   pintaba la barra azul — que en el tablón quiere decir «empezado» (revisión de quien firma). Solo
   para el sin empezar: .tb-empezado/.tb-listo ya mandan con su propio color. */
.tb-papel.tb-pos:not(.tb-empezado):not(.tb-listo){border-left-color:var(--border2)}
/* tinta secundaria sobre pósit: --text2/--text3 no llega a 4,5 de contraste en naranja/rosa/
   morado — --tb-pos-tinta2 sí, medida contra los seis. El verde de «listo» se queda tal cual. */
.tb-pos .tb-fecha,.tb-pos .tb-art-mas,.tb-pos .tb-docext,.tb-pos:not(.tb-listo) .tb-pct{color:var(--tb-pos-tinta2)}
/* en OSCURO el índigo de --c-estr-fg ya va justo (4,42) sobre la superficie normal, y sobre un
   pósit oscuro baja a 3,8-4,2 — «Preparar ›» pasa al color de texto normal, que sí cumple. */
[data-theme="dark"] .tb-pos .tb-abrir{color:var(--text)}
/* el albarán desde Planta (23-sep-2026): «Registrar albarán» se apaga mientras falte el camión o
   no haya nada que enviar — y en la tablet tiene que VERSE apagado (sin esto, .btn-primary apagado
   pinta igual que encendido y parece que el botón no responde). Solo en esta hoja: el resto de la
   app no cambia. */
#albcli-ov button:disabled{opacity:.4;cursor:default}
/* y en la hoja de albaranes de Reparto (23-sep, cambiar el pedido desde la hoja): con cambios sin
   guardar, «Ensayo» y «Registrar» se apagan, y el kit «ds» (.b) no tiene estilo de apagado — sin
   esto parecía que no respondían. Solo en esta hoja. */
#alb-ov button:disabled{opacity:.4;cursor:default}
/* Pedido nuevo desde Cargas (23-sep-2026, spec 2026-09-23-pedido-nuevo.md): la misma lección de
   v527/v528 — sirve para los dos modos (kit «ds» en oficina, pl-btn en mostrador) con una sola
   regla, porque los dos viven bajo el mismo overlay #pn-ov. */
#pn-ov button:disabled{opacity:.4;cursor:default}
.tb-cerrar{min-height:var(--tap);min-width:var(--tap);border-radius:var(--rd-sm);border:1px solid var(--border2);background:var(--surface);color:var(--text);font-size:var(--fs-lg);font-weight:700;cursor:pointer}
/* ARRASTRAR (S3.8): tres estados del gesto — creciendo mientras espera el dedo, hueco donde
   estaba el ramal que se mueve, y el fantasma (solo chincheta+cinta+meta) que sigue al dedo. */
/* dos clases A PROPÓSITO: con el dedo encima también manda .tb-pin:active (encoger a .94, misma
   especificidad) y, con una sola clase, la chincheta encogía en vez de crecer mientras espera. */
.tb-pin.tb-presion,.tb-tape.tb-presion{transform:scale(1.12);transition:transform .15s}
.tb-hueco{opacity:.35;outline:2px dashed var(--tb-hilo);outline-offset:5px;border-radius:var(--rd)}
.tb-fantasma{position:fixed;top:0;left:0;z-index:10050;pointer-events:none;box-shadow:var(--sh-float);
  transform:rotate(2deg);background:var(--tb-corcho);border-radius:var(--rd);padding:10px 14px 12px;
  display:flex;flex-direction:column;align-items:center;gap:6px;width:180px}
@media(max-width:640px){ .tb-grid{grid-template-columns:1fr 1fr} .tb-board{padding:12px 8px 16px;border-width:5px} }
/* ── TABLÓN DE JARDINERÍA (spec 2026-09-29-tablon-jardineria.md): generaliza el tablón de
   construcción de arriba — reutiliza las .tb-* tal cual (corcho, pin, cinta, meta, papel, pósits,
   plegado, hoja); lo propio lleva el prefijo .tj-. Sin tokens nuevos: todo sale de los ya
   compartidos (--c-… y --tb-…), así que no hace falta tocar :root ni [data-theme="dark"]. */
.tj-franja{display:flex;align-items:center;gap:8px;margin:16px 2px 2px;font-size:var(--fs-xs);font-weight:800;color:var(--tb-tinta-2);text-transform:uppercase;letter-spacing:.04em}
.tj-franja:first-child{margin-top:2px}
.tj-franja-vacio{grid-column:1/-1;padding:12px 6px 18px;color:var(--tb-tinta-2);font-size:var(--fs-sm)}
/* pin de color del camión (D10): --pin lo pone el papel en línea, con el color de Reparto
   (CCOLS) — sin --pin (chincheta de cliente) cae al índigo de siempre, igual que construcción. */
.tb-pin.tj-pin{background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.45), rgba(255,255,255,0) 46%), var(--pin, var(--c-estr-fg))}
/* el aro rojo (D10) manda sobre el color del camión — tres clases, más específico que
   .tb-pin.tj-pin (dos), así que gana pase lo que pase el orden de las reglas en el fichero. */
.tb-pin.tj-pin.tb-urgente{background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.45), rgba(255,255,255,0) 46%), var(--c-prob-fg)}
.tj-sitio{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:var(--rd-sm);background:var(--c-curso-bg);color:var(--c-curso-fg);border:1px solid var(--c-curso-ln)}
.tj-sitio.tj-sitio-falta{background:var(--c-prob-bg);color:var(--c-prob-fg);border-color:var(--c-prob-ln)}
.tj-faltas{margin-top:6px;display:flex;flex-direction:column;gap:5px}
.tj-falta-fila{font-size:var(--fs-sm);color:var(--c-prob-fg);font-weight:700;display:flex;flex-direction:column;gap:2px}
.tj-mirar{background:var(--c-esp-bg);color:var(--c-esp-fg);border-bottom:1px solid var(--c-esp-ln);padding:10px 14px;font-size:var(--fs-sm);font-weight:700;text-align:center}
/* notas en el papel (D8): la de oficina en la familia BC, la de planta en la de espera — el
   carretillero distingue de un vistazo quién la escribió; dos líneas como mucho, la hoja la
   enseña entera y grande (.pl-nota-of / .pl-nota-carga, las mismas de construcción). */
.tj-nota{margin-top:5px;padding:3px 8px;border-left:3px solid var(--c-bc-ln);background:var(--c-bc-bg);color:var(--c-bc-fg);font-size:var(--fs-xs);font-weight:700;border-radius:0 var(--rd-sm) var(--rd-sm) 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tj-nota.tj-nota-planta{border-left-color:var(--c-esp-ln);background:var(--c-esp-bg);color:var(--c-esp-fg)}
/* móvil: la regla de construcción (≤640px, dos columnas «1fr 1fr») no deja encoger por debajo del
   ancho mínimo de un papel y la segunda columna se salía del corcho a 390px (revisión de quien
   firma, 29-sep) — en jardinería, una sola columna que sí encoge. El selector de atributo gana en
   especificidad a .tb-grid: construcción no cambia. */
@media(max-width:640px){ .tb-grid[data-tablon="jard"]{grid-template-columns:minmax(0,1fr)} }
/* D1 (S1, obra «preparar/imprimir/albaranes»): la línea tocable de la hoja — botón grande (mínimo
   --tap-planta, el de Planta) con un círculo que se pone verde con ✓ al preparar. */
.tj-linea{width:100%;display:flex;align-items:flex-start;gap:12px;text-align:left;border:none;
  border-left:4px solid var(--border2);background:var(--surface);border-radius:var(--rd-sm);
  padding:10px 12px;min-height:var(--tap-planta);cursor:pointer;font:inherit;color:inherit}
.tj-linea.ok{background:var(--c-ok-bg);border-left-color:var(--c-ok-ln)}
.tj-check{flex:0 0 auto;width:32px;height:32px;margin-top:2px;border-radius:50%;
  border:2px solid var(--border2);background:var(--surface);display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:var(--fs-lg)}
/* el ✓ con el token de superficie, nunca #fff a mano (cero hex en código nuevo) */
.tj-linea.ok .tj-check{background:var(--c-ok-fg);border-color:var(--c-ok-fg);color:var(--surface)}
/* D5: fila de botones bajo la meta de la chincheta de camión (Imprimir/Albaranes) — reutiliza
   .tb-nav (ya lleva min-height:var(--tap)), solo el envoltorio es nuevo */
/* por ENCIMA del cordel (.tb-ramal::before, absoluto): pasaba por el centro de «Imprimir» y un toque justo ahí se lo llevaba el cordel (visto en la revisión del tablón de gaviones, 30-sep) */
.tj-pin-btns{position:relative;z-index:2;display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
/* ── obra 3 (spec 2026-09-29-tablon-jardineria-3-preparacion-dentro.md): lo del modo preparación
   dentro de la hoja del tablón. Solo tokens (cero hex, cero px de letra); botones y casillas de
   alto ≥ --tap. La línea tocable de arriba (.tj-linea/.tj-check) sigue siendo el «marcar»; debajo,
   la franja .tj-linea-ctrl. Todo dentro de la caja .tj-linea-caja, que lleva el color y el borde. */
.tj-linea-caja{margin-bottom:10px;background:var(--surface);border-left:4px solid var(--border2);border-radius:var(--rd-sm);overflow:hidden}
.tj-linea-caja.ok{background:var(--c-ok-bg);border-left-color:var(--c-ok-ln)}
.tj-linea-caja.falta{border-left-color:var(--c-prob-fg)}
/* complementaria: familia BC (violeta), como el modo preparación */
.tj-linea-caja.comp{background:var(--c-bc-bg);border-left-color:var(--c-bc-fg)}
.tj-linea-caja>.tj-linea,.tj-linea-caja>.tj-linea.ok{background:transparent;border-left:none;border-radius:0}
.tj-linea-fija{cursor:default}
.tj-lin-cuerpo{flex:1;min-width:0;text-align:left}
.tj-lin-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.tj-tag-comp{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--rd-sm);background:var(--c-bc-fg);color:var(--surface);font-size:var(--fs-xs);font-weight:800}
.tj-check-comp{border-color:var(--c-bc-fg);color:var(--c-bc-fg);background:transparent}
.tj-linea-ctrl{display:flex;flex-direction:column;gap:8px;padding:8px 12px 12px;border-top:1px dashed var(--border2)}
.tj-ctrl-datos,.tj-ctrl-acc{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tj-in{box-sizing:border-box;min-height:var(--tap);padding:6px 10px;border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text);font-family:inherit;font-size:var(--fs-sm)}
.tj-in-num{width:72px;text-align:center}
.tj-in-nota{flex:1 1 180px;min-width:0}
.tj-in-nota.tiene{background:var(--c-esp-bg);border-color:var(--c-esp-ln)}
.tj-linea-ctrl select{min-height:var(--tap);padding:6px 10px;border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text);font-family:inherit;font-size:var(--fs-sm)}
.tj-btn{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 14px;border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text);font-family:inherit;font-size:var(--fs-sm);font-weight:700;white-space:nowrap;cursor:pointer}
.tj-btn-falta{color:var(--c-prob-fg)}
.tj-btn-falta.on{background:var(--c-prob-bg);border-color:var(--c-prob-ln)}
.tj-btn-prod{background:var(--c-esp-bg);border-color:var(--c-esp-fg);color:var(--c-esp-fg)}
.tj-btn-comp{border-color:var(--c-bc-fg);color:var(--c-bc-fg)}
.tj-btn-comp.on{background:var(--c-bc-fg);color:var(--surface)}
.tj-lin-estado{display:inline-flex;align-items:center}
/* «En camión» dentro de la hoja del tablón (2-oct, «el formato es feo»): las piezas de Por preparar
   (.tj-linea-caja/.tj-linea/.tj-check) y, a la derecha de cada línea, el «5/9» para cargar a medias.
   A medias = familia «espera» (ámbar), como la tarjeta de siempre. Solo tokens. */
.tj-cam{display:flex;align-items:stretch}
.tj-cam>.tj-linea{flex:1 1 auto;min-width:0}
.tj-linea-caja.tj-cam.medias{border-left-color:var(--c-esp-ln)}
.tj-cam-medias{flex:0 0 auto;align-self:center;margin:0 10px;min-width:72px;justify-content:center;font-size:var(--fs-md);font-weight:800;color:var(--text2)}
.tj-cam-medias.on{background:var(--c-esp-bg);border-color:var(--c-esp-fg);color:var(--c-esp-fg)}
.tj-cam-medias.ok{background:var(--c-ok-bg);border-color:var(--c-ok-fg);color:var(--c-ok-fg)}
.tj-cam-fila{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tj-cam-q{font-weight:800;font-size:var(--fs-xl)}
.tj-cam-emb{font-size:var(--fs-sm);font-weight:700;color:var(--text2)}
.tj-cam-desc{font-weight:700;margin-top:2px}
.tj-linea.ok .tj-cam-desc{text-decoration:line-through;color:var(--text2)}
.tj-cam-ref{font-family:'DM Mono',monospace;font-size:var(--fs-xs);color:var(--text3)}
.tj-cam-obs{margin-top:4px;font-size:var(--fs-sm);color:var(--c-esp-fg);font-weight:700}
.tj-cam-bc{margin-top:4px;font-size:var(--fs-xs);font-weight:800;color:var(--c-curso-fg)}
.tj-cam-fuera{opacity:.6;margin-bottom:10px}
.tj-cam-nocarga{font-size:var(--fs-xs);font-weight:700;color:var(--text2)}
.tj-cam-sin{flex:0 0 auto;width:32px;text-align:center;font-weight:800;color:var(--text3)}
.tj-cam-nota{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;padding:8px 12px;border-left:4px solid var(--c-bc-ln);background:var(--c-bc-bg);color:var(--c-bc-fg);font-size:var(--fs-sm);font-weight:700;border-radius:0 var(--rd-sm) var(--rd-sm) 0}
.tj-cam-bcnota{border-left-color:var(--c-curso-fg);background:var(--c-curso-bg);color:var(--c-curso-fg)}
.tj-cam-barra{height:8px;margin-bottom:12px;background:var(--border);border-radius:4px;overflow:hidden}
.tj-cam-barra>div{height:100%;background:var(--text3)}
.tj-cam-barra.medias>div{background:var(--c-esp-fg)}
.tj-cam-barra.ok>div{background:var(--c-ok-fg)}
.tj-cam-listo{background:var(--c-ok-btn)}
/* a nivel de pedido, en la cabecera de la hoja: quién prepara + Urgente + nota para el carretillero */
.tj-cab-ctrl{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.tj-cab-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tj-ctrl-etq{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm);font-weight:700;color:var(--text2)}
.tj-cab-fila .tj-ctrl-etq{flex-direction:row;align-items:center;gap:8px}
.tj-ctrl-etq small{font-weight:500;color:var(--text3)}
.tj-nota-edit{width:100%;resize:vertical;font-weight:500}
.tj-urg{color:var(--c-prob-fg);border-color:var(--c-prob-ln)}
.tj-urg.on{background:var(--c-prob-fg);border-color:var(--c-prob-fg);color:var(--surface)}
/* Historial del tablón de jardinería (spec 2026-09-30-tablon-jardineria-historial.md): reutiliza las
   .hst-* del Historial de Planta; solo lo que ellas no traen — un pedido dentro del camión desplegado. */
.tjh-hoja{margin-bottom:12px}
.tjh-ped{border-top:1px solid var(--border);padding:12px 0}
.tjh-ped:first-child,.tjh-hoja+.tjh-ped{border-top:0;padding-top:0}
.tjh-ped-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.tjh-ped-cab .hst-mono{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--text2)}
.tjh-ped-dest{font-size:var(--fs-sm);color:var(--text2)}
/* dentro de la fila del pedido el cliente no puede encogerse a nada (en el móvil se quedaba en «Á…»):
   con una base de 140 px, si no cabe junto al número, baja a su propia línea */
.tjh-ped-cab .hst-ped-cli{flex:1 1 140px}
/* el chip URGENTE del papel: solo, a la derecha, y la edad pegada a él (no dos margin-left:auto) */
.tb-top .tb-chip.tj-urgente{margin-left:auto}
.tb-top .tj-urgente+.tb-chip{margin-left:0}
/* la ficha de la compra (hoja): nota en grande y «para quién» por pedido, en su envase */
.fcp-nota{background:var(--c-esp-bg);border-left:5px solid var(--c-esp-fg);border-radius:var(--radius-sm);padding:10px 12px;font-size:var(--fs-lg);font-weight:700;margin-top:10px;white-space:pre-line}
.fcp-nota-tit{font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text2);margin-bottom:4px}
.fcp-linea{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px}
.fcp-linea-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.fcp-linea-cab .pl-tarea-q:first-child{flex:1;min-width:140px;white-space:normal}
.fcp-para{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:8px 0;border-top:1px solid var(--border)}
.fcp-para-cli{font-size:var(--fs-md);font-weight:800}
.fcp-para-bultos{font-size:var(--fs-lg);font-weight:800;text-align:right;white-space:nowrap}
.fcp-para-bultos small{font-size:var(--fs-sm);font-weight:700;color:var(--text2)}
.fcp-para-meta{grid-column:1/-1;font-size:var(--fs-xs);color:var(--text2)}
.fcp-para-stock .fcp-para-cli{color:var(--text2)}
.fcp-sincasar{font-size:var(--fs-sm);color:var(--text2);margin-top:8px;line-height:1.5}
/* spec 2026-09-04-buscador-pedidos-de-compra: la caja de la cabecera de Compras y su desplegable */
#compras-omni-wrap{position:relative;flex:1;min-width:220px;max-width:440px}
#compras-omni-wrap>.ti-search{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none}
#compras-omni{width:100%;box-sizing:border-box;font-size:12.5px;padding:8px 10px 8px 30px;border:1px solid var(--border2);border-radius:8px;background:var(--surface);color:var(--text);font-family:inherit}
.cb-res{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);max-height:60vh;overflow-y:auto;text-align:left}
.cb-fila{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--border)}
.cb-fila:last-child{border-bottom:0}
.cb-fila:hover{background:var(--surface2)}
.cb-l1{display:flex;align-items:center;gap:8px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-num{font-family:'DM Mono',monospace;color:var(--blue-d);font-weight:600}
.cb-l2{font-size:var(--fs-xs);color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.cb-vacio{padding:12px;font-size:12.5px;color:var(--text3);text-align:center}
/* «Para pedido(s) de venta» filtrado por material y con buscador (misma spec, 2ª parte) */
.cf-pr-cab{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
#cf-pedrel-q{flex:1;min-width:140px;font-size:12.5px;padding:6px 9px;border:1px solid var(--border2);border-radius:8px;background:var(--surface);color:var(--text);font-family:inherit}
.cf-pr-todos{font-size:var(--fs-xs);padding:5px 9px;white-space:nowrap}
.cf-pr-nota{font-size:var(--fs-xs);color:var(--text3);padding:2px 4px}
.cf-pr-fila{display:flex;align-items:flex-start;gap:8px;padding:5px 4px;font-size:12.5px;color:var(--text);cursor:pointer;border-radius:6px}
.cf-pr-fila:hover{background:var(--surface2)}
.cf-pr-fila[hidden]{display:none}   /* el filtro esconde con `hidden`; sin esto el display:flex de arriba ganaría */
.cf-pr-fila .cf-pedrel-cb{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.cf-pr-cuerpo{display:flex;flex-direction:column;min-width:0;flex:1}
.cf-pr-num{font-family:'DM Mono',monospace;color:var(--blue-d)}
.cf-pr-cli{color:var(--text2)}
.cf-pr-fecha{color:var(--text3);font-size:var(--fs-xs)}
.cf-pr-mat{font-size:var(--fs-xs);color:var(--c-ok-fg);margin-top:1px}
/* spec 2026-09-10-compras-pedidos-construccion: etiqueta del pedido de construcción en la lista */
.cf-pr-constr{background:var(--c-curso-bg);color:var(--c-curso-fg);font-size:var(--fs-xs);font-weight:700;border-radius:7px;padding:1px 7px;white-space:nowrap}
@media(max-width:600px){ .pl-espejo-hdr{gap:8px} .pl-tarea-acc{margin-left:0;width:100%} .pl-tarea-acc .pl-btn{flex:1} }
/* v313 (D15): tablero de 3 días del espejo Compras — AYER · HOY · MAÑANA en columnas, apiladas
   por debajo de 900px (spec explícita). Cada .pl-dia reutiliza .pl-fila/.pl-tarea tal cual. */
.pl-tablero{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
@media(max-width:900px){ .pl-tablero{grid-template-columns:1fr} }
.pl-dia{min-width:0}
.pl-dia-tit{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);
  margin-bottom:8px;display:flex;align-items:center;gap:6px}
.pl-dia-tit span{font-size:var(--fs-xs);font-weight:700;color:var(--text3);background:var(--surface2);border-radius:8px;padding:1px 8px}

/* B · teclado numérico en pantalla: los kg SIEMPRE a mano, la tablet no saca su teclado */
.tk-panel{background:var(--bg);width:100%;max-width:400px;border-radius:16px 16px 0 0;padding:18px;font-family:inherit;color:var(--text)}
.tk-ctx{font-size:12.5px;color:var(--text2);margin:2px 0 12px}
.tk-display{background:var(--surface2);border:2px solid var(--border2);border-radius:var(--radius);min-height:64px;
  display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 18px;font-size:30px;font-weight:600;margin-top:6px}
.tk-display small{font-size:14px;color:var(--text2);font-weight:500}
.tk-ph{color:var(--text3);font-size:14px;font-weight:500}
.tk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.tk-key{min-height:54px;border-radius:var(--radius-sm);border:2px solid var(--border2);background:var(--surface);
  font-size:20px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--text)}
.tk-key:active{background:var(--blue-l);border-color:var(--blue)}
.tk-key.tk-fn{font-size:15px;color:var(--text2)}
.tk-ok{width:100%;margin-top:14px;font-size:15px;padding:14px;justify-content:center}
.tk-ok:disabled{opacity:.4;cursor:default}
.tk-cancelar{width:100%;margin-top:8px;min-height:44px;border-radius:var(--radius);background:var(--surface2);border:1px solid var(--border);
  font-size:13.5px;font-weight:600;color:var(--text2);cursor:pointer;font-family:inherit}

/* ══ GAVIONES · CALCULADOR (fase 4, 2-sep-2026, spec 2026-09-02-gaviones-fase4-calculador.md,
   2.2) ══════════════════════════════════════════════════════════════════════════════════════
   El motor (gav-calculador.js/gav-muro3d.js/gav-ficha.js) se TRASPLANTA de GavControl sin
   reescribir su marcado (class="card"/"btn"/"tbl"/"field"/"frow3"…, el vocabulario de su propio
   styles.css) — en vez de perseguir cada class="" por 2.800 líneas para renombrarlo, se ESCOPEA
   bajo .gvc-scope (los dos contenedores del Calculador y Muros guardados, ver index.html) y se
   repinta aquí con los tokens de Cargas: así ni un componente nuevo pisa el resto de la app
   (esta app no tenía .card/.tbl/.btn de base) y el "piel: tokens de Cargas" de la spec queda
   cumplido sin tocar una sola línea de las fórmulas. .field/.mono/.badge/.b-* ya existían con
   nombre compatible: no se tocan aquí, solo lo que faltaba (.card/.tbl/.btn/.dim/.empty/
   .b-steel) o necesitaba forzar DM Mono. */
.gvc-scope .card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;margin-bottom:12px}
.gvc-scope .card-hdr{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.gvc-scope .card-title{font-size:var(--fs-xs);font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.gvc-scope .card-body{padding:14px 16px}
.gvc-scope .tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.gvc-scope .tbl th{padding:9px 12px;text-align:left;font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);border-bottom:1px solid var(--border);background:var(--surface2);white-space:nowrap}
.gvc-scope .tbl td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:var(--fs-sm)}
.gvc-scope .tbl tr:last-child td{border-bottom:none}
.gvc-scope .tbl th.r,.gvc-scope .tbl td.r{text-align:right}
.gvc-scope .tbl th.c,.gvc-scope .tbl td.c{text-align:center}
.gvc-scope .b-steel{background:var(--c-neu-bg);color:var(--text2)}
/* botones propios de GavControl (class="btn btn-primary btn-sm" combinables): Cargas ya tiene
   .btn-primary/.btn-sec, pero sin base .btn ni variante .btn-sm/.btn-outline — se define aparte,
   escapada, para no rozar los .btn-primary/.btn-sec de siempre (que no llevan .btn delante). */
.gvc-scope .btn{border:none;border-radius:var(--radius-sm);padding:9px 15px;font-size:var(--fs-xs);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-family:inherit;transition:filter .12s,background .12s;min-height:var(--tap)}
.gvc-scope .btn-primary{background:var(--blue-btn);color:#fff}
.gvc-scope .btn-primary:hover{filter:brightness(1.08)}
.gvc-scope .btn-primary:disabled{opacity:.5;cursor:default;filter:none}
.gvc-scope .btn-outline{background:none;border:1px solid var(--border2);color:var(--text2)}
.gvc-scope .btn-outline:hover{background:var(--surface2);color:var(--text)}
.gvc-scope .btn-danger{background:var(--red);color:#fff}
.gvc-scope .btn-danger:hover{filter:brightness(1.08)}
/* .btn-sm: acciones densas de tabla/chip (quitar tramo, elegir "Muro 2"…) — la misma proporción
   compacta que ya traía GavControl, con el suelo de letra de Cargas (nunca por debajo de --fs-xs)
   y algo más de aire que el original para que el dedo no falle. */
.gvc-scope .btn-sm{padding:6px 11px;font-size:var(--fs-xs);min-height:34px}
.gvc-scope .dim{color:var(--text2);font-size:var(--fs-xs)}
.gvc-scope .empty{text-align:center;padding:40px 20px;color:var(--text2)}
.gvc-scope .empty i{font-size:38px;display:block;margin-bottom:10px;opacity:.25}
/* DM Mono para cifras (spec 2.2): Cargas ya define .mono con una pila monoespaciada genérica —
   dentro del calculador se fuerza la tipografía de la casa, igual que en el resto de la app. */
.gvc-scope .mono{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}

/* .frow3 (rejilla de 3 columnas): compañera de la .frow de 2 que ya había — utilidad genérica,
   sin escopar, la usa el propio formulario del calculador (altura/ancho/ensanche a la vez). */
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
@media(max-width:700px){.frow3{grid-template-columns:1fr}}

/* ── LA OBRA DE CADA PEDIDO DE GAVIONES (Gaviones › Ventas › Pedidos, 25-sep-2026, spec
   2026-09-25-gaviones-fluido-reparto-vivo.md, C). Lenguaje propio de gaviones —el dueño: «no
   quiero que copies [Planta] pero que seas imaginativo»—: cada medida con su gavión dibujado y un
   TREN de tramos (uno por camión) que se lee sin leer: verde = ya salió, azul = en camión, ámbar
   rayado = sin camión, rojo discontinuo = BC pide más de lo repartido. Todo de tokens: los dos
   temas salen solos. La piedra del dibujo sí lleva sus colores (son la realidad, 20-sep). ── */
.gob-tira{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
/* V3: «Abrir todos» / «Cerrar todos» — bajo la tira, discretos (son un atajo, no una decisión) */
.gob-abrir-todos{display:flex;gap:8px;margin:0 0 12px}
.gob-kpi{flex:1 1 170px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--border2);
  border-radius:var(--rd);padding:10px 14px;font-family:inherit;color:var(--text);text-align:left}
.gob-kpi b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-2xl);font-weight:700;line-height:1.1}
.gob-kpi span{font-size:var(--fs-xs);font-weight:700;color:var(--text2)}
.gob-kpi.gob-es-estr{border-left-color:var(--c-estr-fg)}
.gob-kpi.gob-es-curso{border-left-color:var(--c-curso-fg)}
.gob-kpi.gob-es-esp{border-left-color:var(--c-esp-fg)}
.gob-kpi.gob-es-prob{border-left-color:var(--c-prob-fg)}
.gob-kpi.gob-es-prob b{color:var(--c-prob-fg)}
button.gob-kpi{cursor:pointer;min-height:var(--tap)}
button.gob-kpi:hover{border-color:var(--border2)}
button.gob-kpi.on{background:var(--c-prob-bg);box-shadow:inset 0 0 0 2px var(--c-prob-ln)}
.gob-ley{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-xs);color:var(--text2);margin:0 0 12px}
.gob-ley i{display:inline-block;width:18px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}

.gob{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--border2);border-radius:var(--rd);margin-bottom:14px;overflow:hidden}
.gob.gob-es-ok{border-left-color:var(--c-ok-fg)}
.gob.gob-es-curso{border-left-color:var(--c-curso-fg)}
.gob.gob-es-esp{border-left-color:var(--c-esp-fg)}
.gob.gob-es-prob{border-left-color:var(--c-prob-fg)}
/* V3 (28-sep-2026, spec 2026-09-28-gaviones-ventas-unica.md): la cabecera es AHORA el botón que
   abre/cierra la obra — reset de <button> encima del aspecto de siempre (nada cambia a la vista
   cerrada; toda la fila es tocable, min --tap de sobra). */
.gob-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px 10px;
  width:100%;min-height:var(--tap);background:none;border:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.gob-cab:hover{background:var(--surface2)}
.gob-desplegar{flex:0 0 auto;align-self:center;color:var(--text2);font-size:var(--fs-lg);transition:transform .15s}
.gob-cab[aria-expanded="true"] .gob-desplegar{transform:rotate(180deg)}
.gob-id{min-width:0}
.gob-num{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-lg);font-weight:700;color:var(--c-bc-fg);margin-right:4px}
.gob-chip{vertical-align:1px}
.gob-cli{display:block;font-size:var(--fs-xl);font-weight:700;line-height:1.25;margin-top:3px}
.gob-meta{font-size:var(--fs-xs);color:var(--text2);margin-top:3px}
.gob-total{text-align:right;flex:0 0 auto}
.gob-total b{display:block;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-3xl);font-weight:700;line-height:1}
.gob-total span{font-size:var(--fs-xs);font-weight:700;color:var(--text2)}
.gob-resumen{padding:0 16px 12px}
.gob-cuenta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--fs-xs);color:var(--text2);margin-top:6px}
.gob-cuenta b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--text)}
.gob-cuenta-bc,.gob-cuenta-bc b{color:var(--c-prob-fg);font-weight:700}

/* V3: la barra fina de preparado, siempre visible (esté abierta o cerrada la obra) */
.gob-barra-prep{height:5px;margin:0 16px 12px;border-radius:var(--rd-pill);background:var(--surface2);overflow:hidden;display:flex}
.gob-bp-prep{display:block;height:100%;background:var(--c-ok-fg)}
.gob-bp-res{display:block;height:100%;background:repeating-linear-gradient(135deg,var(--c-estr-fg) 0 4px,transparent 4px 7px);opacity:.7}
.gob-cuerpo-wrap:empty{display:none}

/* V1: las notas del pedido — comentarios de BC sin referencia, arriba del cuerpo */
.gob-notas{display:flex;gap:10px;align-items:flex-start;margin:0 16px 12px;padding:10px 12px;background:var(--surface2);
  border:1px solid var(--border);border-left:5px solid var(--c-bc-fg);border-radius:var(--rd-sm);font-size:var(--fs-sm)}
.gob-notas>i{color:var(--c-bc-fg);font-size:var(--fs-lg);flex:0 0 auto;margin-top:1px}
.gob-notas div div{margin-bottom:4px}
.gob-notas div div:last-child{margin-bottom:0}

/* el TREN: tramos proporcionales a su cantidad (flex-grow = cantidad, lo pone app.js). La barra
   gruesa de abajo de cada tramo es su estado: se lee aunque el tramo sea estrecho y no quepa la cifra */
.gob-tren{display:flex;height:26px;border-radius:var(--rd-sm);overflow:hidden;background:var(--surface2);border:1px solid var(--border)}
.gob-tren-grande{height:34px}
.gob-tramo{display:flex;align-items:center;justify-content:center;min-width:6px;overflow:hidden;white-space:nowrap;
  font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-xs);font-weight:700;
  border-right:2px solid var(--surface);padding:0 4px 4px}
.gob-tramo:last-child{border-right:none}
.gob-t-entregado{background:var(--c-ok-bg);color:var(--c-ok-fg);box-shadow:inset 0 -5px 0 var(--c-ok-fg)}
.gob-t-camion{background:var(--c-curso-bg);color:var(--c-curso-fg);box-shadow:inset 0 -5px 0 var(--c-curso-fg)}
.gob-t-bandeja{background:repeating-linear-gradient(135deg,var(--c-esp-bg) 0 7px,var(--surface) 7px 12px);color:var(--c-esp-fg);box-shadow:inset 0 -5px 0 var(--c-esp-fg)}
.gob-t-bc{background:repeating-linear-gradient(135deg,var(--c-prob-bg) 0 5px,var(--surface) 5px 10px);color:var(--c-prob-fg);outline:2px dashed var(--c-prob-fg);outline-offset:-2px}

.gob-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;padding:12px 16px 14px;border-top:1px solid var(--border)}
@media (max-width:900px){ .gob-cuerpo{grid-template-columns:minmax(0,1fr)} }
.gob-medida{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--border)}
.gob-medida:last-of-type{border-bottom:none}
.gob-dibujo{width:96px;height:68px;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:var(--fs-2xl)}
.gob-dibujo svg{width:100%;height:100%}
.gob-med-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:6px}
.gob-med{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-lg);font-weight:700}
.gob-color{font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;color:var(--text2);border:1px solid var(--border2);border-radius:var(--rd-pill);padding:1px 9px}
/* ÁNGULOS (spec 2026-09-28-gaviones-angulos.md): la forma al lado de la medida — el ángulo en índigo
   (que no se confunda con el chip del color), el icono mirando a su lado; «Recto» neutro */
.gv-forma{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;border-radius:var(--rd-pill);padding:1px 9px;white-space:nowrap;vertical-align:middle;color:var(--c-estr-fg);background:var(--c-estr-bg);border:1px solid var(--c-estr-ln)}
.gv-forma-recto{color:var(--text2);background:transparent;border:1px dashed var(--border2)}
.gv-forma-izq .ti{transform:scaleX(-1)}
.gob-med-bc{font-size:var(--fs-xs);color:var(--text2);margin:-2px 0 6px}
.gob-cant{margin-left:auto;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-xl);font-weight:700}
.gob-med-pie{font-size:var(--fs-xs);color:var(--text2);margin-top:6px}
.gob-med-pie b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--text)}
.gob-hay{color:var(--c-ok-fg);font-weight:700}
.gob-falta{color:var(--c-esp-fg);font-weight:700}
.gob-menos{color:var(--c-prob-fg);font-weight:700}
.gob-otros{font-size:var(--fs-xs);color:var(--text2);padding-top:8px}
.gob-otros b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--text)}
/* V1: «lo demás» ahora es una fila .gob-medida más (mismo dibujo+info que un gavión), solo que
   su título no es monoespaciado (es una descripción de BC, no una medida) */
.gob-med-otro{font-family:inherit;font-variant-numeric:normal}
.gob-otro-comp{color:var(--c-bc-fg);font-weight:600}

/* el convoy: sus camiones en orden de salida. Cada ficha entera es el botón (lleva a Preparación) */
.gob-convoy{display:flex;flex-direction:column;gap:8px;min-width:0}
.gob-sec{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
.gob-camion{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:var(--tap);
  padding:7px 10px;background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--border2);border-radius:var(--rd-sm);
  text-align:left;font-family:inherit;color:var(--text);cursor:pointer}
.gob-camion:hover{border-color:var(--border2)}
.gob-camion>i{font-size:var(--fs-xl)}
.gob-camion.gob-es-ok{border-left-color:var(--c-ok-fg)} .gob-camion.gob-es-ok>i{color:var(--c-ok-fg)}
.gob-camion.gob-es-curso{border-left-color:var(--c-curso-fg)} .gob-camion.gob-es-curso>i{color:var(--c-curso-fg)}
.gob-camion.gob-es-esp{border-left-color:var(--c-esp-fg);background:var(--c-esp-bg)} .gob-camion.gob-es-esp>i{color:var(--c-esp-fg)}
.gob-c-txt{display:flex;flex-direction:column;min-width:0}
.gob-c-tit{font-size:var(--fs-sm);font-weight:700}
.gob-c-num{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-xs);font-weight:500;color:var(--text2)}
.gob-c-sub{font-size:var(--fs-xs);color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gob-c-n{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-lg);font-weight:700}

/* el cuadre con BC: la franja de problema y su ÚNICO botón principal */
.gob-bc{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;background:var(--c-prob-bg);border-top:1px solid var(--c-prob-ln);color:var(--c-prob-fg)}
.gob-bc>i{font-size:var(--fs-xl)}
.gob-bc-txt{flex:1 1 260px;min-width:0;font-size:var(--fs-sm);font-weight:600;line-height:1.4}
.gob-bc-txt b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-weight:800}
.gob-bc-quien{font-size:var(--fs-xs);font-weight:700}
.gob-bc-nota{padding:10px 16px;border-top:1px solid var(--border);font-size:var(--fs-xs);color:var(--text2)}
@media (max-width:600px){
  .gob-cab{flex-direction:column}
  .gob-total{text-align:left}
  .gob-medida{grid-template-columns:64px minmax(0,1fr)}
  .gob-dibujo{width:64px;height:48px}
  .gob-bc .b{width:100%}
}
/* N4 de la campana (spec 2026-09-26-campana-y-stock-al-albaranar.md): tocar un aviso de «Entran
   gaviones…»/«Sobran en camión…» trae hasta esta tarjeta — el mismo azul de foco que usan
   cp-col.cp-over/cal-drop-hi más arriba, nunca un color suelto; se apaga sola (irAObraGav, app.js). */
@keyframes gob-foco{0%,100%{box-shadow:none}20%,60%{box-shadow:0 0 0 3px var(--blue)}}
.gob-foco{animation:gob-foco 2.4s ease-in-out}
@media (prefers-reduced-motion: reduce){ .gob-foco{animation:none;box-shadow:0 0 0 3px var(--blue)} }

/* el chip «⚖ BC cambió» de Planificación (pcard y mini-card): tocarlo abre «Cuadrar con BC» */
.chip-rep-bc{display:inline-flex;align-items:center;gap:4px;font-family:inherit;font-size:var(--fs-xs);font-weight:700;white-space:nowrap;
  background:var(--c-prob-bg);color:var(--c-prob-fg);border:1px solid var(--c-prob-ln);border-radius:7px;padding:1px 7px;cursor:pointer}
@media (pointer:coarse){ .chip-rep-bc{min-height:32px;padding:4px 10px} }

/* la hoja «Cuadrar con BC» (dlg-hoja, abajo): una fila por artículo que no cuadra */
.cbc-hoja{background:var(--bg);width:100%;max-width:640px;max-height:92vh;border-radius:16px 16px 0 0;display:flex;flex-direction:column;color:var(--text)}
.cbc-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px 8px}
.cbc-tit-hoja{font-size:var(--fs-lg);font-weight:700}
.cbc-tit-hoja i{color:var(--c-prob-fg)}
.cbc-cuerpo{padding:4px 18px 8px;overflow-y:auto;flex:1 1 auto;font-size:var(--fs-sm)}
.cbc-intro{font-size:var(--fs-sm);color:var(--text2);margin:0 0 12px;line-height:1.45}
/* .cbc-fila/.cbc-tit/.cbc-ref/.cbc-delta/.cbc-lbl/.cbc-sel/.cbc-no RETIRADAS con la hoja «Cuadrar
   con BC» (spec 2026-09-26-gaviones-planificar-camiones.md, P1): nadie las usa ya. Lo que sigue
   viviendo (cbc-hoja/cbc-cab/cbc-tit-hoja/cbc-cuerpo/cbc-intro/cbc-cifras/cbc-pie) es de la hoja
   «Reservar…» (rsv) y de la de «Camiones» (cam), más abajo — no se tocan. */
.cbc-cifras{font-size:var(--fs-xs);color:var(--text2);margin:3px 0 8px}
.cbc-cifras b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--text)}
.cbc-pie{display:flex;justify-content:flex-end;gap:8px;padding:10px 18px 16px;border-top:1px solid var(--border)}

/* R7 (spec 2026-09-26-gaviones-reservar-y-preparar-por-unidades.md): la CINTA de cada medida — lo
   que queda por servir, repartido en preparado (apartado de verdad, macizo), reservado (apartado en
   la app), lo que el stock libre aún puede cubrir (rayado claro) y lo que hay que fabricar (vacío
   rayado). Fina y debajo del tren: el tren dice «dónde va», la cinta «de dónde sale». */
.gob-cinta{display:flex;height:8px;margin-top:5px;border-radius:var(--rd-pill);overflow:hidden;background:var(--surface2)}
.gob-rs{min-width:4px;border-right:2px solid var(--surface)}
.gob-rs:last-child{border-right:none}
.gob-rs-prep{background:var(--c-ok-fg)}
.gob-rs-res{background:var(--c-estr-fg)}
.gob-rs-enfab{background:var(--c-curso-ln)}   /* M2: ya se está fabricando para esta obra (en curso) */
.gob-enfab{color:var(--c-curso-fg);font-weight:600}
.gob-rs-libre{background:repeating-linear-gradient(135deg,var(--c-ok-bg) 0 4px,var(--c-ok-ln) 4px 7px)}
.gob-rs-fab{background:repeating-linear-gradient(135deg,var(--c-esp-bg) 0 4px,var(--surface) 4px 7px);box-shadow:inset 0 0 0 1px var(--c-esp-ln)}
.gob-ley-cinta i{height:8px;border-radius:var(--rd-pill)}
.gob-apart{color:var(--c-estr-fg);font-weight:700}
.gob-apart b{color:inherit}
.gob-acc{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 16px;border-top:1px solid var(--border)}
.gob-acc>i{font-size:var(--fs-xl);color:var(--c-estr-fg)}
.gob-acc-txt{flex:1 1 240px;min-width:0;font-size:var(--fs-sm);color:var(--text2)}
.gob-acc-txt b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--text)}
@media (max-width:600px){ .gob-acc .b{width:100%} }
/* V2: la cifra pequeña del botón «Preparar…» (X/Y), dentro del propio botón */
.gob-acc-cif{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;opacity:.85}

/* la hoja «Reservar…» (misma hoja que «Cuadrar con BC»): una fila por parte de la obra con −/+ */
.rsv-ic{color:var(--c-estr-fg)!important}
.rsv-atajos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.rsv-med{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--c-estr-fg);border-radius:var(--rd-sm);padding:10px 12px;margin-bottom:10px}
.rsv-med-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:4px}
.rsv-libre{margin-left:auto;font-size:var(--fs-xs);color:var(--text2)}
.rsv-libre b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--c-ok-fg)}
.rsv-fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:8px 0;border-top:1px dashed var(--border)}
.rsv-lin{min-width:0;flex:1 1 220px}
.rsv-parte{font-size:var(--fs-sm)}
.rsv-parte b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.rsv-cif{font-size:var(--fs-xs);color:var(--text2)}
.rsv-cif b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--text)}
.rsv-delta{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-weight:800;color:var(--c-estr-fg)}
.rsv-cambia .rsv-parte b{color:var(--c-estr-fg)}
.rsv-step{display:flex;align-items:center;gap:6px}
.rsv-step .b{min-width:var(--tap);min-height:var(--tap);padding:0;justify-content:center}
.rsv-step input{width:76px;min-height:var(--tap);text-align:center;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-lg);font-weight:700;
  border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text)}
.rsv-hoja .b:disabled{opacity:.4;cursor:default}
.rsv-resumen{margin-right:auto;align-self:center;font-size:var(--fs-sm);color:var(--text2)}
.rsv-resumen b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--text)}

/* la hoja «Preparar…» (V2, spec 2026-09-28-gaviones-ventas-unica.md): calcada de «Reservar…»
   (reutiliza .rsv-med/.rsv-fila/.rsv-lin/.rsv-parte/.rsv-cif/.rsv-step…), agrupada por camión en
   vez de por medida, con el dibujo pequeño de cada línea y un atajo Todo/0 propio. */
.gpr-dib{flex:0 0 auto;width:44px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text2)}
.gpr-dib svg{width:100%;height:100%}
.gpr-libre{font-size:var(--fs-xs);color:var(--text2);margin-top:2px}
.gpr-libre b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--text)}
.gpr-error{font-size:var(--fs-xs);color:var(--c-prob-fg);font-weight:600;margin-top:2px}
.gpr-cerrada{opacity:.65}
.gpr-atajos-fila{display:flex;gap:4px}
/* toque de 44 px (skill diseno-cargas): son .b-sm, que la casa deja en 36 en las filas de lista; en esta
   hoja de tablet se tocan con prisa, así que ganan con más especificidad que «.ds .b-sm» */
.gpr-atajos-fila .b.b-sm{min-height:var(--tap);padding:0 12px}
.gpr-todo-cam{margin-left:auto}
.gpr-cam .b.b-sm.gpr-todo-cam{min-height:var(--tap)}

/* Planificar los camiones (spec 2026-09-26-gaviones-planificar-camiones.md): reutiliza .cbc-cab/
   .cbc-tit-hoja/.cbc-cifras/.cbc-pie del kit de «Cuadrar con BC» (arriba) — el tablero en sí, con
   su scroll horizontal y su primera columna fija, es todo nuevo. */
.cam-hoja{background:var(--bg);width:100%;max-width:1400px;height:94vh;max-height:94vh;border-radius:16px 16px 0 0;display:flex;flex-direction:column;color:var(--text);overflow:hidden}
.cam-tit i{color:var(--c-estr-fg)!important}
.cam-cuerpo{padding:16px 18px;font-size:var(--fs-sm)}
.cam-tabla-wrap{flex:1 1 auto;overflow:auto;border-top:1px solid var(--border)}
.cam-tabla{display:flex;flex-direction:column;min-width:max-content}
.cam-fila{display:flex;border-bottom:1px solid var(--border)}
.cam-fila:last-child{border-bottom:none}
.cam-fila-cab{position:sticky;top:0;z-index:3;background:var(--surface2);border-bottom:1px solid var(--border2)}
.cam-celda{flex:0 0 180px;min-width:0;padding:10px 12px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:6px;border-right:1px dashed var(--border)}
.cam-fila:last-child .cam-celda{padding-bottom:14px}
.cam-fija{position:sticky;left:0;z-index:2;flex:0 0 230px;background:var(--bg);flex-direction:row;align-items:center;gap:10px;border-right:1px solid var(--border)}
.cam-fila-cab .cam-fija{z-index:4;background:var(--surface2)}
.cam-cab-art{color:var(--text2);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.cam-cab-add,.cam-celda-add{flex:0 0 110px;border-right:none}
.cam-art-dib{flex:0 0 44px;width:44px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text2)}
.cam-art-dib svg{width:100%;height:100%}
.cam-art-info{min-width:0}
.cam-art-nom{font-size:var(--fs-sm);font-weight:700;line-height:1.25}
.cam-art-obj{font-size:var(--fs-xs);color:var(--text2)}
.cam-art-obj b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--text)}
.cam-art-falta{font-size:var(--fs-xs);font-weight:700}
.cam-art-falta b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.cam-falta-ambar{color:var(--c-esp-fg)}
.cam-falta-roja{color:var(--c-prob-fg)}
.cam-col-cab{gap:4px;justify-content:flex-start}
/* la cabecera mide lo MISMO que las celdas de su columna (.cam-celda): el texto largo de una carga
   («23/09 · Trans Aragón · Ruta Cataluña») se corta con «…» en vez de ensanchar la columna y
   descuadrar el tablero (se lee entero al pasar por encima) */
.cam-col-fija{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* P6 · el coste del camión: una fila compacta «Coste camión [ 1200 ] €» bajo la carga */
.cam-col-coste{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 6px;font-size:var(--fs-xs);color:var(--text2)}
.cam-coste-l{grid-column:1/-1}
.cam-col-coste input{min-width:0;width:100%;min-height:36px;padding:4px 6px;text-align:right;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-sm);
  border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text)}
@media (pointer:coarse){ .cam-col-coste input{min-height:var(--tap)} }
.cam-coste-mal input{border-color:var(--c-prob-fg)}
.cam-col-otros{font-size:var(--fs-xs);color:var(--c-esp-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* el número de la parte (PV…-3) en su propia línea: es lo que identifica el camión y en 180 px
   no cabe al lado del nombre sin cortarse */
.cam-col-nom{flex-wrap:wrap;row-gap:0;min-width:0}
.cam-col-nom .cam-col-num{order:3;flex:1 0 100%}
.cam-col-nom{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:700;white-space:nowrap}
.cam-col-nom i{color:var(--text2)}
.cam-col-num{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-weight:500;color:var(--text2);font-size:var(--fs-xs)}
.cam-col-x{margin-left:auto;background:none;border:none;color:var(--text2);cursor:pointer;padding:2px;min-width:28px;min-height:28px}
.cam-col-sel{width:100%;min-height:var(--tap);font-family:inherit;font-size:var(--fs-xs);padding:4px 6px;border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text)}
.cam-col-nueva{display:flex;flex-direction:column;gap:4px}
.cam-col-nueva input,.cam-col-nueva select{min-height:var(--tap);font-family:inherit;font-size:var(--fs-xs);padding:4px 6px;border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text)}
.cam-col-fija{font-size:var(--fs-xs);color:var(--text2)}
/* B1–B3 (spec 2026-09-27-camiones-buscador-transportista.md): el transportista de una carga nueva se
   busca — los resultados son botones de toque entero (44 px), no un desplegable */
.cam-tr-res{display:flex;flex-direction:column;gap:4px}
.cam-tr-res:empty{display:none}
.cam-tr-op{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;min-height:var(--tap);padding:6px 8px;text-align:left;
  font-family:inherit;border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text);cursor:pointer}
.cam-tr-op:hover,.cam-tr-op:focus-visible{border-color:var(--c-estr-fg);background:var(--surface2)}
.cam-tr-nom{max-width:100%;font-size:var(--fs-xs);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-tr-det{font-size:var(--fs-xs);color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cam-tr-nada{font-size:var(--fs-xs);color:var(--text2);padding:2px}
.cam-tr-elegido{display:flex;flex-direction:column;align-items:stretch;gap:1px;min-width:0;padding:6px 8px 2px;border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface)}
/* el nombre elegido, entero (hasta dos líneas): cortado a «Transpo…» no se sabe a quién se ha elegido */
.cam-tr-elegido .cam-tr-nom{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cam-tr-cambiar{text-align:left;margin-top:2px}
.cam-col-barra{height:8px;border-radius:99px;overflow:hidden;background:var(--surface2);border:1px solid var(--border)}
.cam-col-barra-fill{height:100%;border-radius:99px}
.cam-b-verde{background:var(--c-ok-fg)}
.cam-b-ambar{background:var(--c-esp-fg)}
.cam-b-roja{background:var(--c-prob-fg)}
.cam-col-kg{font-size:var(--fs-xs);color:var(--text2)}
.cam-col-gav{font-size:var(--fs-xs);color:var(--text2)}
.cam-col-cerrada{background:var(--surface2)}
.cam-col-chip{align-self:flex-start;margin-top:2px}
.cam-step{display:flex;align-items:center;gap:4px}
.cam-step .b{min-width:var(--tap);min-height:var(--tap);padding:0;justify-content:center}
.cam-step input{width:48px;min-width:0;min-height:var(--tap);text-align:center;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-md);font-weight:700;
  border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text)}
.cam-hoja .b:disabled{opacity:.4;cursor:default}
/* Reparto › Leroy: «Crear en BC» con avisos rojos está desactivado y tiene que PARECERLO */
#view-leroy .b:disabled{opacity:.4;cursor:default}
.cam-todo{display:block;width:100%;background:none;border:none;padding:2px 0;font-family:inherit;font-size:var(--fs-xs);font-weight:700;color:var(--c-estr-fg);cursor:pointer;text-align:center}
@media (pointer:coarse){ .cam-todo{min-height:32px} }
.cam-celda-ro{align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-weight:700;color:var(--text2)}
/* R1 (spec 2026-09-26-camiones-remanente.md): «Sin camión», el remanente — la columna de la que se
   montan los camiones. Color de «espera» (lo que aún no tiene camión, como el tramo de la bandeja en
   la obra); en rojo solo si sobra (el cliente lo quitó en BC y va en camiones). */
.cam-rem{background:var(--c-esp-bg)}
.cam-fila-cab .cam-rem{background:var(--c-esp-bg);box-shadow:inset 0 3px 0 var(--c-esp-fg)}
.cam-rem .cam-col-nom i{color:var(--c-esp-fg)}
.cam-celda-ro.cam-rem{font-size:var(--fs-md)}
.cam-rem-hay{color:var(--c-esp-fg)}
.cam-rem-sobra{color:var(--c-prob-fg)}
.cam-rem-montar{width:100%;justify-content:center;margin-top:2px}
.cam-pie{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 18px 16px;border-top:1px solid var(--border)}
.cam-pie-info{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:3px}
.cam-resumen{font-size:var(--fs-sm)}
.cam-resumen b{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--text)}
.cam-aviso{font-size:var(--fs-xs);color:var(--c-esp-fg)}
.cam-aviso-bloqueo{color:var(--c-prob-fg);font-weight:700}
.cam-pie-btns{display:flex;gap:8px;margin-left:auto}
@media (max-width:600px){ .cam-hoja{height:100vh;max-height:100vh;border-radius:0;max-width:100%} .cam-celda{flex-basis:172px} .cam-fija{flex-basis:120px} .cam-art-dib{display:none} }

/* ═══ Tanda 2 (1-oct-2026) · Planta y Preparación: el dedo y los sustos ═══════════════════════════
   (VA ANTES del kit «ds»: test-front-ds exige que TODO lo que sigue a su comentario cuelgue de .ds)
   Spec 2026-10-01-tanda2-dedo-y-sustos.md. Tablets de la nave: un iPad y el resto Android, con la app
   instalada. Lo de «solo táctil» va con (pointer:coarse) y lo de ratón con (hover:hover): en el PC no cambia nada. */

/* D4 · pantallas de la NAVE a --tap-planta (52 px: se tocan con guantes). Modo preparación y las hojas de
   abajo de Planta (.acc-panel: línea, avisos, nota, «Cambiar pedido»…). Los controles no llevan min-height
   en línea, así que esto gana sin !important. Los .acc-btn ya traen sus 56. */
#modo-prep-ov button,#modo-prep-ov select,#modo-prep-ov input:not([type=checkbox]):not([type=radio]){min-height:var(--tap-planta)}
.acc-panel button:not(.acc-btn),.acc-panel select,.acc-panel input:not([type=checkbox]):not([type=radio]){min-height:var(--tap-planta)}
.tap-planta,#planta-content .tap-tact{min-height:var(--tap-planta)}

/* D4 · el resto de la app (Lista de Preparación, cabecera, orden del tablón): 44 px SOLO con el dedo */
@media (pointer:coarse){
  .tap-tact{min-height:var(--tap)}
  .ds .b.b-sm.tap-tact{min-height:var(--tap)}   /* «.ds .b-sm» fija 36 con dos clases; esta lleva cuatro */
  .tb-btn{min-height:var(--tap)}
  .tb-cerrar-sesion{margin:0 10px}   /* hueco a los lados: que no se pulse por rozar el botón de al lado */
  .tb-seg button{min-height:var(--tap)}
}

/* D5 · iPad: Safari acerca la pantalla al tocar una casilla con letra menor de 16 px. !important porque las
   casillas de Modo preparación y de las hojas llevan su font-size en línea. Solo táctil: en el PC no cambia. */
@media (pointer:coarse){
  #modo-prep-ov input,#modo-prep-ov select,#modo-prep-ov textarea,
  .acc-panel input:not(.in-grande),.acc-panel select,.acc-panel textarea{font-size:16px!important}   /* .in-grande: las cifras de «Cambiar pedido» van a 20 px; el !important las encogía a 16 */
  .tj-in,.tj-linea-ctrl select,.hst-buscar input{font-size:16px}
}

/* D6 · «se nota que el toque entró»: un apretón al pulsar las tarjetas y botones grandes de Planta y
   Preparación. Con «reducir movimiento» no hay escala, solo un oscurecido. */
.pl-tolva:active,.pl-nav-btn:active,.pl-llega-card:active,.pl-fila:active,.acc-btn:active,.tj-linea:active,.prow:active,.pl-btn:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){
  .pl-tolva:active,.pl-nav-btn:active,.pl-llega-card:active,.pl-fila:active,.acc-btn:active,.tj-linea:active,.prow:active,.pl-btn:active{transform:none;filter:brightness(.94)}
}

/* D7 · lo que se desliza dentro de una hoja no arrastra la página de detrás */
.dlg-hoja,.dlg-modal,.modal-body,.tb-hoja-body,#modo-prep-scroll{overscroll-behavior:contain}

/* Selectores con buscador de Reparto (spec 2026-10-08-reparto-desplegables-con-buscador.md): el panel, el
   select escondido y los matices del botón. Solo tokens. El select nativo sigue en el DOM porque los
   formularios leen su .value: se esconde fuera de la vista, no con display:none (que lo sacaría del foco
   y de algunos lectores de pantalla); los !important son para ganar a los min-height/width de las clases
   que ya llevaba (.ds .ctl, .cc-sel…). */
.sb-oculto{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:-1px!important;
  padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;opacity:0!important;pointer-events:none!important}
.sb-btn[hidden]{display:none}
.sb-btn:disabled{opacity:.6;cursor:not-allowed}
.sb-btn:focus-visible{outline:none;border-color:var(--blue);box-shadow:var(--ring)}
.sb-txt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-chev{flex:0 0 auto;color:var(--text2);font-size:var(--fs-sm);line-height:1}
/* dentro de un formulario de hoja (.field) el select iba a todo el ancho con su relleno propio */
.field .sb-btn{width:100%;padding:8px 11px;background:var(--surface2);color:var(--text);font-family:inherit;font-size:var(--fs-xs)}
.field .sb-btn:focus-visible{background:var(--surface)}
.sb-pop{position:fixed;z-index:11060;display:flex;flex-direction:column;box-sizing:border-box;background:var(--surface);color:var(--text);
  border:1px solid var(--border2);border-radius:var(--rd);box-shadow:var(--sh-float);overflow:hidden;font-family:inherit;font-size:var(--fs-sm)}
.sb-q{flex:0 0 auto;box-sizing:border-box;width:100%;min-height:var(--tap);padding:8px 12px;border:0;border-bottom:1px solid var(--border);
  border-radius:0;background:var(--surface);color:var(--text);font-family:inherit;font-size:var(--fs-md);outline:none}
.sb-q:focus{border-bottom-color:var(--c-estr-fg)}
/* position:relative: el offsetTop de cada fila se mide desde la lista y no desde el panel (el desplazamiento a la fila activa lo necesita) */
.sb-lista{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px;overscroll-behavior:contain}
.sb-opt{display:flex;align-items:center;min-height:var(--tap);box-sizing:border-box;padding:6px 10px;border-radius:var(--rd-sm);
  cursor:pointer;line-height:1.3;overflow-wrap:anywhere}
.sb-opt.sb-act{background:var(--surface2)}
.sb-opt.sb-sel{background:var(--c-estr-bg);color:var(--c-estr-fg);font-weight:600}
.sb-opt.sb-sel.sb-act{box-shadow:inset 0 0 0 1px var(--c-estr-ln)}
.sb-opt.sb-esp{color:var(--c-estr-fg)}
.sb-opt.sb-off{color:var(--text3);cursor:not-allowed}
.sb-grupo{padding:8px 10px 2px;font-size:var(--fs-xs);font-weight:600;color:var(--text2)}
.sb-vacio{padding:12px 10px;font-size:var(--fs-sm);color:var(--text2)}
.sb-sep{height:1px;margin:4px 0;background:var(--border)}
/* pantalla estrecha: hoja inferior a todo el ancho (el dedo alcanza abajo; la lista no queda tapada por el teclado de arriba) */
.sb-pop.sb-hoja{left:0;right:0;bottom:0;top:auto;width:auto;max-height:70vh;border-radius:var(--rd) var(--rd) 0 0;border-bottom:0;
  padding-bottom:env(safe-area-inset-bottom)}

/* ── Kit de diseño «ds» — piloto 19-sep-2026, spec 2026-09-19-reestructura-piloto-historial.md ──
   Una vista se «migra» añadiendo la clase `ds` a su <div class="view">: todo lo de aquí abajo
   vive bajo `.ds`, el mismo truco que `.crmx` (crm.css) o `.gvx` (gav-app.css), así que una vista
   que NO lleve `ds` no puede cambiar ni un pixel. Empieza por Reparto › Historial y crece vista a
   vista con lo que cada una vaya necesitando — nada de mudar todo el marcado de golpe. Los
   diálogos (p.ej. #pregunta-ov) cuelgan de <body>, fuera del .view migrado, así que llevan su
   propia clase `ds` encima. */

/* Botones (skill diseno-cargas §3): copiados TAL CUAL de .crmx en crm.css — mismo sistema en las
   dos pieles, duplicado consciente de 8 reglas que se funde cuando todo esté migrado a `.ds`. */
.ds .b{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--tap);
  padding:10px 18px;border-radius:var(--rd-sm);border:1px solid transparent;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:var(--fs-sm);font-weight:700;text-decoration:none;
  box-sizing:border-box;transition:filter .12s,background .12s}
.ds .b:hover{filter:brightness(.97)}
.ds .b-cta{background:var(--c-estr-btn);color:#fff}
.ds .b-sec{background:var(--surface);border-color:var(--border2);color:var(--text)}
.ds .b-gh{background:none;border-color:transparent;color:var(--text2)}
.ds .b-sm{min-height:36px;padding:6px 12px;font-size:var(--fs-xs)}
.ds .b-xl{min-height:var(--tap-planta);padding:14px 22px;font-size:var(--fs-lg)}
/* acción destructiva: SOLO dentro de un diálogo (Borrar, Restaurar…) — suelta en una pantalla
   competiría con el único CTA índigo que debe haber por tarjeta. */
.ds .b-pel{background:var(--c-prob-btn);color:#fff}
.ds .b-gh.es-pel{color:var(--c-prob-fg)}

/* Cabecera de vista: título+subtítulo a la izquierda, acciones (buscador/filtros/botones) a la
   derecha, y todo se apila en una columna cuando no cabe (móvil). */
.ds .vista-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  flex-wrap:wrap;margin-bottom:14px}
.ds .vista-tit{font-size:var(--fs-lg);font-weight:600;color:var(--text)}
.ds .vista-sub{font-size:var(--fs-xs);color:var(--text2);margin-top:2px}
.ds .vista-acc{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Controles de formulario (buscador, selects de filtro): un solo aspecto para toda la vista. */
.ds .ctl{min-height:var(--tap);padding:8px 11px;border:1px solid var(--border2);
  border-radius:var(--rd-sm);background:var(--surface);color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:var(--fs-sm)}
/* Control DENTRO de una fila de lista, a la misma altura que el .b-sm que lleva al lado (36 px).
   Los 44 px de la casa son para la acción de una pantalla; una fecha metida en una fila junto a
   dos botones pequeños no puede medir más que ellos sin desmontar la fila. */
.ds .ctl-sm{min-height:36px;padding:5px 8px;font-size:var(--fs-xs)}
/* Enlace dentro de una frase («… · cambiar», «lo llevan estos proveedores»). Es un BOTÓN, así que
   se puede tocar, pero no puede medir 44 px sin partir el renglón en el que vive: se le da el
   relleno que cabe (26 px de alto) y se subraya, que es lo que dice que se puede pulsar. Para una
   acción de verdad está .b; esto es para los «cambiar» de una línea de texto. */
.ds .enlace{background:none;border:none;color:var(--c-curso-fg);font-size:var(--fs-xs);
  text-decoration:underline;cursor:pointer;padding:5px 6px;min-height:26px;font-family:inherit}
.ds .enlace:hover{color:var(--c-estr-fg);background:var(--surface2);border-radius:var(--rd-sm)}
/* el icono grande de los dos carriles de soltar del Panel de compras: es un DIBUJO, no letra —
   por eso lleva su tamaño aquí y no una clase de la escala tipográfica */
.ds .cp-icono{font-size:30px;line-height:1}
/* el contador rojo que va pegado al nombre de una sub-pestaña de Compras («Por pedir 5») */
.ds .csub-n{background:var(--c-prob-bg);color:var(--c-prob-fg);padding:0 6px;
  border-radius:8px;font-size:var(--fs-xs);margin-left:2px;font-weight:700}
/* El segmentado Portes/Facturas usaba el índigo de LETRA como fondo con blanco encima: 3,81 en
   tema oscuro. Fuera de .ds se queda como estaba — es el mismo trato que el resto de piezas
   compartidas con vistas sin migrar. */
.ds .tb-vista button.on{background:var(--c-estr-btn)}
/* Tira que se desliza de lado (las pestañas de carga de Planificación): a diferencia de .linea NO
   envuelve, porque aquí lo que se quiere es arrastrarla, no que rompa en varias filas. */
.ds .tira{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;align-items:center}
/* los dos iconos de los filtros de Pedidos BC iban a 10,5 px, por debajo del suelo de la casa */
.ds .filter-btn i{font-size:var(--fs-xs)}
/* el «+» grande del botón de crear la primera carga: es un DIBUJO, no letra */
.ds .nc-icono{font-size:22px;opacity:.4;line-height:1}
/* «Todos» activo usaba el azul de LETRA como fondo con blanco encima: 3,08 en tema oscuro.
   Es la séptima vez que aparece el mismo fallo; fuera de .ds no se toca. */
.ds .filter-btn.active-all{background:var(--c-curso-btn);border-color:var(--c-curso-btn)}

/* ── La tarjeta de pedido de Planificación, al suelo de letra (decisión del dueño, 20-sep) ──
   Estaba escrita entera entre 10,5 y 11 px, por debajo de los 12,5 de la casa. Él eligió subirla
   sabiendo el precio: la tarjeta crece unos milímetros y caben uno o dos pedidos menos sin bajar
   la rueda. Se acota a `.pcard` y al panel de Pedidos BC — `.filter-btn` y `.ico` se usan también
   en otras pantallas y NO se tocan ahí. */
.ds .pc-num,.ds .pc-dest,.ds .pc-kg,.ds .pc-porte,.ds .pc-acarga,.ds .pc-ubic,
.ds .pcard .prep-toggle{font-size:var(--fs-xs)}
.ds .panel-title,.ds .panel-filter .filter-btn{font-size:var(--fs-xs)}
/* Los iconos de acción de una fila (`.ico`) median 20×25: cuatro milímetros, con «eliminar»
   pegado a «editar». El dueño decidió subirlos a 28 en la tarjeta de pedido; la MISMA clase y el
   MISMO defecto están en Transportistas, Categorías y Clientes auto, así que se aplica a todas
   las vistas migradas. El dibujo no cambia de tamaño: lo que crece es el área de toque.
   Fuera de `.ds` (el panel de Planta) no se toca. */
.ds .ico{min-height:28px;min-width:28px}

/* Cifras: SIEMPRE DM Mono con tabular-nums, para que columnas de números cuadren en vertical. */
.ds .num{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}

/* Puesta al día de clases viejas, SOLO dentro de `.ds` — fuera de aquí siguen exactamente como
   estaban: una vista sin migrar no puede cambiar ni un pixel. */
.ds .dash-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ds .dash-lbl,.ds .dash-sub{font-size:var(--fs-xs)}
.ds .dash-val{font-size:var(--fs-xl);font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.ds .badge,.ds .lc-hdr{font-size:var(--fs-xs)}
/* avisos de la cabecera de una lista (p.ej. «⚠ N sin precio» / «ordenadas por fecha desc.») */
.ds .lc-aviso{font-size:var(--fs-xs);color:var(--c-esp-fg);cursor:pointer;text-decoration:underline}
.ds .lc-nota{font-size:var(--fs-xs);color:var(--text2)}

/* Fila de lista con estado: el estado se lee en la barra de color de la izquierda (skill
   diseno-cargas §4) antes que en ninguna palabra — neutro por defecto, verde cuando `.es-ok`. */
.ds .fila{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--border);border-left:5px solid var(--c-neu-bg)}
.ds .fila-cuerpo{flex:1;min-width:220px}
.ds .fila-tit{font-size:var(--fs-md);font-weight:600}
.ds .fila-meta{font-size:var(--fs-xs);color:var(--text2);display:flex;gap:12px;flex-wrap:wrap}
.ds .fila-lado{margin-left:auto;text-align:right;min-width:150px}
.ds .eti{font-size:var(--fs-xs);color:var(--text2);text-transform:uppercase;letter-spacing:.04em}
/* .i-ok = icono que dice «hecho». (Aquí vivió `.nota`, la frase de ayuda: acabó siendo idéntica a
   `.sec` —las dos --fs-xs + --text2, porque --text3 se queda en 3,9:1 de contraste en oscuro— y
   dos nombres para lo mismo es una trampa, así que se funden en `.sec`.) */
.ds .i-ok{color:var(--c-ok-fg)}
.ds .cifra{font-size:var(--fs-lg);font-weight:700}
.ds .cod{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-xs);
  color:var(--text2);background:var(--surface2);padding:1px 6px;border-radius:4px}

/* Chip de pedido del historial: el hover por CSS sustituye a los onmouseover/onmouseout que
   antes iban en línea (cada uno tocando this.style a mano). */
.ds .hist-ped{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  font-size:var(--fs-xs);padding:4px 10px;border-radius:var(--rd);cursor:pointer;
  background:var(--surface2);color:var(--text2)}
.ds .hist-ped:hover{filter:brightness(.94)}
.ds .hist-ped.es-ok{background:var(--c-ok-bg);color:var(--c-ok-fg)}
.ds .hist-ped.es-busca{box-shadow:0 0 0 2px var(--c-esp-fg)}
/* --text2, no --text3: medido en el navegador, --text3 se queda en 4,07:1 de contraste sobre el
   fondo del chip — por debajo del 4,5:1 que hace falta para leerlo sin esfuerzo. */
.ds .hist-ped small{font-size:var(--fs-xs);color:var(--text2);font-weight:400}

/* La pregunta (ver _pregunta() en app.js): diálogo propio para las confirmaciones que antes eran
   confirm() nativo — un confirm() bloquea el hilo, no se puede maquetar y en la tablet a pantalla
   completa el cuadro del navegador sale literalmente fuera de la app. */
.ds .pg-caja{background:var(--surface);border-radius:var(--rd);box-shadow:var(--sh-float);
  width:440px;max-width:100%;padding:18px}
.ds .pg-tit{font-size:var(--fs-lg);font-weight:700}
.ds .pg-cuerpo{font-size:var(--fs-sm);color:var(--text2);margin:6px 0 4px}
.ds .pg-pie{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* Agrupación por día (adenda 1, Preparación › Entregados y su gemela de Gaviones): el título del
   día separa cada tramo de la lista, con el recuento y los kg como dato secundario al lado. */
.ds .dia{margin-bottom:16px}
.ds .dia-tit{font-size:var(--fs-md);font-weight:800;margin-bottom:8px}
.ds .dia-sub{font-size:var(--fs-xs);color:var(--text2);font-weight:500}

/* Tarjeta suelta de una lista sin columna lateral (a diferencia de `.fila`): mismo lenguaje de
   estado en el borde izquierdo (los `.es-…` van todos juntos más abajo). */
.ds .tarj{border:1px solid var(--border);border-left:5px solid var(--c-neu-bg);border-radius:var(--rd);
  padding:10px 12px;margin-bottom:8px;background:var(--surface)}
.ds .tarj-cab{display:flex;justify-content:space-between;gap:8px;align-items:center}

/* Referencia de pedido/albarán dentro de una tarjeta o fila: cifra tabular como `.num`, con el
   azul de "en curso" para que se lea como identificador y no como texto corrido. */
.ds .ref{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--c-curso-fg)}

/* Dato secundario de una tarjeta (destino, transportista, matrícula…): un escalón por debajo del
   título, sin ser la frase de ayuda que sigue siendo `.nota`. */
.ds .sec{font-size:var(--fs-xs);color:var(--text2)}

/* ── Obra grande (20-sep-2026, spec 2026-09-20-ds-ajustes-reparto-preparacion.md) ──────────────
   Lo que hacía falta para migrar Ajustes, Reparto y Preparación. Sale de contar los estilos a
   mano que había en esas vistas, no de imaginar: `font-size:var(--fs-xs)` suelto 21 veces,
   `font-size:12.5px` (que ES --fs-xs, escrito a pelo) 51, `color:var(--text2)` 48, y los
   `display:flex` de siempre. Cada clase de aquí abajo mata una de esas cuentas. */

/* Letra. `.men` es la letra menuda a secas; `.sec` le añade el gris de dato secundario; `.tit`
   es el título de una tarjeta o de un bloque (los `font-size:14px;font-weight:700` de antes). */
.ds .men{font-size:var(--fs-xs)}
.ds .tit{font-size:var(--fs-md);font-weight:700}

/* Maqueta. Sin estas tres no se pueden quitar los flex sueltos: `.linea` es la fila de cositas
   en línea, `.entre` la separa a los dos extremos y `.crece` es el hueco que se estira — su
   `min-width:0` es lo que impide que un texto largo reviente la fila (truncar necesita eso). */
.ds .linea{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ds .linea.entre{justify-content:space-between}
.ds .crece{flex:1;min-width:0}

/* Caja: el panel de siempre (Avisos, Sincronización, Business Central…). */
.ds .caja{background:var(--surface);border:1px solid var(--border);border-radius:var(--rd);padding:14px 16px}
.ds .caja-tit{font-size:var(--fs-md);font-weight:700;margin-bottom:8px}

/* Tabla (Usuarios, Auditoría, BC): cabecera en versales menudas, filas separadas por una línea
   y la última sin línea, que si no la tabla parece cortada a mitad. */
.ds .tabla{width:100%;border-collapse:collapse}
.ds .tabla th{font-size:var(--fs-xs);color:var(--text2);text-transform:uppercase;letter-spacing:.04em;
  text-align:left;font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border)}
.ds .tabla td{font-size:var(--fs-sm);padding:8px 10px;border-bottom:1px solid var(--border)}
.ds .tabla tr:last-child td{border-bottom:none}
/* Que una tabla no se salga de la pantalla en un móvil: sin esto, la columna de la derecha se
   queda cortada y no hay forma de llegar a ella (la tarjeta que la envuelve recorta). Pasaba ya
   en la v502 con la tabla de Business Central, medido a 390 px. */
.ds .tabla th,.ds .tabla td{overflow-wrap:anywhere}

/* LOS ESTADOS, EN UN SOLO SITIO. La regla es: `.es-…` sobre una FILA o una TARJETA pinta solo su
   barra de la izquierda; sobre cualquier otra cosa pinta la letra. Hay que decirlo así de explícito
   porque el color se HEREDA: un `.fila.es-esp` que además pintara letra teñiría de ámbar la fila
   entera, nombre del cliente incluido, y nadie lo vería venir. El `:not(.chip)` deja fuera al chip,
   que trae su propio color y su propio fondo. */
.ds .fila.es-ok,.ds .tarj.es-ok{border-left-color:var(--c-ok-fg)}
.ds .fila.es-esp,.ds .tarj.es-esp{border-left-color:var(--c-esp-fg)}
.ds .fila.es-prob,.ds .tarj.es-prob{border-left-color:var(--c-prob-fg)}
.ds .fila.es-bc,.ds .tarj.es-bc{border-left-color:var(--c-bc-fg)}
.ds .es-ok:not(.fila):not(.tarj):not(.chip){color:var(--c-ok-fg)}
.ds .es-esp:not(.fila):not(.tarj):not(.chip){color:var(--c-esp-fg)}
.ds .es-prob:not(.fila):not(.tarj):not(.chip){color:var(--c-prob-fg)}
.ds .es-bc:not(.fila):not(.tarj):not(.chip){color:var(--c-bc-fg)}

/* DeCA · imprimir varios de una (5-oct-2026, spec 2026-10-05-deca-imprimir-varios.md). La casilla de
   cada albarán ocupa --tap entero (la casilla en sí es pequeña: se acierta tocando su hueco), y la
   tarjeta marcada se ve de lejos con el borde índigo. La barra va pegada abajo y flota (sombra de las
   cosas que flotan): con 20 albaranes en pantalla, el botón tiene que estar siempre a mano. */
.ds .deca-marca{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);
  margin:-10px 0 -10px -8px;cursor:pointer;flex:none}
.ds .deca-marca input{width:22px;height:22px;cursor:pointer;accent-color:var(--c-estr-fg)}
/* sin tocar el borde de la izquierda: ese es el del estado (con o sin DeCA) y manda */
.ds .tarj.deca-marcada{border-top-color:var(--c-estr-ln);border-right-color:var(--c-estr-ln);border-bottom-color:var(--c-estr-ln);background:var(--c-estr-bg)}
.ds .deca-barra{position:sticky;bottom:12px;z-index:20;margin-top:12px;background:var(--surface);
  border:1px solid var(--c-estr-ln);border-radius:var(--rd);box-shadow:var(--sh-float);padding:10px 14px}
.ds .es-curso:not(.fila):not(.tarj):not(.chip){color:var(--c-curso-fg)}

/* Chip de dato (kg, porte, nº de artículos, «Ya en la app»…). Antes cada uno se escribía a mano
   con su background/color/padding/radio: seis sabores del mismo chip, cada uno con sus píxeles.
   El color lo pone el estado, igual que en las filas: nada (neutro), .es-ok, .es-esp, .es-curso,
   .es-bc. Tiene su propio nombre porque .badge (el de siempre) va en 10,5px, por debajo del
   suelo de letra de la casa. */
.ds .chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;
  padding:2px 8px;border-radius:var(--rd-sm);background:var(--surface3);color:var(--text)}
.ds .chip.es-ok{background:var(--c-ok-bg);color:var(--c-ok-fg)}
.ds .chip.es-esp{background:var(--c-esp-bg);color:var(--c-esp-fg)}
.ds .chip.es-curso{background:var(--c-curso-bg);color:var(--c-curso-fg)}
.ds .chip.es-bc{background:var(--c-bc-bg);color:var(--c-bc-fg)}

/* Fila que ya no pide nada (un pedido que ya está en la app): se apaga, no se esconde. */
.ds .apagado{opacity:.55}

/* Cajón plegable (el historial de la Bandeja BC): el resumen se lee como una etiqueta. */
.ds .plegable>summary{cursor:pointer;user-select:none;font-size:var(--fs-xs);font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text2);margin-bottom:6px}
.ds .chip.es-prob{background:var(--c-prob-bg);color:var(--c-prob-fg);border:1px solid var(--c-prob-ln)}

/* Clases de lista de siempre, puestas al suelo de letra DENTRO de las vistas migradas:
   .list-meta y .cargas-title vivían en 11px, por debajo de los 12,5 de la casa. Fuera de .ds se
   quedan como estaban — una vista sin migrar no cambia. */
.ds .list-meta,.ds .cargas-title,.ds .tf-label,
.ds .cajon-contador,.ds .cajon-carga-comp,.ds .chip-ped{font-size:var(--fs-xs)}
/* el contador de cada cajón iba gris sobre gris (3,49 medido): mismo fondo que el chip del kit */
.ds .cajon-contador{background:var(--surface3);color:var(--text)}
/* El chip de nivel de tolva llevaba el color escrito a mano en el propio HTML (el mismo que pinta
   el dibujo de la tolva), y de ahí que el blanco de encima se quedara en 3,94 y 4,17. Aquí el
   chip pasa a tokens de FONDO; el dibujo sigue con su color, que ahí no hay letra que leer. */
.ds .chip-niv{color:#fff;font-weight:800}
.ds .chip-niv-baja{background:var(--c-curso-btn)}
.ds .chip-niv-normal{background:var(--c-ok-btn)}
.ds .chip-niv-alta{background:var(--c-esp-btn)}
.ds .chip-niv-vaciando{background:var(--c-prob-btn)}
/* Las mini tolvas se comparten con el panel de Planta, que aún no está migrado: aquí dentro
   suben al suelo de 12,5 px (iban en 11,5) sin tocar cómo se ven allí. */
.ds .pl-mt-mat,.ds .pl-mt-kg{font-size:var(--fs-xs)}
/* Las pestañas SACOS/BIG BAG también se comparten con Planta. En tema oscuro el índigo de LETRA
   hace de fondo de la pestaña activa y el renglón de tolvas se quedaba en 3,05: aquí dentro la
   pestaña usa el índigo de BOTÓN y ese renglón sube a blanco. */
.ds .pl-prodtab.on{background:var(--c-estr-btn);border-color:var(--c-estr-btn)}
.ds .pl-prodtab.on small{color:#fff}
/* Dashboard de Planta: es una pantalla que se mira DE LEJOS, colgada en la nave, y tenía cinco
   rótulos en 11 px — por debajo del suelo de la casa justo donde peor sienta. Y los dos chips
   activos usaban el azul y el ámbar de LETRA como fondo con blanco encima (3,08 y 2,63). */
.ds .pdash-kgud,.ds .pdash-meta,.ds .pdash-est,.ds .pdash-stock{font-size:var(--fs-xs)}
.ds .pdash-chip.active{background:var(--c-curso-btn);border-color:var(--c-curso-btn)}
.ds .pdash-chip-saco.active{background:var(--c-esp-btn);border-color:var(--c-esp-btn)}
/* el «Nada previsto» iba en --text3 (el gris más flojo): en una pantalla de nave no se leía */
.ds .pdash-vacio{color:var(--text2)}
/* el contador de llegadas de cada día iba gris sobre gris (3,32 medido) — y es el número que se
   mira primero; y el «NO LLEGÓ», que es la alarma de la pantalla, se quedaba en 3,28 en oscuro */
.ds .pdash-col-n{background:var(--surface3);color:var(--text)}
.ds .pdash-est-no{background:var(--c-prob-btn);color:#fff}

/* Barra de pestañas DENTRO de una vista (Camión, Construcción, Compras): la tira que se desliza
   de lado en un móvil en vez de arrastrar la página entera, y la activa marcada con la raya de
   abajo. Hasta ahora cada una la escribía a mano con su propio azul y su propio tamaño. */
.ds .pestanas{display:flex;border-bottom:1px solid var(--border);margin-bottom:14px;overflow-x:auto}
.ds .pestana{flex:1;min-height:var(--tap);padding:12px 6px;border:none;background:none;
  border-bottom:2.5px solid transparent;color:var(--text2);font-weight:500;cursor:pointer;
  white-space:nowrap;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ds .pestana.on{border-bottom-color:var(--c-curso-fg);color:var(--c-curso-fg);font-weight:700}
.ds .pestana:hover{background:var(--surface2)}
/* el numerito de aviso que va pegado al nombre de una pestaña */
.ds .aviso-n{background:var(--c-prob-btn);color:#fff;border-radius:10px;padding:1px 6px;
  margin-left:1px;font-weight:700}

/* Panel OSCURO de resumen: el recuadro negro que resume el día (el «Parte de hoy» de Camión, la
   cabecera de Tolvas). Sus tres tonos ya tenían token desde que se migró Tolvas; lo que faltaba
   era la caja, para no reescribirla a mano en cada sitio. En tema claro también es oscuro a
   propósito: es un panel de control, no una tarjeta más. */
.ds .po-caja{background:var(--panel-oscuro);color:var(--panel-oscuro-fg);border-radius:12px;
  padding:14px;margin-bottom:14px}
.ds .po-fg{color:var(--panel-oscuro-fg)}
.ds .po-fg2{color:var(--panel-oscuro-fg2)}
.ds .po-cifra{font-size:var(--fs-lg);font-weight:800;color:var(--panel-oscuro-fg)}
.ds .po-linea{border-top:1px solid var(--panel-oscuro-ln);padding-top:8px}

/* Cifra suelta de un informe (Camión › Gasoil e Informe): caja pequeña con su rótulo arriba. Es
   el mismo patrón que .dash-val del Resumen, pero éstas van en fila y se pliegan. */
.ds .kpi{flex:1 1 118px;min-width:118px;background:var(--surface);border:1px solid var(--border);
  border-radius:11px;padding:9px 11px}
.ds .kpi-v{font-size:var(--fs-xl);font-weight:800;line-height:1.25;margin-top:2px}
.ds .kpi-v.apagado{font-size:var(--fs-sm)}
/* barra horizontal de reparto (por material, por destino): el ancho lo pone el dato */
.ds .barra-h{height:7px;background:var(--surface3);border-radius:4px;overflow:hidden}
.ds .barra-h>i{display:block;height:100%}
/* El número del día bajo cada barra del gráfico de 30 días. El TAMAÑO se queda como atributo del
   SVG (font-size="8.5") y no aquí, a propósito: dentro de un viewBox eso son unidades de dibujo,
   no píxeles — el SVG escala 2,4 veces, así que en pantalla se lee a unos 20 px. Ponerlo en CSS
   haría saltar (con razón) al guardián del suelo de letra, que no puede saber que escala. */
.ds .graf-dia{fill:var(--text2);font-family:'DM Sans',sans-serif}
/* tabla de cifras: todo a la derecha menos la primera columna, que es el concepto */
.ds .tabla-der th,.ds .tabla-der td{text-align:right}
.ds .tabla-der th:first-child,.ds .tabla-der td:first-child{text-align:left}
/* Las flechas de prioridad de Producir median 14 px de alto: imposible acertarles con guantes.
   Van una encima de otra, así que no pueden medir 44 cada una sin partir la fila; 26×32 deja el
   par en 52 y se pinta el fondo al tocarlas para que se note que se ha acertado. */
.ds .b-flecha{background:none;border:none;cursor:pointer;color:var(--text2);font-size:var(--fs-sm);
  line-height:1;min-height:26px;min-width:32px;border-radius:var(--rd-sm);font-family:inherit;
  display:flex;align-items:center;justify-content:center}
.ds .b-flecha:hover,.ds .b-flecha:active{background:var(--surface3);color:var(--text)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Compras › Panel (20-sep-2026). El dueño: «que la información esté clara, si hace falta que
   esté más ancho sin problema; que ocupe toda la pantalla al ancho en pc y que la información
   sea muy clara… clara, completa y bonita».
   De las tres ideas que salieron de ahí, la tercera es la que se queda: la tarjeta deja de ser
   una pila de renglones — el proveedor manda, los materiales tienen sitio, y todo lo demás baja
   a un pie con SU RÓTULO, repartido en columnas cuando cabe.
   Las otras dos (sacar el tablero de los 1.240 px del resto de la app y repartir el ancho entre
   columnas de 300) SE VAN el 21-sep-2026, tras probarlas él en su pantalla: **«habíamos hecho el
   panel de compras más ancho ocupando todo; déjalo como estaba de ancho, nos hemos pasado»**.
   O sea: el Panel vuelve a medir lo que mide el resto de la app y sus columnas vuelven a sus
   240 px fijos, con lo que el tablero vuelve a desplazarse de lado en pantallas normales — por
   eso la barra flotante de abajo sigue aquí y vuelve a tener trabajo.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.ds .cp-tablero{display:flex;gap:14px;overflow-x:auto;align-items:flex-start}
.ds .cp-normal{flex:0 0 240px;min-width:240px;background:var(--surface2);border:1px solid var(--border);
  border-radius:12px;padding:12px}
.ds .cp-plegada{flex:0 0 auto;min-width:120px;align-self:stretch;background:var(--surface2);
  border:1px solid var(--border);border-radius:12px;padding:10px;cursor:pointer}
/* las dos zonas de suelta no crecen: son un destino, no una lista */
.ds .cp-zona{flex:0 0 200px;min-width:200px;align-self:stretch;border-radius:12px;padding:16px 14px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center}
.ds .cp-zona-tolva{background:var(--c-ok-bg);border:2px dashed var(--c-ok-ln);color:var(--c-ok-fg)}
.ds .cp-zona-stock{background:var(--surface2);border:2px dashed var(--border2);color:var(--text2)}
.ds .cp-anadir{width:100%;margin-bottom:10px;border:1px dashed var(--border2);background:none;
  border-radius:8px;padding:9px;font-size:var(--fs-xs);color:var(--text2);cursor:pointer;
  font-family:inherit;min-height:36px}
.ds .cp-anadir:hover{border-color:var(--c-estr-fg);color:var(--c-estr-fg)}

/* ── la tarjeta ── */
.ds .cpc{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;margin-bottom:10px}
.ds .cpc:hover{border-color:var(--border2)}
.ds .cpc-cab{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}
/* el proveedor es lo que se busca con la vista: manda él, no el número */
.ds .cpc-prov{font-size:var(--fs-md);font-weight:700;line-height:1.25}
.ds .cpc-num{font-size:var(--fs-xs);color:var(--text2);margin-top:1px}
.ds .cpc-estado{font-size:var(--fs-xs);font-weight:700;border-radius:6px;padding:2px 8px;
  white-space:nowrap;flex:0 0 auto}
/* los materiales, con su punto y con aire: son la razón de ser del pedido, y el dueño mira el
   tablero de lejos — por eso suben de --fs-sm a la MISMA letra que el proveedor, que es donde él
   los quiere (20-sep-2026: probamos un escalón más, --fs-lg, y dijo «igual que el proveedor») */
.ds .cpc-mats{list-style:none;margin:0 0 2px;padding:0;font-size:var(--fs-md);font-weight:600;
  line-height:1.4}
.ds .cpc-mats li{position:relative;padding-left:15px}
.ds .cpc-mats li::before{content:'';position:absolute;left:3px;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--c-estr-fg)}
/* «+N más» y «Sin materiales» no son material: se quedan pequeños y apagados */
.ds .cpc-mats li.sec{font-size:var(--fs-sm);font-weight:400}
.ds .cpc-mats li.sec::before{background:var(--text2)}
.ds .cpc-kg{margin-top:8px;background:var(--c-ok-bg);color:var(--c-ok-fg);border-radius:8px;
  padding:8px 11px;font-size:var(--fs-lg);font-weight:800}
.ds .cpc-nota{margin-top:6px;font-size:var(--fs-xs);color:var(--text2);font-weight:700}
.ds .cpc-aviso-ok{margin-top:8px;font-size:var(--fs-xs);background:var(--c-ok-bg);
  color:var(--c-ok-fg);border-radius:7px;padding:6px 10px;font-weight:700;display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}

/* El pie de datos: cada cosa con su rótulo encima, para que se sepa QUÉ es cada número. Se
   reparte en columnas solas según el ancho que tenga la tarjeta — esto es lo que convierte
   cuatro renglones apilados en una o dos líneas legibles. */
.ds .cpc-pie{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px 14px;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--border)}
.ds .cpc-dato{min-width:0}
.ds .cpc-k{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text2)}
.ds .cpc-v{display:block;font-size:var(--fs-xs);color:var(--text);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El transporte se lee de un vistazo: transportista y matrícula un punto más grandes y, como
   caben peor que una fecha, se les deja partir en dos renglones en vez de cortarse en «…» —
   agrandar la letra y luego esconder media matrícula sería el remedio peor que la enfermedad. */
.ds .cpc-v-trans{font-size:var(--fs-sm);white-space:normal;overflow:visible}
.ds .cpc-matri{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-weight:700}
.ds .cpc-fmt{font-size:var(--fs-xs);font-weight:700;border-radius:6px;padding:1px 7px}
.ds .cpc-acciones{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.ds .cpc-recibir{color:var(--c-ok-fg);border-color:var(--c-ok-ln)}
.ds .cpc-borrar{margin-left:auto;color:var(--c-prob-fg)}

/* En una tablet o un móvil el tablero vuelve a ser una tira que se desliza, con las columnas a
   su ancho de siempre: repartir el ancho solo tiene sentido cuando hay ancho que repartir. */
/* La barra flotante solo sale cuando las zonas de verdad no se ven (ver _cpBarraFija).
   El `pointer-events:none` está para que no tape ni bloquee lo que hay debajo mientras trabajas —
   pero así la barra ANUNCIABA «A tolva» y el ratón la atravesaba: medido, en el centro de la
   pastilla se le daba al botón de la tarjeta de detrás, y lo que soltabas encima caía en lo que
   hubiera ahí, no en la zona anunciada. Solución: se vuelve tocable SOLO mientras se arrastra
   (la clase se la ponen _cpDragStart/_cpDragEnd), que es justo cuando tiene que recoger. */
.ds.cp-flotante{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:10050;
  display:flex;gap:10px;pointer-events:none;filter:drop-shadow(0 5px 16px rgba(0,0,0,.25))}
.ds.cp-flotante-viva,.ds.cp-flotante-viva .cp-flot{pointer-events:auto}
/* y que se note cuál va a recoger, igual que en las columnas de verdad */
.ds .cp-flot.cp-over{outline:2px dashed var(--c-curso-fg);outline-offset:-2px;
  background:var(--c-curso-bg)}
.ds .cp-flot{display:flex;align-items:center;gap:8px;border-radius:12px;padding:10px 18px;
  font-size:var(--fs-sm);font-weight:700;border:2px dashed}
.ds .cp-flot i{font-size:20px}
.ds .cp-flot-tolva{background:var(--c-ok-bg);color:var(--c-ok-fg);border-color:var(--c-ok-ln)}
.ds .cp-flot-stock{background:var(--surface);color:var(--text);border-color:var(--border2)}
@media (max-width:900px){
  .ds .cpc-pie{grid-template-columns:1fr 1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   GAVIONES · MUELLE DE CARGA — «A cargar» (27-sep-2026, spec 2026-09-27-gaviones-muelle-de-
   carga.md). Tablet del palista: botones de --tap-planta, cifras enormes, el estado SIEMPRE en
   la barra de la izquierda (skill diseno-cargas §4). Calcado de la maqueta aprobada por el
   dueño (specs/2026-09-27-gaviones-muelle-maqueta.html) con los tokens de la app — los colores
   de PRODUCTO (gris/rojo/forna/blanco) son --gv-* de gav-app.css, que .ds no toca.
   Prefijo .mu- + `.ds` por delante: el modo carga cuelga de <body> (fuera del .view migrado),
   así que lleva su propia clase `ds` encima, igual que cualquier otro diálogo del kit. ═══════ */

/* resumen del día */
.ds .mu-dia{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ds .mu-dia .k{background:var(--surface);border:1px solid var(--border);border-radius:var(--rd);
  padding:10px 14px;min-width:120px}
.ds .mu-dia .k .n{font-size:var(--fs-2xl);font-weight:700}
.ds .mu-dia .k .t{font-size:var(--fs-xs);color:var(--text2)}
.ds .mu-dia .k.es-ok .n{color:var(--c-ok-fg)}
.ds .mu-dia .k.es-curso .n{color:var(--c-curso-fg)}
.ds .mu-dia .k.es-esp .n{color:var(--c-esp-fg)}
.ds .mu-dia .k.es-prob .n{color:var(--c-prob-fg)}

.ds .mu-sec-tit{font-size:var(--fs-xl);font-weight:700;margin:18px 0 2px}
.ds .mu-sec-sub{color:var(--text2);font-size:var(--fs-sm);margin-bottom:12px}
.ds .mu-vacio{color:var(--text2);font-size:var(--fs-sm);padding:10px 2px 18px}
/* E6: un día de «Próximos días» (el día escrito y cuántos camiones) */
.ds .mu-dia-tit{font-size:var(--fs-md);font-weight:700;color:var(--text2);margin:14px 0 8px}

/* tarjetas de camión */
.ds .mu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(520px,1fr));gap:14px}
.ds .mu-card{background:var(--surface);border:1px solid var(--border);border-left:6px solid var(--c-neu-bg);
  border-radius:var(--rd);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.ds .mu-card.es-ok{border-left-color:var(--c-ok-fg)}
.ds .mu-card.es-curso{border-left-color:var(--c-curso-fg)}
.ds .mu-card.es-esp{border-left-color:var(--c-esp-fg)}
.ds .mu-card.es-prob{border-left-color:var(--c-prob-fg)}
/* el estado de la tarjeta va en la barra de la izquierda y en el chip, no en el texto: la regla
   general `.ds .es-*` teñía de rojo hasta un eje que va bien (6.281 de 7.500) en un camión que no
   cabe. Mismo selector que aquella + la clase de la tarjeta, para ganarle sin !important. */
.ds .mu-card.es-ok:not(.fila):not(.tarj):not(.chip),.ds .mu-card.es-curso:not(.fila):not(.tarj):not(.chip),
.ds .mu-card.es-esp:not(.fila):not(.tarj):not(.chip),.ds .mu-card.es-prob:not(.fila):not(.tarj):not(.chip){color:var(--text)}
.ds .mu-cab{display:flex;align-items:flex-start;gap:12px}
.ds .mu-quien{flex:1;min-width:0}
.ds .mu-n1{font-size:var(--fs-xs);color:var(--text2);font-weight:700;letter-spacing:.04em}
.ds .mu-n2{font-size:var(--fs-lg);font-weight:700}
.ds .mu-n3{font-size:var(--fs-sm);color:var(--text2)}

/* la matrícula como la placa de verdad: se reconoce de lejos */
.ds .mu-placas{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ds .mu-placa{display:inline-flex;align-items:stretch;border:2px solid var(--text);border-radius:6px;
  overflow:hidden;background:var(--surface)}
.ds .mu-placa i{background:var(--c-curso-fg);color:var(--surface);font-style:normal;font-size:var(--fs-xs);
  font-weight:700;padding:2px 5px;display:flex;align-items:flex-end}
.ds .mu-placa span{font-family:'DM Mono',monospace;font-size:var(--fs-xl);font-weight:500;padding:2px 10px;
  letter-spacing:.06em;color:var(--text)}
.ds .mu-placa.falta{border-style:dashed;border-color:var(--c-esp-fg)}
.ds .mu-placa.falta span{color:var(--c-esp-fg);font-size:var(--fs-sm);font-family:'DM Sans',sans-serif;
  letter-spacing:0;padding:6px 10px}
.ds .mu-tel{font-size:var(--fs-sm);color:var(--c-estr-fg);font-weight:700;text-decoration:none}

.ds .mu-svg{display:block;width:100%;height:auto}

/* E2 (spec 2026-09-27-gaviones-muelle-de-carga.md): la guía del reparto — cuánto va en la mitad de
   delante y en la de detrás; ámbar si una mitad lleva mucho más que la otra (una guía, no una multa) */
.ds .mu-reparto{border:1px solid var(--border);border-radius:var(--rd-sm);padding:8px 12px;background:var(--surface2)}
.ds .mu-reparto .t{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-xs);color:var(--text2)}
.ds .mu-reparto .v{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-lg);font-weight:700}
.ds .mu-reparto .v small{font-size:var(--fs-sm);color:var(--text2);font-weight:500}
.ds .mu-reparto .barra{display:flex;gap:3px;height:10px;margin-top:6px}
.ds .mu-reparto .barra b{display:block;height:100%;border-radius:5px;background:var(--c-curso-fg)}
.ds .mu-reparto .barra b + b{background:var(--c-curso-ln)}
.ds .mu-reparto.es-esp{border-color:var(--c-esp-ln);background:var(--c-esp-bg)}
.ds .mu-reparto.es-esp .barra b{background:var(--c-esp-fg)}
.ds .mu-reparto.es-esp .barra b + b{background:var(--c-esp-ln)}
.ds .mu-piezas{display:flex;gap:6px;flex-wrap:wrap}
.ds .mu-otros{font-size:var(--fs-sm);color:var(--text2)}
.ds .mu-otros b{color:var(--text)}
/* modo carga: lo que no es gavión (piedra, malla suelta) se marca entero, una fila por artículo */
.ds .mu-otro-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:var(--rd);padding:10px 12px;background:var(--surface)}
.ds .mu-otro-que{font-size:var(--fs-xl);font-weight:700}
/* E10b (28-sep-2026): «Además lleva» siempre a la vista en el modo carga; lo ya cargado, con la barra verde */
.ds .mu-ademas{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.ds .mu-ademas .mu-otro-que{font-size:var(--fs-lg)}
.ds .mu-otro-fila.hecho{border-left:5px solid var(--c-ok-fg)}
.ds .mu-pz{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  border-radius:var(--rd-sm);padding:4px 8px;font-size:var(--fs-sm)}
.ds .mu-pz .cuad{width:14px;height:14px;border-radius:3px;border:1px solid var(--gv-borde);flex:0 0 auto}

.ds .mu-aviso{border-radius:var(--rd-sm);padding:8px 12px;font-size:var(--fs-sm)}
.ds .mu-aviso.es-prob{background:var(--c-prob-bg);color:var(--c-prob-fg);border:1px solid var(--c-prob-ln)}
.ds .mu-aviso.es-esp{background:var(--c-esp-bg);color:var(--c-esp-fg);border:1px solid var(--c-esp-ln)}
.ds .mu-aviso.es-ok{background:var(--c-ok-bg);color:var(--c-ok-fg);border:1px solid var(--c-ok-ln)}

.ds .mu-pie{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ds .mu-pie > .b{margin-left:auto}   /* si la línea de kilos no deja sitio y baja, el botón sigue a la derecha */
.ds .mu-kg{font-size:var(--fs-sm);color:var(--text2)}
.ds .mu-kg b{color:var(--text);font-size:var(--fs-md)}
.ds .mu-prog-mini{height:8px;border-radius:4px;background:var(--c-neu-bg);overflow:hidden}
.ds .mu-prog-mini b{display:block;height:100%;background:var(--c-curso-fg)}

/* ── modo carga (pantalla completa, la tablet del palista en la pala) ── */
/* z-index:10000 — por ENCIMA de la topbar/chrome (9000/9999) pero por DEBAJO de cualquier hoja
   flotante (10050+: «Lo he puesto en otro sitio…», «Ver qué falta», Parámetros de carga…), que
   tienen que verse SOBRE el modo carga, no debajo (con 10097 quedaban tapadas: incidente real,
   visto en Playwright — la hoja se creaba pero no se veía). */
.ds .mu-modo{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;
  flex-direction:column;overflow:hidden}
.ds .mu-modo-hd{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--border);
  background:var(--surface);flex-wrap:wrap}
.ds .mu-modo-hd .sp{flex:1;min-width:0}
.ds .mu-modo-tit{font-weight:700;font-size:var(--fs-md)}
.ds .mu-modo-sub{font-size:var(--fs-sm);color:var(--text2)}
.ds .mu-modo-prog{min-width:200px}
.ds .mu-cerrar{min-height:var(--tap-planta);min-width:var(--tap-planta);border-radius:var(--rd-sm);
  border:1px solid var(--border2);background:var(--surface);color:var(--text2);font-size:20px;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.ds .mu-modo-body{flex:1;min-height:0;display:grid;grid-template-columns:1.55fr 1fr;overflow:hidden}
.ds .mu-modo-plano{padding:14px 16px;overflow-y:auto;border-right:1px solid var(--border)}
.ds .mu-modo-plano-tit{font-weight:700;margin-bottom:8px;font-size:var(--fs-sm)}
.ds .mu-modo-ahora{padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--surface2);
  overflow-y:auto}
.ds .mu-et{font-size:var(--fs-sm);font-weight:800;letter-spacing:.08em;color:var(--c-estr-fg)}
.ds .mu-que{font-size:var(--fs-3xl);font-weight:800;line-height:1.1}
/* la forma del «AHORA» (spec de ángulos): grande, que se lea desde la carretilla */
.ds .mu-que-forma{margin-top:6px;line-height:1}
.ds .mu-que-forma .gv-forma{font-size:var(--fs-lg);padding:4px 14px}
.ds .mu-donde{font-size:var(--fs-lg);color:var(--text2)}
.ds .mu-peso{font-size:var(--fs-lg);color:var(--text2);margin-top:-6px}
.ds .mu-peso b{color:var(--text)}
.ds .mu-contador{display:flex;align-items:center;gap:10px}
.ds .mu-contador .cifra{flex:1;text-align:center}
.ds .mu-contador .cifra .num{font-size:var(--fs-3xl);font-weight:700}
.ds .mu-contador .cifra div{font-size:var(--fs-sm);color:var(--text2)}
.ds .mu-luego{font-size:var(--fs-sm);color:var(--text2);border-top:1px dashed var(--border2);padding-top:10px}
.ds .mu-luego b{color:var(--text)}
.ds .mu-prog{height:12px;border-radius:6px;background:var(--c-neu-bg);overflow:hidden}
.ds .mu-prog b{display:block;height:100%;background:var(--c-curso-fg)}
.ds .mu-leyenda{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text2);margin-top:8px}
.ds .mu-leyenda span{display:inline-flex;align-items:center;gap:6px}
.ds .mu-leyenda i{width:14px;height:14px;border-radius:3px;display:inline-block;flex:0 0 auto}

/* parámetros de carga (admin) */
.ds .mu-param-grupo{font-size:var(--fs-xs);font-weight:700;color:var(--text2);text-transform:uppercase;
  letter-spacing:.05em;margin:14px 0 6px}
.ds .mu-param-nota{background:var(--c-estr-bg);border:1px dashed var(--c-estr-ln);color:var(--text);
  border-radius:var(--rd);padding:10px 14px;font-size:var(--fs-sm);margin-bottom:12px}

@media (max-width:900px){
  .ds .mu-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ds .mu-modo-body{grid-template-columns:1fr;overflow-y:auto}
  .ds .mu-modo-plano{border-right:0;border-bottom:1px solid var(--border);overflow-y:visible}
}

/* ── COSTES (4-oct-2026, spec 2026-10-04-costes-en-cargas.md) ─────────────────────────────────────
   Lo usa mucho el padre del dueño, de ordenador de mesa y viniendo de Excel: la tabla se lee como una
   hoja (cabecera que no se va al bajar, cifras a la derecha en DM Mono, filas con zebra) y las cifras
   que importan —el coste por unidad y por kg— salen grandes. Todo con tokens; a menos de 760 px se
   esconden las columnas de apoyo para que el móvil no tenga scroll lateral. */
.ds .cst-barra{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.ds .cst-buscar{flex:1 1 300px;min-width:0;font-size:var(--fs-lg)}
.ds .cst-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ds .cst-chip{min-height:var(--tap);padding:8px 16px;border:1px solid var(--border2);background:var(--surface);
  color:var(--text);border-radius:var(--rd-pill);font-size:var(--fs-sm);cursor:pointer;font-family:inherit}
.ds .cst-chip.on{background:var(--c-estr-btn);border-color:var(--c-estr-btn);color:#fff}
.ds .cst-caja{overflow:auto;max-height:calc(100vh - 300px);border:1px solid var(--border);border-radius:var(--rd);background:var(--surface)}
.ds .cst-caja-sub{max-height:none;margin:4px 0 8px}
.ds .cst-tabla{width:100%;border-collapse:separate;border-spacing:0}
.ds .cst-tabla th{position:sticky;top:0;z-index:1;background:var(--surface2);text-align:left;font-size:var(--fs-xs);
  font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;
  border-bottom:2px solid var(--border2);white-space:nowrap}
.ds .cst-tabla td{font-size:var(--fs-md);padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top;overflow-wrap:anywhere}
.ds .cst-tabla tbody tr:nth-child(even) td{background:var(--surface2)}
.ds .cst-tabla .d{text-align:right;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.ds .cst-tabla td .sec,.ds .cst-tabla th.d{font-family:'DM Sans',sans-serif}
.ds .cst-tabla tr.cst-fila{cursor:pointer}
.ds .cst-tabla tr.cst-fila:hover td,.ds .cst-tabla tr.cst-fila:focus td{background:var(--c-curso-bg);outline:none}
.ds .cst-cifra{font-size:var(--fs-lg);font-weight:700}
.ds .cst-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:0 0 14px}
.ds .cst-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--rd);padding:12px 16px}
.ds .cst-grande{font-size:var(--fs-2xl);font-weight:800;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;line-height:1.25;margin:2px 0}
.ds .cst-ref{color:var(--text2)}
.ds .cst-rep{display:grid;grid-template-columns:minmax(110px,170px) 1fr minmax(120px,auto);gap:12px;align-items:center;padding:5px 0}
.ds .cst-rep-n{font-size:var(--fs-md);font-weight:600}
.ds .cst-rep-b{height:12px}
.ds .cst-rep-v{text-align:right;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-md)}
.ds .cst-tipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:0 0 14px}
.ds .cst-tipo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px 14px;cursor:pointer;
  font-family:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--c-ok-fg);border-radius:var(--rd)}
.ds .cst-tipo.hay{border-left-color:var(--c-prob-fg)}
.ds .cst-tipo.on{box-shadow:0 0 0 2px var(--c-estr-btn)}
.ds .cst-tipo-n{font-size:var(--fs-2xl);font-weight:800;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;line-height:1.1}
.ds .cst-tipo-t{font-size:var(--fs-md);font-weight:700}
.ds .cst-solo-movil{display:none}
@media (max-width:760px){
  .ds .cst-oculta-movil{display:none}
  .ds .cst-solo-movil{display:block;margin-top:4px}
  .ds .cst-caja{max-height:none}
  .ds .cst-rep{grid-template-columns:1fr auto}
  .ds .cst-rep-b{grid-column:1 / -1;order:3}
}

/* ── COSTES · tanda 2 (spec 2026-10-04-costes-en-cargas.md): Inicio, Compras, Materias primas, Producción, evolución ──────────────
   Misma idea que arriba (lo usa sobre todo el padre del dueño, de ordenador de mesa): tarjetas con cifras grandes, una acción clara por
   tarjeta, tablas que se ordenan tocando la cabecera, y gráficos de línea hechos a mano (SVG) con la letra al tamaño de la casa.
   Todo con tokens; sube = rojo (lo malo en costes), baja = verde. */
.ds .cst-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rd);padding:16px 20px;margin:14px 0}
.ds .cst-tabla td:first-child{min-width:150px}
.ds .cst-nw{white-space:nowrap}
.ds .cst-tabla td.d .sec{white-space:normal;display:block;max-width:190px;margin-left:auto}
.ds .cst-card-tit{display:block;font-size:var(--fs-xl);font-weight:700;margin:0 0 10px}
.ds .cst-sub-tit{font-size:var(--fs-lg);font-weight:700;margin:14px 0 8px}
.ds .cst-grande-buscar{width:100%;box-sizing:border-box;min-height:64px;padding:12px 18px;font-size:var(--fs-2xl)}
.ds .cst-hallazgos{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ds .cst-hallazgo{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;text-align:left;width:100%;min-height:var(--tap);
  padding:12px 16px;background:var(--surface2);border:1px solid var(--border);border-left:5px solid var(--c-estr-btn);border-radius:var(--rd);
  color:var(--text);font-family:inherit;font-size:var(--fs-lg);cursor:pointer}
.ds .cst-hallazgo:hover,.ds .cst-hallazgo:focus{background:var(--c-curso-bg);outline:none}
.ds .cst-hall-n{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.ds .cst-hall-v{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
.ds .cst-hall-v .sec{font-family:'DM Sans',sans-serif;font-weight:400}
.ds .cst-nada{font-size:var(--fs-md);color:var(--text2);background:var(--surface2);border-radius:var(--rd-sm);padding:12px 14px;margin:8px 0}
.ds .cst-nota{font-size:var(--fs-md);background:var(--surface2);border:1px solid var(--border);border-left:5px solid var(--c-curso-ln);border-radius:var(--rd);padding:10px 14px;margin:0 0 12px}
.ds .cst-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.ds .cst-num-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:14px 16px;min-height:var(--tap);cursor:pointer;font-family:inherit;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--c-ok-fg);border-radius:var(--rd)}
.ds .cst-num-btn.hay{border-left-color:var(--c-esp-fg)}
.ds .cst-num-btn:hover,.ds .cst-num-btn:focus{background:var(--c-curso-bg);outline:none}
.ds .cst-linea-deb{display:flex;gap:16px;align-items:center}
.ds .cst-sube{color:var(--c-prob-fg);font-weight:700}
.ds .cst-baja{color:var(--c-ok-fg);font-weight:700}
.ds .cst-ord{cursor:pointer;user-select:none}
.ds .cst-ord:hover{color:var(--text)}
.ds .cst-cat-fila td{background:var(--surface3) !important;font-weight:700;font-size:var(--fs-md);letter-spacing:.02em}
.ds .cst-sim{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ds .cst-sim-res{font-size:var(--fs-md);margin-top:10px;padding:10px 14px;background:var(--surface2);border-radius:var(--rd-sm)}
.ds .cst-input-num{width:130px;text-align:right;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-lg)}
.ds .cst-guardado{font-style:normal;font-weight:700;color:var(--c-ok-fg);margin-left:10px;font-size:var(--fs-md)}
.ds .cst-guardado.cst-pend{color:var(--c-esp-fg)}
.ds .cst-guardado.cst-err{color:var(--c-prob-fg)}
.ds .cst-checks{display:flex;flex-wrap:wrap;gap:6px 18px}
.ds .cst-check{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-md);min-height:var(--tap);cursor:pointer}
.ds .cst-check input{width:20px;height:20px}
.ds .cst-calc-tabla{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.ds .cst-calc-fila{display:grid;grid-template-columns:minmax(0,1fr) 150px auto auto;gap:10px;align-items:center}
.ds .cst-calc-fila .ctl{font-size:var(--fs-md)}
.ds .cst-sugerencias{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 12px}
.ds .cst-calc-pie{display:flex;gap:10px;align-items:center;margin-top:6px}
.ds .cst-calc-res{font-size:var(--fs-lg);margin-top:12px;padding:12px 14px;background:var(--surface2);border-radius:var(--rd-sm)}
.ds .cst-flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ds .cst-tabla td .chip{white-space:nowrap}
.ds .cst-tabla td.cst-txt{font-family:'DM Sans',sans-serif}
@media (max-width:1100px){
  .ds .cst-oculta-medio{display:none}
}
.ds .cst-graf{width:100%;overflow:hidden;margin:0 0 12px}
.ds .cst-graf svg{display:block;max-width:100%}
.ds .cst-graf .eje{stroke:var(--border2);stroke-width:1}
.ds .cst-graf .rej{stroke:var(--border);stroke-width:1;stroke-dasharray:3 3}
.ds .cst-graf .lin{fill:none;stroke:var(--c-curso-ln);stroke-width:2.5;stroke-linejoin:round}
.ds .cst-graf .pun{fill:var(--c-estr-btn)}
.ds .cst-graf text{fill:var(--text2);font-size:var(--fs-xs);font-family:'DM Mono',monospace}
@media (max-width:760px){
  .ds .cst-hallazgo{grid-template-columns:minmax(0,1fr);gap:4px}
  .ds .cst-hall-v{text-align:left}
  .ds .cst-calc-fila{grid-template-columns:1fr 1fr}
  .ds .cst-tabla th,.ds .cst-tabla td{padding:8px 6px}
  .ds .cst-tabla td:first-child{min-width:0}
  .ds .cst-tabla td .chip{white-space:normal}
  .ds .cst-tabla th,.ds .cst-tabla th.d{white-space:normal}
  .ds .cst-kpi{padding:10px 12px}
  .ds .cst-calc-fila .sec{display:none}
  .ds .cst-grande-buscar{font-size:var(--fs-xl);min-height:56px}
}

/* ── COSTES · tanda 3 (spec 2026-10-05-costes-tanda3-tarifas.md): Tarifas y Ajustes ─────────────────────────────────────────────────
   Tarifas es el sitio de trabajo de Rafa y tiene que sentirse como un Excel bien hecho: cabecera de dos filas que no se va al bajar, cifras a
   la derecha en DM Mono, casillas del «nuevo» que parecen celdas (borde fino, y de color cuando hay algo escrito sin guardar o mal escrito)
   y una barra de acciones clara arriba. Todo con tokens; en móvil la tabla se desliza de lado dentro de su caja (es una hoja, no se parte). */
.ds .cst-tipo.amb{border-left-color:var(--c-esp-fg)}
.ds .cst-seg{display:inline-flex;gap:0}
.ds .cst-seg .cst-chip{border-radius:0}
.ds .cst-seg .cst-chip:first-child{border-radius:var(--rd-pill) 0 0 var(--rd-pill)}
.ds .cst-seg .cst-chip:last-child{border-radius:0 var(--rd-pill) var(--rd-pill) 0;border-left:0}
.ds .cst-acciones{background:var(--surface2);border:1px solid var(--border);border-radius:var(--rd);padding:12px 14px;margin:0 0 12px}
.ds .cst-acc-tit{font-size:var(--fs-md);font-weight:700;margin:0 0 8px}
.ds .cst-acc-fila{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 8px}
.ds .cst-acc-grupo{display:inline-flex;gap:6px;align-items:center}
.ds .cst-corto{width:74px}
.ds .cst-aviso{font-size:var(--fs-md);min-height:1px}
.ds .cst-aviso:empty{display:none}
.ds .cst-hoja{max-height:calc(100vh - 210px)}
.ds .cst-tabla-hoja th{white-space:normal;vertical-align:bottom}
.ds .cst-tabla-hoja .cst-grupo-th{text-align:center;background:var(--surface3);border-left:1px solid var(--border2)}
.ds .cst-tabla-hoja tr.cst-th2 th{top:40px;text-align:right}
.ds .cst-tabla-hoja td{padding:8px 7px;vertical-align:middle}
.ds .cst-tabla-hoja td.d{font-size:var(--fs-md)}
.ds .cst-tabla-hoja td:first-child,.ds .cst-tabla-hoja th:first-child{min-width:0;width:34px;padding-left:10px;padding-right:2px}
.ds .cst-tabla-hoja td:nth-child(2){min-width:170px}
.ds .cst-marca input{width:20px;height:20px}
.ds .cst-tabla-hoja td.cst-nuevo{background:var(--c-curso-bg)}
.ds .cst-tabla-hoja tbody tr:nth-child(even) td.cst-nuevo{background:var(--c-curso-bg)}
.ds .cst-tabla-hoja tr.cst-con-nuevo td:nth-child(2){box-shadow:inset 4px 0 0 var(--c-curso-ln)}
.ds .cst-cifra-n{font-weight:700}
.ds .cst-celda{width:100%;min-width:84px;max-width:120px;box-sizing:border-box;text-align:right;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:var(--fs-md);font-weight:700;padding:7px 8px;border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text)}
.ds .cst-celda:focus{outline:2px solid var(--c-estr-btn);outline-offset:0;border-color:var(--c-estr-btn)}
.ds .cst-celda.cst-pend-c{background:var(--c-esp-bg);border-color:var(--c-esp-ln)}
.ds .cst-celda.cst-mal,.ds .cst-celda-aj.cst-mal{background:var(--c-prob-bg);border-color:var(--c-prob-ln)}
.ds .cst-celda-aj{width:74px;font-size:var(--fs-md);padding-left:6px;padding-right:6px}
.ds .cst-celda-aj.cst-mal{outline:0}
.ds .cst-gasto-nombre{width:100%;min-width:180px;font-size:var(--fs-md)}
.ds .cst-sel-corto{max-width:150px;font-size:var(--fs-sm)}
.ds .cst-nota-tar{width:100%;min-width:0;font-size:var(--fs-sm);margin-top:4px}
.ds .cst-exc summary{font-size:var(--fs-sm)}
.ds .cst-aviso-fila{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:var(--fs-md);margin:0 0 10px}
@media (max-width:760px){
  .ds .cst-acc-fila{gap:8px}
  .ds .cst-hoja{max-height:none}
  .ds .cst-tabla-hoja td:nth-child(2){min-width:150px}
  .ds .cst-celda{min-width:78px}
}

/* Revisor › «Qué arreglar primero» (v. por defecto): una fila por cosa que tocar en BC, desplegable con los productos que afecta */
.ds .cst-grupo{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--border2);border-radius:var(--rd);margin:0 0 8px}
.ds .cst-grupo-top{border-left-color:var(--c-prob-fg)}
.ds .cst-grupo summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 14px;cursor:pointer;list-style:none;font-size:var(--fs-md)}
.ds .cst-grupo summary::-webkit-details-marker{display:none}
.ds .cst-grupo summary:hover,.ds .cst-grupo summary:focus{background:var(--c-curso-bg);outline:none}
.ds .cst-gnum{font-family:'DM Mono',monospace;font-weight:800;font-size:var(--fs-lg);min-width:34px;text-align:right}
.ds .cst-gtxt{min-width:0;overflow-wrap:anywhere}
.ds .cst-gchips{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.ds .cst-gbody{padding:0 14px 12px}
@media (max-width:760px){
  .ds .cst-grupo summary{grid-template-columns:auto minmax(0,1fr)}
  .ds .cst-gchips{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:flex-start}
}

/* Tarifas: las fichas de resumen son pequeñas y hacen de filtro del semáforo (la tabla tiene que quedar a la vista sin bajar media pantalla) */
.ds .cst-minis{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.ds .cst-mini{display:inline-flex;align-items:baseline;gap:8px;padding:8px 14px;min-height:var(--tap);cursor:pointer;font-family:inherit;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--c-ok-fg);border-radius:var(--rd)}
.ds .cst-mini.hay{border-left-color:var(--c-prob-fg)}
.ds .cst-mini.amb{border-left-color:var(--c-esp-fg)}
.ds .cst-mini.neu{border-left-color:var(--border2)}
.ds .cst-mini.azul{border-left-color:var(--c-estr-btn)}
.ds .cst-mini.on{box-shadow:0 0 0 2px var(--c-estr-btn)}
.ds .cst-mini:hover,.ds .cst-mini:focus{background:var(--c-curso-bg);outline:none}
.ds .cst-mini-n{font-size:var(--fs-xl);font-weight:800;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.ds .cst-mini-t{font-size:var(--fs-sm)}
.ds .cst-tabla td .cst-u{display:inline;font-size:var(--fs-sm);color:var(--text2);margin-left:2px}
.ds .cst-tabla-aj th{white-space:normal;vertical-align:bottom}
.ds .cst-tabla-aj td{vertical-align:top}
.ds .cst-lista-pri{margin:0 0 0 22px;padding:0;font-size:var(--fs-md)}
.ds .cst-lista-pri li{margin:6px 0;padding-left:4px}
.ds .cst-gen-fila{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 10px}
.ds .cst-gen-nota{flex:1 1 240px;min-width:0}
.ds .cst-acc-grupo{flex-wrap:wrap}
/* Costes · tandas 4 y 5 (spec 2026-10-05-costes-tandas4-5.md): el asistente «Pasar a BC», el progreso del envío y el Margen. Solo tokens, ningún color ni tamaño a mano. */
.ds .cst-pasos{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 14px}
.ds .cst-paso{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-md);color:var(--text2)}
.ds .cst-paso-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--rd-pill);border:2px solid var(--border2);font-weight:800;font-family:'DM Mono',monospace}
.ds .cst-paso.on{color:var(--text);font-weight:700}
.ds .cst-paso.on .cst-paso-n{background:var(--c-estr-btn);border-color:var(--c-estr-btn);color:#fff}
.ds .cst-paso.hecho .cst-paso-n{background:var(--c-ok-bg);border-color:var(--c-ok-ln);color:var(--c-ok-fg)}
.ds .cst-opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;align-items:start}
.ds .cst-opcion{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;width:100%;box-sizing:border-box;padding:14px 16px;font-family:inherit;font-size:var(--fs-md);color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--border2);border-radius:var(--rd);cursor:pointer;min-height:var(--tap)}
.ds .cst-opcion.on{border-color:var(--c-estr-btn);border-left-color:var(--c-estr-btn);box-shadow:0 0 0 2px var(--c-estr-btn)}
.ds .cst-opcion.off{opacity:.65;cursor:not-allowed}
.ds .cst-opcion:hover:not(.off),.ds .cst-opcion:focus-visible{background:var(--c-curso-bg);outline:none}
.ds .cst-opcion-tit{font-size:var(--fs-lg);font-weight:700}
.ds .cst-opcion-nota{font-size:var(--fs-sm);margin-top:4px}
.ds div.cst-opcion{cursor:default;gap:0;padding:0;align-items:stretch}
.ds div.cst-opcion:hover{background:var(--surface)}
.ds .cst-opcion-cab{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;width:100%;box-sizing:border-box;padding:14px 16px;font-family:inherit;font-size:var(--fs-md);color:var(--text);background:transparent;border:0;cursor:pointer;min-height:var(--tap)}
.ds .cst-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:0 16px 16px}
.ds .cst-campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.ds .cst-campo-ancho{grid-column:1 / -1}
.ds .cst-campo .eti{font-size:var(--fs-sm);font-weight:700}
.ds .cst-campo .ctl{width:100%;box-sizing:border-box}
.ds .cst-campos .cst-check{grid-column:1 / -1}
.ds .cst-check.off{opacity:.6}
.ds .cst-nota.aviso{border-left-color:var(--c-esp-fg)}
.ds .cst-nota.mal{border-left-color:var(--c-prob-fg)}
.ds .cst-nota ul{margin:6px 0 8px 20px;padding:0}
.ds .cst-confirma{background:var(--c-esp-bg);border:1px solid var(--c-esp-ln);border-left:5px solid var(--c-esp-fg);border-radius:var(--rd);padding:14px 16px}
.ds .cst-prog{height:20px;background:var(--surface3);border-radius:var(--rd-pill);overflow:hidden;margin:6px 0 8px}
.ds .cst-prog-in{height:100%;background:var(--c-curso-ln);border-radius:var(--rd-pill);transition:width .4s}
.ds .cst-prog.ok .cst-prog-in{background:var(--c-ok-fg)}
.ds .cst-prog.mal .cst-prog-in{background:var(--c-prob-fg)}
.ds .cst-prog-txt{font-size:var(--fs-lg)}
.ds .cst-prueba{border:1px solid var(--border);border-left:5px solid var(--border2);border-radius:var(--rd);padding:10px 14px;margin:0 0 12px;background:var(--surface2)}
.ds .cst-prueba.ok{border-left-color:var(--c-ok-fg)}
.ds .cst-prueba.mal{border-left-color:var(--c-prob-fg)}
.ds .cst-prueba-tit{font-size:var(--fs-lg);font-weight:700;margin:0 0 6px}
.ds .cst-pruebas{list-style:none;margin:0;padding:0;font-size:var(--fs-md)}
.ds .cst-pruebas li{margin:6px 0}
.ds .cst-celda-td{white-space:nowrap}
.ds #costtarifas-content .b:disabled,.ds #costmargen-content .b:disabled{opacity:.4;cursor:not-allowed}
.ds .cst-tabla td.cst-mes{font-size:var(--fs-sm)}

/* ═══ LA HOJA (public/js/hoja.js · spec 2026-10-05-costes-hoja-excel.md) ═══════════════════════════════════════════
   Una tabla que se porta como Excel para quien lleva 20 años en él: cabeceras grises, filas finas con su línea, el recuadro de la celda
   activa, celdas de entrada en amarillo suave, barra de fórmulas arriba y barra de estado abajo. Todo con tokens (claro y oscuro). Las alturas
   de fila las manda hoja.js (H_FILA…): la virtualización cuenta con que todas valen lo mismo, así que aquí NO se ponen por cuenta propia. */
.ds .hj{display:flex;flex-direction:column;border:1px solid var(--border2);border-radius:var(--rd);background:var(--surface);position:relative}
.ds .hj-formulas{border-radius:var(--rd) var(--rd) 0 0;display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--surface2);border-bottom:1px solid var(--border);min-height:var(--tap)}
.ds .hj-ref{flex:0 1 auto;width:240px;max-width:34%;padding:5px 9px;border:1px solid var(--border2);background:var(--surface);border-radius:var(--rd-sm);font-family:'DM Mono',monospace;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds .hj-fx{flex:0 0 auto;font-style:italic;font-weight:700;color:var(--text3);font-size:var(--fs-md)}
.ds .hj-ftxt{flex:1 1 auto;min-width:0;font-size:var(--fs-md);line-height:1.3;max-height:2.7em;overflow:hidden}
.ds .hj-bus{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.ds .hj-bin{width:230px;min-height:36px;padding:4px 10px;border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text);font-family:inherit;font-size:var(--fs-sm)}
.ds .hj-bcnt{font-size:var(--fs-sm);color:var(--text2);min-width:70px}
.ds .hj-cuerpo{overflow:auto;height:var(--hj-alto,calc(100vh - 400px));min-height:320px;position:relative;outline:none;background:var(--surface)}
.ds .hj-cuerpo:focus-visible{box-shadow:inset 0 0 0 3px var(--c-estr-btn)}
.ds .hj-tabla{border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:var(--fs-md);user-select:none;-webkit-user-select:none}
.ds .hj-tabla th,.ds .hj-tabla td{box-sizing:border-box;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.ds .hj-tabla thead th{position:sticky;z-index:3;background:var(--surface3);font-size:var(--fs-sm);font-weight:700;text-align:left;border-bottom:2px solid var(--border2);cursor:pointer;color:var(--text)}
.ds .hj-tabla thead th.hj-d{text-align:right}
.ds .hj-th{position:sticky}
.ds .hj-tit{display:inline-block;vertical-align:middle;max-width:100%;box-sizing:border-box;white-space:normal;line-height:1.15;overflow:hidden;padding-right:20px}
.ds .hj-sub{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--text2)}
.ds .hj-fl{position:absolute;right:5px;bottom:3px;font-size:var(--fs-xs);color:var(--c-estr-fg)}
.ds .hj-emb{display:block;margin:5px auto;color:var(--c-estr-fg)}
.ds .hj-mb{position:absolute;right:3px;top:3px;border:none;background:none;cursor:pointer;color:var(--text2);font-size:var(--fs-sm);padding:0;width:20px;height:22px;line-height:22px;border-radius:var(--rd-sm)}
.ds .hj-mb:hover,.ds .hj-mb.hj-on{background:var(--c-estr-bg);color:var(--c-estr-fg)}
.ds .hj-res{position:absolute;right:0;top:0;bottom:0;width:7px;cursor:col-resize}
.ds .hj-res:hover{background:var(--c-estr-ln)}
.ds .hj-rh{position:sticky;left:0;z-index:2;width:46px;background:var(--surface3);color:var(--text2);text-align:center;font-family:'DM Mono',monospace;font-size:var(--fs-sm);font-variant-numeric:tabular-nums;cursor:default}
.ds .hj-tabla thead .hj-rh{z-index:5}
.ds .hj-rh-act{background:var(--c-estr-bg);color:var(--c-estr-fg);font-weight:700}
.ds .hj-c0{position:sticky;z-index:2;background:var(--surface)}
.ds .hj-tabla thead .hj-c0{z-index:4;background:var(--surface3)}
.ds .hj-c{font-size:var(--fs-md);cursor:cell}
.ds .hj-d{text-align:right;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.ds .hj-tabla thead th.hj-d{font-family:'DM Sans',system-ui,sans-serif}
.ds .hj-edit{background:var(--c-esp-bg)}
.ds .hj-sim{background:var(--c-curso-bg);color:var(--c-curso-fg);font-weight:700}
.ds .hj-neg{color:var(--c-prob-fg)}
.ds .hj-parcial{color:var(--text3);font-style:italic}
.ds .hj-sel{background:var(--c-estr-bg)}
.ds .hj-act{outline:2px solid var(--c-estr-btn);outline-offset:-2px}
.ds .hj-hall{background:var(--c-esp-ln)}
.ds .hj-hall-ya{outline:2px solid var(--c-esp-fg);outline-offset:-2px}
.ds .hj-hijo td{color:var(--text2)}
.ds .hj-hijo td.hj-sim{color:var(--c-curso-fg)}
.ds .hj-bloque td{background:var(--surface3);font-weight:700;color:var(--text)}
.ds .hj-bloque td.hj-c0{background:var(--surface3)}
.ds .hj-bloque td.hj-sel{background:var(--c-estr-bg)}
.ds .hj-n{font-weight:400;color:var(--text2);font-size:var(--fs-sm)}
.ds .hj-ind{display:inline-block;vertical-align:middle}
.ds .hj-pm{display:inline-block;box-sizing:border-box;width:20px;height:20px;line-height:16px;margin-right:6px;padding:0;border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text);font-family:'DM Mono',monospace;font-size:var(--fs-sm);text-align:center;vertical-align:middle;cursor:pointer}
.ds .hj-pm:hover{border-color:var(--c-estr-btn);color:var(--c-estr-fg)}
.ds .hj-pm0{border-color:transparent;background:none;cursor:default}
.ds .hj-pto{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;vertical-align:baseline;background:var(--c-neu-bg);border:1px solid var(--border2)}
.ds .hj-pto-ok{background:var(--c-ok-fg);border-color:var(--c-ok-fg)}
.ds .hj-pto-esp{background:var(--c-esp-fg);border-color:var(--c-esp-fg)}
.ds .hj-pto-prob{background:var(--c-prob-fg);border-color:var(--c-prob-fg)}
.ds .hj-carga td,.ds .hj-vacia td{color:var(--text2);font-style:italic}
.ds .hj-vacia td{padding:28px;text-align:center;font-style:normal;font-size:var(--fs-md)}
.ds .hj-sp td{padding:0;border:none}
.ds .hj-ed{display:block;box-sizing:border-box;margin:0 -8px;width:calc(100% + 16px);height:100%;padding:0 8px;border:none;outline:2px solid var(--c-estr-btn);outline-offset:-2px;background:var(--surface);color:var(--text);font:inherit;user-select:text;-webkit-user-select:text}
.ds .hj-ed.hj-d{text-align:right}
.ds .hj-param th{background:var(--c-esp-bg);cursor:default;font-weight:400;border-bottom:1px solid var(--c-esp-ln);position:sticky;z-index:3}
.ds .hj-param .hj-pfix{background:var(--surface3)}
.ds .hj-ptit{font-weight:700;font-size:var(--fs-sm)}
/* bloques de columnas (spec 2026-10-05-costes-hoja-excel.md, 2.ª parte): la fila de títulos de «Hoy», «Nuevo», «Escalera de descuentos»… con su − / + si se recogen */
.ds .hj-grp th{position:sticky;z-index:3;background:var(--surface3);color:var(--text);font-size:var(--fs-sm);font-weight:700;text-align:left;border-bottom:1px solid var(--border2);cursor:default}
.ds .hj-grp th.hj-gcon{background:var(--c-estr-bg);color:var(--c-estr-fg);border-left:2px solid var(--c-estr-ln);cursor:pointer}
.ds .hj-grp .hj-pfix{background:var(--surface3)}
.ds .hj-grp th.hj-c0{z-index:4}
.ds .hj-f.hj-top10 td.hj-c0{font-weight:700}   /* Revisor: las diez cosas por las que empezar */
.ds .hj-plab{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.ds .hj-pin{width:56px;min-height:32px;box-sizing:border-box;padding:2px 6px;text-align:right;font-family:'DM Mono',monospace;font-size:var(--fs-sm);font-variant-numeric:tabular-nums;border:1px solid var(--c-esp-ln);border-radius:var(--rd-sm);background:var(--surface);color:var(--text)}
.ds .hj-pin:focus{outline:2px solid var(--c-estr-btn)}
.ds .hj-tot td{position:sticky;z-index:3;background:var(--surface3);font-weight:700;border-top:2px solid var(--border2)}
.ds .hj-tot td.hj-c0{z-index:4}
.ds .hj-estado{border-radius:0 0 var(--rd) var(--rd);display:flex;justify-content:space-between;gap:16px;align-items:center;padding:6px 12px;background:var(--surface2);border-top:1px solid var(--border);font-size:var(--fs-sm);color:var(--text2);min-height:36px}
.ds .hj-stats{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--text);text-align:right}
.ds .hj-msg{color:var(--c-estr-fg);font-weight:700}
.ds .hj-menu{position:absolute;z-index:20;width:290px;max-width:calc(100% - 12px);padding:8px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--rd);box-shadow:var(--sh-float);font-size:var(--fs-md)}
.ds .hj-menu[hidden]{display:none}
.ds .hj-menu hr{border:none;border-top:1px solid var(--border);margin:6px 0}
.ds .hj-mt{font-weight:700;padding:4px 6px 8px}
.ds .hj-mi{display:block;width:100%;text-align:left;min-height:38px;padding:6px 10px;border:none;background:none;color:var(--text);font:inherit;font-size:var(--fs-md);border-radius:var(--rd-sm);cursor:pointer}
.ds .hj-mi:hover:not([disabled]){background:var(--c-estr-bg)}
.ds .hj-mi[disabled]{color:var(--text3);cursor:default}
.ds .hj-mf{display:flex;gap:6px;margin:6px 0}
.ds .hj-mf input,.ds .hj-mf select{flex:1 1 0;min-width:0;min-height:36px;box-sizing:border-box;padding:4px 8px;border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-sm)}
.ds .hj-lista{max-height:170px;overflow:auto;border:1px solid var(--border);border-radius:var(--rd-sm);padding:4px 0}
.ds .hj-chk{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 10px;cursor:pointer;font-size:var(--fs-sm)}
.ds .hj-chk input{width:18px;height:18px;flex:0 0 auto}
.ds .hj-mpie{display:flex;gap:8px;margin-top:8px}
/* columnas que se mueven y se esconden, y rellenar hacia abajo (spec 2026-10-06-costes-pantalla-y-panel.md, §3): la marca fina de «aquí hay columnas ocultas» (doble clic las muestra),
   la línea que dice dónde caerá la cabecera que se arrastra, y el controlador de relleno (el cuadradito de la esquina de la celda activa) */
.ds .hj-oc{position:absolute;left:0;top:0;bottom:0;width:7px;z-index:2;cursor:pointer;background:var(--c-estr-btn);opacity:.85}
.ds .hj-oc:hover{opacity:1}
.ds .hj-oc-der{left:auto;right:0;width:6px}
.ds .hj-tabla thead th.hj-arr{opacity:.45}
.ds .hj-guia{position:absolute;z-index:30;width:3px;background:var(--c-estr-btn);pointer-events:none}
.ds .hj-guia[hidden]{display:none}
.ds .hj-fhc:not(.hj-c0){position:relative}
.ds .hj-fh{position:absolute;right:0;bottom:0;width:10px;height:10px;box-sizing:border-box;background:var(--c-estr-btn);border:1px solid var(--surface);cursor:crosshair;z-index:1}
@media (max-width:760px){
  .ds .hj-ref{display:none}
  .ds .hj-formulas{flex-wrap:wrap}
  .ds .hj-bin{width:150px}
  .ds .hj-estado{flex-direction:column;align-items:flex-start;gap:2px}
}
/* ═══ COSTES A TODA LA PANTALLA Y EL PANEL «DE DÓNDE VIENE» (spec 2026-10-06-costes-pantalla-y-panel.md) ═══════════════════════════════════
   El dueño (6-oct), viendo v663 en producción: «que ocupe la pantalla». Las vistas de Costes dejan la columna centrada de 1.240 px: la hoja usa todo el ancho de la ventana (con el
   margen mínimo de la app) y, desde hoja.js, todo el alto hasta el pie. SOLO Costes: el resto de la app sigue en su columna. La cabecera se compacta para que la hoja gane filas.
   El panel va a la derecha de la hoja, como los paneles de tareas de Excel: la hoja se estrecha (no la tapa). Todo con tokens; en un móvil el panel baja debajo de la hoja. */
.ds[id^="view-cost"]>.container{max-width:none;padding:10px 20px}
.ds[id^="view-cost"] .vista-cab{align-items:center;margin-bottom:8px}
.ds[id^="view-cost"] .cst-barra{margin-bottom:6px}
.ds[id^="view-cost"] .cst-chips{margin-bottom:6px}
.ds[id^="view-cost"] .vista-cab>div:first-child{min-width:0}
.ds[id^="view-cost"] .vista-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* en una ventana ancha, la barra de búsqueda y las fichas de estado comparten fila: la hoja gana la fila que sobraba */
@media (min-width:1300px){
  .ds #costprod-content,.ds #costcompras-content,.ds #costmat-content{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px}
  .ds #costprod-content>*,.ds #costcompras-content>*,.ds #costmat-content>*{flex:1 1 100%;min-width:0}
  .ds #costprod-content>.cst-barra,.ds #costcompras-content>.cst-barra,.ds #costmat-content>.cst-barra{flex:1 1 auto}
  .ds #costprod-content>.cst-chips,.ds #costcompras-content>.cst-chips{flex:0 0 auto}
}
.ds .hj{--hj-pn-w:clamp(340px,27vw,500px)}
.ds .hj-zona{position:relative}
.ds .hj-zona.hj-pn-on>.hj-cuerpo{margin-right:var(--hj-pn-w)}
.ds .hj-pn-bt{flex:0 0 auto}
.ds .hj-panel{position:absolute;top:0;right:0;bottom:0;width:var(--hj-pn-w);box-sizing:border-box;overflow:auto;background:var(--surface);border-left:2px solid var(--border2);overscroll-behavior:contain}
.ds .hj-panel[hidden]{display:none}
.ds .hj-pn-cab{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 12px;background:var(--surface2);border-bottom:1px solid var(--border)}
.ds .hj-pn-tit{font-weight:700;font-size:var(--fs-lg)}
.ds .hj-pn-cuerpo{padding:12px 14px 20px;font-size:var(--fs-md);line-height:1.35}
.ds .hj-pn-vacio{padding:24px 4px;color:var(--text2)}
.ds .hj-pn-obj{margin:0 0 10px}
.ds .hj-pn-nom{font-size:var(--fs-lg);font-weight:700;line-height:1.25}
.ds .hj-pn-sub{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:4px}
.ds .hj-pn-sec{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--border)}
.ds .hj-pn-st{margin:0 0 8px;font-size:var(--fs-md);font-weight:700;color:var(--text)}
.ds .hj-pn-aviso{padding:8px 10px;margin:6px 0;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rd-sm);font-size:var(--fs-sm);color:var(--text)}
.ds .hj-pn-aviso.es-prob{border-color:var(--c-prob-ln);background:var(--c-prob-bg)}
.ds .hj-pn-aviso.es-esp{border-color:var(--c-esp-ln);background:var(--c-esp-bg)}
.ds .hj-pn-total,.ds .hj-pn-nums{display:flex;flex-wrap:wrap;gap:6px 18px;margin:6px 0}
.ds .hj-pn-dato{display:flex;flex-direction:column;min-width:0}
.ds .hj-pn-eti{font-size:var(--fs-xs);color:var(--text2);text-transform:uppercase;letter-spacing:.04em}
.ds .hj-pn-val{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-md)}
.ds .hj-pn-total .hj-pn-val{font-size:var(--fs-xl)}
.ds .hj-pn-cuenta{margin:6px 0;padding:6px 8px;border-left:3px solid var(--c-estr-ln);background:var(--surface2);font-size:var(--fs-sm);color:var(--text2);overflow-wrap:anywhere}
.ds .hj-pn-ori{margin:6px 0;font-size:var(--fs-sm);overflow-wrap:anywhere}
.ds .hj-pn-rep{display:grid;grid-template-columns:minmax(80px,120px) 1fr auto;gap:8px;align-items:center;padding:3px 0;font-size:var(--fs-sm)}
.ds .hj-pn-barra{display:block;height:10px;background:var(--surface3);border-radius:var(--rd-sm);overflow:hidden}
.ds .hj-pn-barra i{display:block;height:100%;background:var(--c-curso-ln)}
.ds .hj-pn-tabla{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.ds .hj-pn-tabla th{text-align:left;font-size:var(--fs-xs);color:var(--text2);padding:4px 6px;border-bottom:2px solid var(--border2)}
.ds .hj-pn-tabla td{padding:5px 6px;border-bottom:1px solid var(--border);vertical-align:top}
.ds .hj-pn-tabla .d{text-align:right;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.ds .hj-pn-tabla th.d{font-family:inherit}
.ds .hj-pn-clic{cursor:pointer}
.ds .hj-pn-clic:hover,.ds .hj-pn-clic:focus-visible{background:var(--c-estr-bg)}
.ds .hj-pn-lineas{margin-top:8px}
.ds .hj-pn-semi{margin:8px 0;padding-left:10px;border-left:3px solid var(--c-curso-ln)}
.ds .hj-pn-semi-t{margin:0 0 6px;font-size:var(--fs-sm)}
.ds .hj-pn-lin{margin:8px 0;padding:10px 12px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--rd)}
.ds .hj-pn-enf{border-color:var(--c-estr-btn);box-shadow:inset 3px 0 0 var(--c-estr-btn)}
.ds .hj-pn-prueba{background:var(--c-curso-bg);border-color:var(--c-curso-ln)}
.ds .hj-pn-lin-cab{margin-bottom:4px}
.ds .hj-pn-campos{display:flex;flex-wrap:wrap;gap:8px 14px;margin:8px 0}
.ds .hj-pn-campo{display:flex;flex-direction:column;gap:2px;min-width:0}
.ds .hj-pn-campo-ancho{flex:1 1 100%}
.ds .hj-pn-ent{display:flex;align-items:center;gap:6px}
.ds .hj-pn-in{min-height:36px;max-width:100%;box-sizing:border-box;font-size:var(--fs-sm)}
.ds .hj-pn-campo input.hj-pn-in{width:110px;text-align:right;font-family:'DM Mono',monospace}
.ds .hj-pn-acc{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ds .hj-pn-alts{margin-top:10px;padding-top:8px;border-top:1px dashed var(--border2)}
.ds .hj-pn-alt{margin:6px 0;padding:8px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rd-sm);display:flex;flex-direction:column;gap:4px;align-items:flex-start;font-size:var(--fs-sm)}
.ds .hj-pn-alt-ahora{background:var(--c-estr-bg);border-color:var(--c-estr-ln)}
.ds .hj-pn-banner{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0 0 8px;padding:8px 10px;background:var(--c-ok-bg);border:1px solid var(--c-ok-ln);border-radius:var(--rd-sm);font-size:var(--fs-sm)}
.ds .hj-pn-banner-mal{background:var(--c-prob-bg);border-color:var(--c-prob-ln)}
@media (max-width:900px){
  .ds .hj-zona.hj-pn-on>.hj-cuerpo{margin-right:0}
  .ds .hj-panel{position:static;width:auto;max-height:60vh;border-left:none;border-top:2px solid var(--border2)}
}
/* La franja de «¿Y si…?» de Productos (costes.js): dice que se está simulando y que nada se guarda */
.ds .cst-franja{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 14px;margin:0 0 10px;background:var(--c-curso-bg);border:1px solid var(--c-curso-ln);border-left:5px solid var(--c-curso-fg);border-radius:var(--rd);font-size:var(--fs-md)}
.ds .cst-franja-pausa{background:var(--surface2);border-color:var(--border2);border-left-color:var(--text3)}
.ds .cst-franja-lista{margin:-4px 0 10px;padding:4px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rd)}
.ds .cst-franja-fila{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:6px 0;border-top:1px solid var(--border);font-size:var(--fs-md)}
.ds .cst-franja-fila:first-child{border-top:none}

/* ═══ ESCANDALLOS EDITABLES (public/js/costes-escandallos.js · spec 2026-10-05-costes-escandallos.md) ═══════════════════════════════════════
   Editar el escandallo desplegado de Productos como celdas de Excel: la lista de sugerencias bajo la celda, «guardando…» → ✓ / ✗, la fila «+ añadir línea»,
   los botones dentro de las celdas y las pantallas de copiar y del cambio en bloque. Solo tokens. */
.ds .hj-sug{position:absolute;z-index:25;min-width:320px;max-width:min(560px,calc(100% - 12px));max-height:280px;overflow:auto;padding:4px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--rd);box-shadow:var(--sh-float)}
.ds .hj-sug[hidden]{display:none}
.ds .hj-si{padding:8px 10px;border-radius:var(--rd-sm);font-size:var(--fs-md);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.ds .hj-si-on,.ds .hj-si:hover{background:var(--c-estr-bg);color:var(--c-estr-fg)}
.ds .hj-si-nada,.ds .hj-si-nada:hover{background:transparent;color:var(--text3);cursor:default}
.ds .hj-bt{min-height:26px;padding:0 9px;border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-sm);cursor:pointer;vertical-align:middle}
.ds .hj-bt:hover{border-color:var(--c-estr-btn);color:var(--c-estr-fg)}
.ds .hj-bt-cta{background:var(--c-estr-bg);color:var(--c-estr-fg);border-color:var(--c-estr-ln);font-weight:700}
.ds .hj-guardando{background:var(--c-curso-bg);color:var(--c-curso-fg);font-style:italic}
.ds .hj-guardado::after{content:' ✓';color:var(--c-ok-fg);font-weight:700}
.ds .hj-rechazada{background:var(--c-prob-bg);color:var(--c-prob-fg)}
.ds .hj-nueva td{color:var(--c-estr-fg);font-weight:600;cursor:pointer}
.ds .hj-nueva td.hj-edit{font-style:normal;color:var(--text)}
.ds .cstesc-aviso{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;margin:0 0 10px;background:var(--c-esp-bg);border:1px solid var(--c-esp-ln);border-left:5px solid var(--c-esp-fg);border-radius:var(--rd);font-size:var(--fs-md)}
.ds .cstesc-aviso-info{background:var(--c-estr-bg);border-color:var(--c-estr-ln);border-left-color:var(--c-estr-btn)}
.ds .cstesc-caja{width:860px;max-width:100%;max-height:calc(100vh - 60px);overflow:auto}
.ds .cstesc-bloque{margin:12px 0}
.ds .cstesc-op{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:var(--tap);margin:4px 0;padding:8px 12px;border:1px solid var(--border2);border-radius:var(--rd);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-md);text-align:left;cursor:pointer}
.ds .cstesc-op:hover{border-color:var(--c-estr-btn);background:var(--c-estr-bg)}
.ds .cstesc-cols{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}
.ds .cstesc-col{flex:1 1 300px;min-width:0}
.ds .cstesc-coste{margin-top:6px;font-size:var(--fs-md)}
.ds .cstesc-unis{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.ds .cstesc-paso{margin-bottom:14px}
.ds .cstesc-radio{display:flex;gap:10px;align-items:flex-start;padding:8px 4px;font-size:var(--fs-md);cursor:pointer}
.ds .cstesc-radio input{margin-top:3px;width:18px;height:18px;flex:0 0 auto}
.ds .cstesc-off{color:var(--text3);cursor:default}
.ds .cstesc-campos{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:10px}
.ds .cstesc-campo{flex:1 1 280px;min-width:0}
.ds .cstesc-campo .ctl{width:100%;box-sizing:border-box}
.ds .cstesc-sug{margin-top:4px}
.ds .cstesc-barra{height:12px;margin:10px 0;background:var(--surface3);border-radius:var(--rd-sm);overflow:hidden}
.ds .cstesc-barra i{display:block;height:100%;background:var(--c-estr-btn);transition:width .3s}
/* Costes · escenarios (spec 2026-10-06-costes-borradores-escenarios.md, parte B): la franja del escenario abierto es la del «¿Y si…?» con el nombre en negrita; solo tokens */
.ds .cst-franja-esc{border-left-width:8px}
.ds .cse-abierto td{background:var(--c-curso-bg)}
.ds .cse-acc{white-space:normal}
.ds .cse-acc .b{margin:2px 4px 2px 0}
.ds .cse-pct{display:flex;align-items:center;gap:6px}
@media (max-width:760px){
  .ds .cse-tabla thead{display:none}
  .ds .cse-tabla tr,.ds .cse-tabla td{display:block;min-width:0}
  .ds .cse-tabla td{border-bottom:0;padding-top:4px;padding-bottom:4px}
  .ds .cse-tabla td.cst-oculta-movil{display:none}
  .ds .cse-tabla td.cse-acc{border-bottom:1px solid var(--border);padding-bottom:12px}
  .ds .hj-sug{min-width:0;max-width:calc(100% - 12px)}
  .ds .cstesc-cols{flex-direction:column}
}
/* ═══ COSTES · PRODUCTOS EN BORRADOR (6-oct-2026, spec 2026-10-06-costes-borradores-escenarios.md, partes A, C y D) ═════════════════════════════════════════════
   Un producto que todavía no existe en BC sale en la hoja de Productos con su color propio (el «índigo» del kit: ni el azul de lo simulado ni el violeta de «BC») y la marca «Borrador»;
   el formulario de producto nuevo, «Crear variante» y «Dar de alta en BC» usan los diálogos de siempre (cstesc-*). Solo tokens. */
.ds .chip.es-estr{background:var(--c-estr-bg);color:var(--c-estr-fg)}
.ds .cbo-chip{margin-right:6px;vertical-align:middle}
.ds .hj-f.hj-borrador td.hj-c:not(.hj-sel):not(.hj-act):not(.hj-sim):not(.hj-edit):not(.hj-guardando):not(.hj-rechazada){background:var(--c-estr-bg)}
.ds .hj-f.hj-borrador td.hj-c0{box-shadow:inset 4px 0 0 var(--c-estr-btn)}
.ds .cbo-uni{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.ds .cbo-uni .ctl{width:96px}
/* ═══ COSTES · PLANTILLAS DE ESCANDALLO (7-oct-2026, spec 2026-10-07-costes-plantillas.md) ═════════════════════════════════════════════════════════════════
   El aviso del panel «De dónde viene» (con «Añadir la saca» y «Este producto no lleva saca»), la vista previa de rellenar un escandallo y la pantalla de Plantillas. Solo tokens. */
.ds .cpl-aviso{margin:8px 0}
.ds .cpl-botones{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ds .cpl-quitados{margin-top:8px}
.ds .cpl-falta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:8px 0 0}
.ds .cpl-falta>span{flex:1 1 100%;font-size:var(--fs-sm)}
.ds .cpl-fuera td{color:var(--text3)}
.ds .cpl-cant{width:96px;text-align:right;box-sizing:border-box}
.ds .cpl-ap td:nth-child(2){white-space:nowrap}
.ds .cpl-ap td:first-child{width:34px}
.ds .cpl-bl td:nth-child(2){min-width:240px}
.ds .cpl-ap select.ctl{width:100%;min-width:200px;max-width:340px}
.ds .cpl-datos{margin:0 0 14px}
.ds .cpl-cats{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px}
.ds .cpl-cats .ctl{width:auto;max-width:100%}
.ds .cpl-x{border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;padding:0 2px;min-width:20px}
.ds .cpl-tit{margin:16px 0 6px;font-size:var(--fs-lg)}
.ds .cpl-comp{cursor:default}
.ds .cpl-cats-lista{display:flex;flex-wrap:wrap;gap:0 18px;max-height:180px;overflow:auto}

/* ── INFORMES · T1 «Parte del día» (spec 2026-10-08-informes.md) ───────────────────────────────────────────
   Lo va a usar Rafa desde el ordenador de mesa: letra de la casa sin bajar del suelo y cifras en DM Mono. La
   tarjeta de cada camión dice su clase en la barra de la izquierda (índigo = camión nuestro o transportista,
   azul = recoge el cliente, ámbar = sin datos de camión): de lejos y sin leer ya se sabe cuál es. Todo bajo
   `.ds` y con tokens, así que sirve igual en claro y en oscuro. */
.ds .inf-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 14px}
.ds .inf-vs{font-size:var(--fs-xs);color:var(--text2)}
.ds .inf-sube{color:var(--c-ok-fg);font-weight:700}
.ds .inf-baja{color:var(--c-prob-fg);font-weight:700}
.ds .inf-aviso{font-size:var(--fs-sm);color:var(--c-esp-fg);margin:0 0 6px}
.ds .inf-camion{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--c-estr-ln);border-radius:var(--rd);margin:0 0 10px}
.ds .inf-camion.t-cliente{border-left-color:var(--c-curso-ln)}
.ds .inf-camion.t-sin_datos{border-left-color:var(--c-esp-ln)}
.ds .inf-camion>summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 16px;
  cursor:pointer;font-size:var(--fs-md);min-height:var(--tap);list-style:none}
.ds .inf-camion>summary::-webkit-details-marker{display:none}
.ds .inf-camion>summary:focus-visible{outline:2px solid var(--c-estr-fg);outline-offset:-2px;border-radius:var(--rd)}
.ds .inf-cab-tit{font-weight:700;font-size:var(--fs-lg)}
.ds .inf-cab-der{display:flex;align-items:center;gap:12px;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:var(--fs-lg);font-weight:700}
.ds .inf-barra{display:inline-block;width:110px;height:10px;border-radius:var(--rd-pill);background:var(--surface3);overflow:hidden;vertical-align:middle}
.ds .inf-barra-r{display:block;height:100%;background:var(--c-ok-ln)}
.ds .inf-barra-r.lleno{background:var(--c-esp-ln)}
.ds .inf-barra-r.pasa{background:var(--c-prob-ln)}
.ds .inf-pct{font-size:var(--fs-sm);font-weight:700}
.ds .inf-cuerpo{padding:0 16px 14px}
.ds .inf-alb{margin:10px 0 0}
.ds .inf-alb-cab{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-size:var(--fs-md);margin:0 0 4px}
.ds .inf-ref{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-weight:700}
.ds .inf-pie{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border);font-size:var(--fs-sm);color:var(--text2)}
.ds .inf-pie b{color:var(--text);font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.ds .inf-sin{border-left:5px solid var(--c-esp-ln);margin:0 0 14px}
.ds .inf-tit{font-size:var(--fs-xl);font-weight:700;margin:18px 0 8px}
.ds .inf-tabla-ancha{overflow-x:auto}
.ds .inf-tabla-ancha .txt{text-align:left}   /* .tabla-der pone a la derecha todo menos la 1.ª columna: el texto (descripción, familia, unidad) se lee a la izquierda */
/* cifras, códigos y cabeceras en una pieza: «24.000» partido en «24.0 / 00» se lee mal (pasaba en el móvil) */
.ds .inf-tabla-ancha th,.ds .inf-tabla-ancha td.num,.ds .inf-tabla-ancha .inf-ref{white-space:nowrap}
.ds .inf-tabla-ancha td{word-break:normal;overflow-wrap:normal}   /* las palabras se parten por los espacios, nunca «TERMIN/ADO» */
.ds .inf-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.ds .inf-filtros .ctl{min-width:150px;max-width:260px}
.ds .inf-filtros label.sec{display:flex;align-items:center;gap:6px}
/* ── INFORMES · T2 «Por producto» (spec 2026-10-08-informes.md) ───────────────────────────────────────────
   La tabla por familia: la fila de familia en negrita y con fondo (se despliega con su flecha), los artículos debajo con
   el código como enlace a su ficha. El gráfico y la ficha usan solo tokens, así que sirven igual en claro y en oscuro. */
.ds .inf-fam td{font-weight:700;background:var(--surface3)}
.ds .inf-tabla-ancha tr[hidden]{display:none}   /* una fila oculta no puede volver por el display de la tabla */
.ds .inf-plegar,.ds .inf-art{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:2px 0;text-align:left}
.ds .inf-plegar{font-weight:700;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap)}
.ds .inf-plegar i{transition:transform .15s}
.ds .inf-plegar[aria-expanded="true"] i{transform:rotate(90deg)}
.ds .inf-art{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-weight:700;color:var(--c-estr-fg);text-decoration:underline;white-space:nowrap}   /* el código en una pieza: «BB-SIL-/04» partido por el guion no se lee */
.ds .inf-plegar:focus-visible,.ds .inf-art:focus-visible{outline:2px solid var(--c-estr-fg);outline-offset:2px;border-radius:var(--rd)}
.ds .inf-grafico{position:relative;height:300px}
.ds.inf-ov{z-index:10088}   /* la hoja de la ficha va por encima del resto de hojas (dlg-hoja ds inf-ov) */
.ds .inf-hoja{background:var(--bg);width:100%;max-width:880px;max-height:92vh;border-radius:16px 16px 0 0;padding:18px 16px 0;display:flex;flex-direction:column}
.ds .inf-hoja-cab{flex:0 0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:0 0 12px}
.ds .inf-hoja-cuerpo{flex:1;overflow-y:auto;padding-bottom:18px}
.ds .inf-sub{font-size:var(--fs-sm);color:var(--text2);margin:10px 0 0}
.ds .inf-meses{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;align-items:stretch;height:150px;margin:4px 0 8px}
.ds .inf-mes{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;height:100%}
.ds .inf-mes-pista{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.ds .inf-mes-b{display:block;width:70%;max-width:30px;border-radius:3px 3px 0 0;background:var(--blue)}
.ds .inf-mes-b.eur{background:var(--green)}
.ds .inf-mes-v,.ds .inf-mes-e{font-size:var(--fs-xs);white-space:nowrap}
.ds .inf-mes-v{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--text2);min-height:1.2em}
.ds .inf-mes-e{color:var(--text3)}
@media (max-width:760px){
  .ds .inf-camion>summary{padding:10px 12px}
  .ds .inf-cuerpo{padding:0 12px 12px}
  .ds .inf-filtros .ctl{min-width:0;max-width:100%;width:100%}
  /* en el móvil la tabla guarda un ancho legible y se desliza de lado DENTRO de su tarjeta (inf-tabla-ancha), sin mover la página */
  .ds .inf-tabla-ancha table{min-width:640px}
}
/* ── INFORMES · T3 «Por camión» y T4 «Ventas» (spec 2026-10-08-informes.md) ───────────────────────────────────
   Reutilizan todo lo de arriba (cifras, tabla por transportista/familia, barrita de llenado, hoja de la ficha). Lo único nuevo: las dos
   cajas de clientes nuevos y perdidos, una al lado de la otra y apiladas en el móvil. Solo tokens. */
.ds .inf-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:0 0 14px}
.ds .inf-dos .caja{margin:0}
/* ── INFORMES · Horas de carga (spec 2026-10-15-horas-de-carga.md) ─────────────────────────────────────────────
   El mapa de calor es UN solo tono (el índigo de la casa, --c-estr-fg) mezclado sobre el fondo de la tarjeta: la celda lleva la intensidad
   en --i (0 a 50 %). El tope del 50 % no es capricho: con más, el texto (--text) bajaba de 4,5 de contraste en claro (5,6 al 50 %, 4,3 al 60 %); en
   oscuro sobra (6,8 al 50 %). Sin color-mix (navegadores viejos) las celdas se quedan sin sombrear pero con su número. Solo tokens. */
.ds .inf-mapa th,.ds .inf-mapa td{padding:6px 4px}
.ds .inf-mapa th.num,.ds .inf-mapa td.num{text-align:center;min-width:42px}
.ds .inf-mapa td.cal{background:var(--surface);background:color-mix(in srgb,var(--c-estr-fg) var(--i,0%),var(--surface));color:var(--text)}
.ds .inf-mapa .inf-dia{font-weight:700;white-space:nowrap;text-align:left}
.ds .inf-mapa .inf-tot{background:var(--surface3);font-weight:700}
.ds .inf-mapa .inf-fam td{background:var(--surface3)}
.ds .inf-24{display:flex;align-items:flex-end;gap:1px;height:22px;min-width:168px}
.ds .inf-24b{flex:1 1 0;min-width:3px;background:var(--c-estr-fg);border-radius:1px 1px 0 0}
/* ── COSTES · La ventana del artículo y el precio para calcular (spec 2026-10-15-costes-ventana-articulo.md) ─────────────────────────
   El precio para calcular lleva SU color (ciruela, --cst-calculo): no es el azul de la simulación «¿Y si…?» (que significa «sin guardar»), ni el verde
   (hecho), ni el ámbar (espera), ni el morado de Business Central. Contraste medido el 15-oct: 7,9 sobre blanco y 7,4 sobre --surface2 en claro; 6,9 sobre
   --surface y 6,1 sobre --surface2 en oscuro (lo pedido: 4,5). La ventana va ENCIMA de la pantalla: un velo y un panel grande; a toda pantalla en el móvil. */
.ds .cst-calc{color:var(--cst-calculo)}
.ds .chip.cst-calc-chip{background:var(--cst-calculo-bg);color:var(--cst-calculo);border:1px solid var(--cst-calculo-ln)}
.ds .hj-calc{color:var(--cst-calculo);font-weight:700}
.ds .hj-hijo td.hj-calc{color:var(--cst-calculo)}
.ds .cst-leyenda{font-size:var(--fs-sm);color:var(--text2);margin:0 0 8px}
.ds .cst-leyenda .cst-calc{font-weight:700}
/* el velo es el .dlg-modal de siempre (fondo, centrado y scroll); aquí solo se sube por encima de las hojas y se recoge el scroll */
.ds.cart-velo{z-index:10080;padding:28px 16px;overscroll-behavior:contain}
.ds .cart-ventana{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--rd);box-shadow:var(--sh-float);width:1040px;max-width:100%;padding:20px 24px 26px;outline:none}
.ds .cart-cab{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;margin:0 0 14px}
.ds .cart-tit{font-size:var(--fs-2xl);font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.ds .cart-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin-top:6px;font-size:var(--fs-md)}
.ds .cart-cerrar{flex:none}
.ds .cart-cajas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin:0 0 14px}
.ds .cart-caja{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--border2);border-radius:var(--rd);padding:12px 16px}
.ds .cart-caja.es-calc{border-left-color:var(--cst-calculo);background:var(--cst-calculo-bg)}
.ds .cart-caja.es-calc .cst-grande{color:var(--cst-calculo)}
.ds .cart-caja .eti{font-size:var(--fs-sm);font-weight:800;color:var(--text2)}
.ds .cart-botonera{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-start;margin:0 0 16px}
.ds .cart-boton{display:flex;flex-direction:column;gap:4px;max-width:260px}
.ds .cart-motivo{font-size:var(--fs-xs);color:var(--text2)}
.ds .cart-form{background:var(--cst-calculo-bg);border:1px solid var(--cst-calculo-ln);border-radius:var(--rd);padding:16px 18px;margin:0 0 16px}
.ds .cart-form-tit{font-size:var(--fs-lg);font-weight:700;color:var(--cst-calculo);margin:0 0 4px}
.ds .cart-form-fila{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin:12px 0 0}
.ds .cart-campo{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm);font-weight:700;color:var(--text2)}
.ds .cart-campo .ctl{font-weight:400;color:var(--text)}
.ds .cart-campo .cst-input-num{width:12ch;font-size:var(--fs-lg)}
.ds .cart-campo-ancho{flex:1 1 260px}
.ds .cart-campo-ancho .ctl{width:100%;box-sizing:border-box}
.ds .cart-impacto{margin-top:14px}
.ds .cart-ventana .b:disabled{opacity:.55;cursor:not-allowed}
.ds .cart-pie{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.ds .cart-fijo{font-size:var(--fs-sm);color:var(--text2);margin:8px 0 0}
.ds .cart-ventana details.plegable{margin:0 0 12px}
.ds .cart-ventana details.plegable>summary{min-height:var(--tap);display:flex;align-items:center;font-size:var(--fs-sm)}
/* Parte 2 (escribir en Business Central): los formularios que GUARDAN en BC llevan un estilo neutro (ni la ciruela del precio para calcular, que no sale de Cargas, ni el azul de «¿Y si…?»)
   y la confirmación va resaltada con el ámbar de «ojo, esto es de verdad». Todo con tokens. */
.ds .cart-form.es-neutro{background:var(--surface2);border-color:var(--border2)}
.ds .cart-form.es-neutro .cart-form-tit{color:var(--text)}
.ds .cart-datos{font-size:var(--fs-md);margin:10px 0 0;overflow-wrap:anywhere}
/* la tabla de lo que cambia, con su propio scroll: si no, con decenas de productos el botón de guardar y la confirmación quedan muy lejos del precio que se acaba de escribir */
.ds .cart-form.es-neutro .cart-impacto .cst-caja{max-height:320px;overflow:auto}
.ds .cart-confirma{margin-top:14px;padding:14px 16px;background:var(--c-esp-bg);border:1px solid var(--c-esp-ln);border-left:5px solid var(--c-esp-fg);border-radius:var(--rd);font-size:var(--fs-md);color:var(--text)}
.ds .cart-confirma .cart-pie{margin-top:12px}
.ds .cart-opciones{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:280px;overflow:auto}
.ds .cart-opcion{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;text-align:left;min-height:var(--tap);padding:8px 12px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--rd-sm);font:inherit;font-size:var(--fs-md);cursor:pointer}
.ds .cart-opcion:hover,.ds .cart-opcion:focus-visible{border-color:var(--c-estr-fg);background:var(--c-estr-bg)}
@media (max-width:760px){
  .ds.cart-velo{padding:0}
  .ds .cart-ventana{border-radius:0;border-width:0;min-height:100vh;width:100%;padding:14px 14px 28px}
  .ds .cart-tit{font-size:var(--fs-xl)}
  .ds .cart-boton{max-width:none;width:100%}
  .ds .cart-campo{width:100%}
  .ds .cart-campo .cst-input-num{width:100%;box-sizing:border-box}
}