/* ============================================================
   PLATAFORMA 2ACEROS · sistema visual
   "Acero refinado" elevado a acabado nivel Apple:
   - Misma marca (naranja láser #E85C19 · Barlow · JetBrains Mono)
   - Más aire, jerarquía y profundidad suave por capas
   - Movimiento cuidado (entradas en cascada, resortes, tacto)
   - Adaptado de verdad a celular, tablet y escritorio
   Autoridad de diseño: docs/ui-ux-pro-max/DESIGN-SYSTEM.md
   ============================================================ */

@font-face{font-family:"Barlow Condensed";font-weight:600;src:url("BarlowCondensed-600.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Inter";font-weight:400;src:url("Inter-400.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Inter";font-weight:500;src:url("Inter-500.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Inter";font-weight:600;src:url("Inter-600.woff2") format("woff2");font-display:swap}
@font-face{font-family:"JetBrains Mono";font-weight:500;src:url("JetBrainsMono-500.woff2") format("woff2");font-display:swap}

:root{
  /* neutros (más limpios y con más aire, base gris muy claro tipo Apple) */
  --tinta:#0F1216; --tinta-2:#191D23; --tinta-3:#2A2F37;
  --humo:#F3F4F6; --carta:#FFFFFF; --carta-2:#FBFBFC;
  --texto:#15181D; --texto-2:#565E68; --texto-3:#8A929B;
  --linea:#E7E9ED; --linea-2:#D4D8DE;
  /* acento único de marca */
  --laser:#E85C19; --laser-600:#D24E10; --laser-txt:#B04512; --laser-suave:#FDEEE4; --laser-borde:#F6CDB2;
  --plano:#3D6E96; --plano-suave:#E9F1F7;
  /* semáforo de estados */
  --ok:#1C8B4E; --ok-suave:#E6F5EC; --warn:#956708; --warn-suave:#FBF1DA; --crit:#C33A2B; --crit-suave:#FBEAE7;
  /* tipografías */
  --disp:"Barlow Condensed",system-ui,sans-serif;
  --ui:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  /* radios (más redondeado = más moderno) */
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  /* profundidad suave por capas (sombras discretas, difusas) */
  --e1:0 1px 2px rgba(16,20,26,.05), 0 1px 3px rgba(16,20,26,.05);
  --e2:0 2px 6px rgba(16,20,26,.05), 0 14px 32px -12px rgba(16,20,26,.18);
  --e3:0 10px 24px -8px rgba(16,20,26,.20), 0 40px 70px -24px rgba(16,20,26,.30);
  --sombra:var(--e1); --sombra-alta:var(--e2);
  /* curvas y tiempos de movimiento */
  --ease:cubic-bezier(.4,0,.2,1);
  --out:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.42,.5,1);
  --t1:.12s; --t2:.2s; --t3:.32s;
  /* sin adornos suizos: esquina cortada desactivada */
  --corte:none;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--ui);font-size:15px;line-height:1.55;color:var(--texto);
  background:var(--humo);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
/* nada de flechitas de "subir de 1 en 1" en los campos numéricos (no se usan) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
img,svg{max-width:100%}
::selection{background:var(--laser-suave)}
:focus-visible{outline:2px solid var(--laser);outline-offset:2px}

h1,h2,h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:.01em;margin:0;text-wrap:balance}
.mono{font-family:var(--mono);font-size:.86em;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}

/* ---------- cascarón: riel lateral + contenido ---------- */
#app{display:flex;min-height:100vh}
.riel{
  width:232px;flex:none;background:var(--tinta);color:#B9C0C7;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:60;
}
.riel .marca{
  display:flex;align-items:center;gap:10px;padding:22px 22px 18px;color:#fff;
  border-bottom:1px solid var(--tinta-3);
}
.riel .marca svg{flex:none}
.logo-marca{height:26px;width:auto;display:block}
.riel nav{padding:12px 12px;flex:1;overflow-y:auto}
.riel .sep{margin:16px 12px 6px;font-family:var(--disp);font-size:.68rem;letter-spacing:.2em;color:#6E7680;text-transform:uppercase}
.riel a{
  position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;margin:2px 0;border-radius:var(--r-sm);
  color:#AEB6BD;text-decoration:none;font-size:.92rem;font-weight:500;
  transition:color var(--t1) var(--ease), background var(--t1) var(--ease);
}
.riel a:hover{color:#fff;background:var(--tinta-2)}
.riel a svg{flex:none;opacity:.8;transition:opacity var(--t1)}
.riel a:hover svg{opacity:1}
.riel a.activo{color:#fff;background:var(--tinta-2)}
.riel a.activo svg{opacity:1;color:var(--laser)}
.riel a.activo::before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--laser);
  animation:barritaIn .3s var(--spring);
}
@keyframes barritaIn{from{height:0;opacity:0}to{height:20px;opacity:1}}
@keyframes chispa{0%,100%{opacity:1}50%{opacity:.4}}
.riel .pie{border-top:1px solid var(--tinta-3);padding:16px 22px;font-size:.78rem;color:#8A939C}
.riel .pie b{color:#E4E7EA;font-weight:600}

/* velo del cajón (solo en celular) */
.riel-velo{display:none}

.lienzo{flex:1;min-width:0;display:flex;flex-direction:column}
.barra{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  background:color-mix(in srgb, var(--humo) 82%, transparent);backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  padding:14px 32px;border-bottom:1px solid var(--linea);
}
.barra h1{font-size:1.5rem;text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.barra .miga{color:var(--texto-3);font-size:.82rem;margin-top:2px}
.barra .der{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.menu-btn{
  display:none;flex:none;width:42px;height:42px;border-radius:var(--r-sm);align-items:center;justify-content:center;
  color:var(--texto);border:1px solid var(--linea);background:var(--carta);box-shadow:var(--e1);
  transition:transform var(--t1) var(--spring), background var(--t1);
}
.menu-btn:active{transform:scale(.92)}
.vista{padding:28px 32px 84px;max-width:1200px;width:100%;margin:0 auto}
.vista.entra{animation:entra .4s var(--out) both}
@keyframes entra{from{opacity:0}to{opacity:1}}

/* entrada en cascada de lo que se ve al cambiar de sección */
.vista.entra > *{animation:sube-suave .5s var(--out) both}
.vista.entra > *:nth-child(1){animation-delay:.02s}
.vista.entra > *:nth-child(2){animation-delay:.07s}
.vista.entra > *:nth-child(3){animation-delay:.12s}
.vista.entra > *:nth-child(4){animation-delay:.17s}
.vista.entra > *:nth-child(5){animation-delay:.22s}
.vista.entra > *:nth-child(n+6){animation-delay:.26s}
.vista.entra :is(.rejilla.c4 > *, .productos > .producto, .lista > .lista-fila, .cat-rejilla > .cat-item){animation:sube-suave .52s var(--out) both}
.vista.entra :is(.rejilla.c4 > *, .productos > .producto, .lista > .lista-fila, .cat-rejilla > .cat-item):nth-child(1){animation-delay:.06s}
.vista.entra :is(.rejilla.c4 > *, .productos > .producto, .lista > .lista-fila, .cat-rejilla > .cat-item):nth-child(2){animation-delay:.1s}
.vista.entra :is(.rejilla.c4 > *, .productos > .producto, .lista > .lista-fila, .cat-rejilla > .cat-item):nth-child(3){animation-delay:.14s}
.vista.entra :is(.rejilla.c4 > *, .productos > .producto, .lista > .lista-fila, .cat-rejilla > .cat-item):nth-child(4){animation-delay:.18s}
.vista.entra :is(.rejilla.c4 > *, .productos > .producto, .lista > .lista-fila, .cat-rejilla > .cat-item):nth-child(5){animation-delay:.22s}
.vista.entra :is(.rejilla.c4 > *, .productos > .producto, .lista > .lista-fila, .cat-rejilla > .cat-item):nth-child(6){animation-delay:.26s}
.vista.entra :is(.rejilla.c4 > *, .productos > .producto, .lista > .lista-fila, .cat-rejilla > .cat-item):nth-child(7){animation-delay:.3s}
.vista.entra :is(.rejilla.c4 > *, .productos > .producto, .lista > .lista-fila, .cat-rejilla > .cat-item):nth-child(n+8){animation-delay:.34s}
@keyframes sube-suave{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* "ver como" (cambiar de rol para probar) */
.como{
  display:flex;align-items:center;gap:8px;background:var(--carta);border:1px solid var(--linea);
  border-radius:var(--r-sm);padding:7px 12px;font-size:.82rem;color:var(--texto-2);box-shadow:var(--e1);min-width:0;
}
.como select{border:none;background:none;font-weight:600;color:var(--texto);padding:0 2px;max-width:190px;text-overflow:ellipsis}
.como select:focus{outline:2px solid var(--laser);outline-offset:2px;border-radius:4px}

/* ---------- piezas comunes ---------- */
.carta{
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-md);box-shadow:var(--e1);
}
.carta.corte{clip-path:var(--corte)}
.carta .cab{
  display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--linea);
}
.carta .cab h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.11em;color:var(--texto-2)}
.carta .cab .der{margin-left:auto;display:flex;gap:8px;align-items:center}
.cuerpo{padding:18px 20px}

.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-sm);padding:10px 17px;
  font-weight:600;font-size:.88rem;border:1px solid var(--linea-2);background:var(--carta);
  color:var(--texto);box-shadow:var(--e1);
  transition:transform var(--t1) var(--spring), box-shadow var(--t2) var(--ease), background var(--t1) var(--ease), border-color var(--t1);
}
.boton:hover{background:var(--carta-2);border-color:var(--linea-2);box-shadow:var(--e2)}
.boton:active{transform:scale(.96)}
.boton:focus-visible{outline:2px solid var(--laser);outline-offset:2px}
.boton.primario{background:var(--laser);border-color:transparent;color:#fff;box-shadow:0 1px 2px rgba(176,69,18,.25), 0 6px 16px -6px rgba(232,92,25,.5)}
.boton.primario:hover{background:var(--laser-600);box-shadow:0 2px 4px rgba(176,69,18,.3), 0 10px 22px -6px rgba(232,92,25,.6)}
.boton.bueno{background:var(--ok);border-color:transparent;color:#fff;box-shadow:0 1px 2px rgba(20,100,55,.25), 0 6px 16px -6px rgba(28,139,78,.5)}
.boton.bueno:hover{background:#177A44}
.boton.fantasma{border-color:transparent;box-shadow:none;background:transparent;color:var(--texto-2)}
.boton.fantasma:hover{color:var(--texto);background:color-mix(in srgb,var(--texto) 6%, transparent);box-shadow:none}
.boton.grande{padding:13px 24px;font-size:1rem;border-radius:var(--r-md)}
.boton[disabled]{opacity:.45;cursor:not-allowed}

.sello{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:600;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-xs);
  padding:3px 10px;border:1px solid var(--linea-2);color:var(--texto-2);background:var(--carta);
  white-space:nowrap;
}
.sello.laser{color:var(--laser-txt);border-color:var(--laser-borde);background:var(--laser-suave)}
.sello.ok{color:var(--ok);border-color:#BEDFCB;background:var(--ok-suave)}

/* El cronómetro del taller (2026-07-28). Sube de tono con las horas: no es
   decoración, es la señal de que un trabajo lleva demasiado ahí parado. */
.sello.reloj{font-variant-numeric:tabular-nums}
.sello.reloj-ojo{color:var(--warn);border-color:#E9D8A6;background:var(--warn-suave)}
.sello.reloj-mal{color:var(--crit);border-color:#EBC4C4;background:var(--crit-suave)}
.sello.reloj-fin{color:var(--texto-3)}
.tv-reloj{
  margin-top:6px;font-family:var(--mono);font-size:1.05em;color:#9AA3AC;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;word-spacing:-.18em}
.tv-reloj.reloj-ojo{color:#E8B84B}
.tv-reloj.reloj-mal{color:#F0793B;font-weight:600}
.tv-reloj.reloj-fin{color:#2EBD6B}

/* El cronómetro del televisor. Mismo número en dos sitios y siempre en el
   mismo lugar de la pantalla: arriba a la derecha en la orden abierta, a la
   derecha del trabajo grande en la lista. Que no haya que buscarlo. */
.tv-crono-num{
  font-family:var(--mono);font-weight:500;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;word-spacing:-.18em;white-space:nowrap}
.tv-crono-num.reloj-ojo{color:#E8B84B}
.tv-crono-num.reloj-mal{color:#F0793B}
.tv-crono-num.reloj-fin{color:#2EBD6B}
.tv-crono-cab .tv-crono-num{font-size:2.3em}
.tv-ahora-reloj .tv-crono-num{font-size:2.1em}
.punto-vivo{
  width:.5em;height:.5em;border-radius:50%;background:#E85C19;flex:none;
  animation:crono-late 2s ease-in-out infinite}
@keyframes crono-late{0%,100%{opacity:1}50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.punto-vivo{animation:none}}
.tv-crono-sub{color:#8A939C;margin-top:.25em;font-size:.8em;line-height:1.3}
.sello.warn{color:var(--warn);border-color:#EBD6A5;background:var(--warn-suave)}
.sello.crit{color:var(--crit);border-color:#EDC4BD;background:var(--crit-suave)}
.sello.plano{color:var(--plano);border-color:#BFD5E5;background:var(--plano-suave)}

.aviso{
  display:block;border:1px solid var(--linea);border-left:3px solid var(--texto-3);
  border-radius:var(--r-sm);padding:12px 15px;font-size:.86rem;line-height:1.5;background:var(--carta);color:var(--texto-2);
}
.aviso b{color:var(--texto)}
.aviso.ok{border-left-color:var(--ok);background:var(--ok-suave);border-color:#CBE5D5}
.aviso.warn{border-left-color:var(--warn);background:var(--warn-suave);border-color:#EBD6A5;color:#6B5410}
.aviso.warn b{color:#57430B}

/* cota de plano técnico (firma secundaria) */
.cota{display:inline-flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--mono);color:var(--plano);font-size:.84rem}
.cota .linea-cota{display:flex;align-items:center;width:100%}
.cota .linea-cota::before,.cota .linea-cota::after{content:"";flex:1;height:1.5px;background:var(--plano)}
.cota .linea-cota::before{clip-path:polygon(0 50%, 8px 0, 8px 100%)}
.cota .linea-cota::after{clip-path:polygon(100% 50%, calc(100% - 8px) 0, calc(100% - 8px) 100%)}

/* rejillas */
.rejilla{display:grid;gap:16px}
.rejilla.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.rejilla.c3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rejilla.c4{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}

/* tabla */
table.tabla{width:100%;border-collapse:collapse;font-size:.88rem}
.tabla th{
  font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  font-size:.68rem;color:var(--texto-3);text-align:left;padding:10px 15px;border-bottom:1.5px solid var(--linea-2);
}
.tabla td{padding:11px 15px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla tr:last-child td{border-bottom:none}
.tabla tr:hover td{background:var(--carta-2)}
.tabla td.der,.tabla th.der{text-align:right}
.precio-celda{font-family:var(--mono);font-weight:500;cursor:pointer;border-radius:var(--r-xs);padding:4px 7px;transition:background var(--t1)}
.precio-celda:hover{background:var(--laser-suave);outline:1px dashed var(--laser-borde)}
.precio-celda input{width:90px;font-family:var(--mono);border:1.5px solid var(--laser);border-radius:var(--r-xs);padding:3px 6px}

/* pestañas */
.pestanas{display:flex;gap:4px;border-bottom:1px solid var(--linea);margin-bottom:18px;flex-wrap:wrap}
.pestanas button{
  padding:9px 18px;font-weight:600;font-size:.88rem;color:var(--texto-2);border-radius:var(--r-sm) var(--r-sm) 0 0;
  border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:color var(--t1), background var(--t1);
}
.pestanas button:hover{color:var(--texto);background:var(--carta-2)}
.pestanas button.activa{color:var(--laser-txt);border-bottom-color:var(--laser)}
.pestanas button:focus-visible{outline:2px solid var(--laser);outline-offset:-2px}
.pestanas-compras{align-items:stretch}
.pestanas-compras .pest-grupo{display:flex;gap:4px}
.pestanas-compras .pest-der{margin-left:auto}
.pestanas-compras .pest-der.activa{color:var(--laser-txt);border-bottom-color:var(--laser)}
.cab-plegable{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;background:var(--carta-2);border:none;font:inherit;padding:14px 18px;transition:background var(--t1)}
.cab-plegable:hover{background:var(--humo)}
.cab-plegable .chev{color:var(--texto-3);font-size:.8rem;width:12px;flex:none;transition:transform var(--t2) var(--out)}
.cab-plegable[aria-expanded=true] .chev{transform:rotate(0)}
.cab-plegable h3{margin:0}
.cab-plegable .der{margin-left:auto}
.cab-plegable:focus-visible{outline:2px solid var(--laser);outline-offset:-2px}
.celda-edit{background:none;border:none;border-bottom:1px dashed var(--linea-2);cursor:pointer;font:inherit;color:var(--texto);padding:2px 3px;transition:border-color var(--t1)}
.celda-edit:hover{border-bottom-color:var(--laser)}
.check-compra{font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;border:1px solid var(--linea-2);border-radius:var(--r-sm);padding:6px 12px;background:var(--carta);color:var(--texto-2);white-space:nowrap;transition:transform var(--t1) var(--spring), border-color var(--t1), color var(--t1), background var(--t1)}
.check-compra:hover{border-color:var(--ok);color:var(--ok)}
.check-compra:active{transform:scale(.94)}
.check-compra.ok{background:var(--ok-suave);border-color:#CBE5D5;color:var(--ok)}
.fila-comprada td{background:color-mix(in srgb, var(--ok-suave) 45%, transparent)}
.fila-comprada .celda-edit,.fila-comprada .precio-celda{color:var(--texto-3)}

/* fichas KPI (tablero) */
.kpi{padding:18px 20px}
.kpi .eti{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--texto-3)}
.kpi .valor{font-family:var(--mono);font-size:clamp(1.4rem,2.4vw,2rem);font-weight:500;letter-spacing:-.03em;margin-top:6px;line-height:1.05;white-space:nowrap}
.kpi .detalle{font-size:.8rem;color:var(--texto-2);margin-top:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kpi .detalle .sube{color:var(--ok);font-weight:600}
.kpi .detalle .baja{color:var(--warn);font-weight:600}
.kpi.clic{cursor:pointer;text-align:left;width:100%;font:inherit;transition:box-shadow var(--t2) var(--ease), transform var(--t2) var(--out), border-color var(--t1)}
.kpi.clic:hover{box-shadow:var(--e2);border-color:var(--linea-2);transform:translateY(-3px)}
.kpi.clic:hover .mas{text-decoration:underline}
.kpi.clic:active{transform:translateY(-1px) scale(.99)}
.kpi.clic:focus-visible{outline:2px solid var(--laser);outline-offset:2px}
.kpi .mas{color:var(--laser-txt);font-weight:600;white-space:nowrap}

/* ---- tablero: alertas, agenda, ranking ---- */
.alertas{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.alerta{display:flex;align-items:center;gap:12px;border-radius:var(--r-md);padding:12px 16px;font-size:.9rem;border:1px solid var(--linea);border-left:3px solid var(--texto-3);background:var(--carta);box-shadow:var(--e1)}
.alerta .ico{font-weight:700;font-size:.78rem}
.alerta a{margin-left:auto;white-space:nowrap;padding:6px 13px}
.alerta.warn{background:var(--warn-suave);border-color:#EBD6A5;border-left-color:var(--warn);color:#6B5410}
.alerta.warn .ico{color:var(--warn)}
.alerta.crit{background:var(--crit-suave);border-color:#EDC4BD;border-left-color:var(--crit);color:#7A241B}
.alerta.crit .ico{color:var(--crit)}
.dia-chip{flex:none;width:48px;height:48px;border-radius:var(--r-sm);background:var(--humo);border:1px solid var(--linea);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--mono);line-height:1.1;gap:1px}
.dia-chip small{font-size:.56rem;letter-spacing:.03em;text-transform:uppercase;opacity:.85}
.dia-chip b{font-size:1.1rem}
.dia-chip.crit{background:var(--crit-suave);border-color:#EDC4BD;color:var(--crit)}
.dia-chip.warn{background:var(--warn-suave);border-color:#EBD6A5;color:var(--warn)}
.dia-chip.plano{background:var(--plano-suave);border-color:#BFD5E5;color:var(--plano)}
.medalla{flex:none;width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:600;font-size:.82rem;background:var(--humo);border:1px solid var(--linea);color:var(--texto-2)}
.medalla.m0{background:var(--laser-suave);border-color:var(--laser-borde);color:var(--laser-txt)}
.barra-rank{height:5px;border-radius:3px;background:var(--linea);margin:0 0 6px 37px;overflow:hidden}
.barra-rank span{display:block;height:100%;background:linear-gradient(90deg,var(--laser-600),var(--laser));border-radius:3px;transition:width .6s var(--out)}
.embudo{display:flex;gap:10px;margin:2px 0 14px}
.paso-embudo{flex:1;border:1px solid var(--linea);border-left:3px solid var(--texto-3);border-radius:var(--r-sm);padding:10px 13px;background:var(--carta-2)}
.paso-embudo .et{display:block;font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.62rem;color:var(--texto-3)}
.paso-embudo b{font-family:var(--mono);font-size:1.25rem;line-height:1.3}
.paso-embudo small{display:block;color:var(--texto-2);font-size:.76rem;font-variant-numeric:tabular-nums}
.paso-embudo.cerrar{border-left-color:var(--warn)}
.paso-embudo.proceso{border-left-color:var(--laser)}
.paso-embudo.entregada{border-left-color:var(--ok)}

/* lista de renglones */
.renglon{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--linea);font-size:.9rem}
.renglon:first-of-type{border-top:none}
.renglon small{display:block;color:var(--texto-3);font-size:.78rem;margin-top:1px}
.renglon .fin{margin-left:auto;display:flex;align-items:center;gap:10px;white-space:nowrap}
button.renglon{width:100%;text-align:left;background:none;border-radius:var(--r-sm);transition:background var(--t1)}
button.renglon:hover{background:var(--carta-2)}

/* gráfica de barras sencilla */
.barritas{display:flex;align-items:flex-end;gap:12px;height:96px;padding:22px 4px 0}
.barritas .b{flex:1;background:var(--linea-2);border-radius:4px 4px 0 0;position:relative;min-width:30px;transition:height .5s var(--out)}
.barritas .b.actual{background:linear-gradient(180deg,var(--laser),var(--laser-600))}
.barritas .b span{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.74rem;color:var(--texto);white-space:nowrap}
.barritas button.b{cursor:pointer;font:inherit;border:none;padding:0;transition:filter var(--t1), height .5s var(--out)}
.barritas button.b:hover{filter:brightness(.92)}
.barritas button.b:focus-visible{outline:2px solid var(--laser);outline-offset:2px}
.barritas-x{display:flex;gap:12px;padding:6px 4px 0}
.barritas-x span{flex:1;text-align:center;font-size:.72rem;color:var(--texto-3)}

/* asistente del cotizador */
.pasos{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px}
.paso-chip{
  display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);
  font-family:var(--disp);font-weight:600;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texto-3);transition:background var(--t2), color var(--t2);
}
.paso-chip i{
  width:21px;height:21px;border-radius:50%;border:1.6px solid currentColor;font-style:normal;
  display:flex;align-items:center;justify-content:center;font-size:.68rem;flex:none;transition:all var(--t2) var(--spring);
}
.paso-chip.hecho{color:var(--ok)}
.paso-chip.actual{background:var(--laser-suave);color:var(--laser-txt)}
.paso-chip.actual i{background:var(--laser);border-color:var(--laser);color:#fff}
.paso-chip button{color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;display:flex;align-items:center;gap:7px}

.subir-logo{display:inline-flex;align-items:center;gap:9px;padding:12px 17px;border:1.5px dashed var(--linea-2);border-radius:var(--r-sm);background:var(--carta);color:var(--texto-2);font-size:.9rem;font-weight:600;cursor:pointer;transition:border-color var(--t1),color var(--t1),background var(--t1)}
.subir-logo:hover{border-color:var(--laser-borde);color:var(--laser-txt);background:var(--laser-suave)}
.subir-logo:focus-within{outline:2px solid var(--laser);outline-offset:2px}
.logo-cargado{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--linea);border-radius:var(--r-sm);background:var(--carta-2)}
.logo-cargado img{width:56px;height:44px;object-fit:contain;background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-xs)}
.logo-cargado span{font-size:.88rem;color:var(--ok);font-weight:600}
.logo-cargado .boton{margin-left:auto}

.buscador-cliente{display:flex;gap:10px;align-items:stretch;max-width:640px;margin-bottom:14px}
.buscador-cliente .boton{white-space:nowrap}
.inp-busca{flex:1;min-width:0;background:var(--carta);border:1px solid var(--linea-2);border-radius:var(--r-sm);padding:11px 14px;font-size:1rem;color:var(--texto);box-shadow:var(--e1);transition:border-color var(--t1), box-shadow var(--t1)}
.inp-busca:focus{outline:none;border-color:var(--laser);box-shadow:0 0 0 3px var(--laser-suave)}

.productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.producto{
  position:relative;background:var(--carta);border:1.5px solid var(--linea);border-radius:var(--r-md);
  padding:18px 16px 15px;text-align:left;display:flex;flex-direction:column;gap:10px;box-shadow:var(--e1);
  transition:border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease), transform var(--t2) var(--out);
}
.producto:hover{border-color:var(--laser-borde);box-shadow:var(--e2);transform:translateY(-3px)}
.producto:active{transform:translateY(-1px) scale(.99)}
.producto:focus-visible{outline:2px solid var(--laser);outline-offset:2px}
.producto svg{color:var(--laser);opacity:.9}
.producto .nom{font-weight:600;font-size:.94rem;line-height:1.25}
.producto .des{color:var(--texto-3);font-size:.76rem;line-height:1.4}
.producto.elegido{border-color:var(--laser);box-shadow:0 0 0 3px var(--laser-suave)}
.producto.manual{border-style:dashed}
.producto.manual svg{color:var(--texto-3)}

.campo{margin-bottom:16px}
.campo>label{
  display:block;font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;font-size:.72rem;color:var(--texto-2);margin-bottom:7px;
}
/* Todos los tipos de campo se ven igual. Faltaban search, fecha, correo y
   teléfono: salían "de sistema", angostos y de otro mundo. */
.campo input[type=text],.campo input[type=number],.campo input[type=password],
.campo input[type=search],.campo input[type=datetime-local],.campo input[type=date],
.campo input[type=time],.campo input[type=email],.campo input[type=tel],
.campo select,.campo textarea{
  width:100%;background:var(--carta);border:1px solid var(--linea-2);border-radius:var(--r-sm);
  padding:11px 13px;font-size:1rem;box-shadow:var(--e1);transition:border-color var(--t1), box-shadow var(--t1);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--laser);box-shadow:0 0 0 3px var(--laser-suave)}
/* flecha propia en los desplegables: se ven parte de la página, no "de sistema" */
.campo select,.chips-a5 select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.campo .medida-caja{display:flex;align-items:center;gap:0;border:1px solid var(--linea-2);border-radius:var(--r-sm);background:var(--carta);overflow:hidden;box-shadow:var(--e1);transition:box-shadow var(--t1)}
.campo .medida-caja input{border:none;flex:1;min-width:0;padding:11px 13px;font-family:var(--mono);font-size:1.05rem;box-shadow:none}
.campo .medida-caja input:focus{outline:none;box-shadow:none}
.campo .medida-caja:focus-within{border-color:var(--laser);box-shadow:0 0 0 3px var(--laser-suave)}
.campo .medida-caja .unidad{padding:0 13px;color:var(--texto-3);font-size:.82rem;border-left:1px solid var(--linea)}
.fila-campos{display:flex;gap:14px}
.fila-campos .campo{flex:1}

.fichas{display:flex;gap:8px;flex-wrap:wrap}
.ficha{
  border:1.5px solid var(--linea-2);border-radius:var(--r-pill);padding:9px 18px;font-size:.9rem;
  background:var(--carta);color:var(--texto-2);box-shadow:var(--e1);
  transition:border-color var(--t1),color var(--t1),background var(--t1),transform var(--t1) var(--spring);
}
.ficha:hover{border-color:var(--texto-3)}
.ficha:active{transform:scale(.95)}
.ficha.activa{border-color:var(--laser);color:var(--laser-txt);background:var(--laser-suave);font-weight:600}
.ficha:focus-visible{outline:2px solid var(--laser);outline-offset:2px}

.interruptor{
  display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--carta);
  border:1px solid var(--linea);border-radius:var(--r-md);padding:13px 16px;margin-bottom:10px;width:100%;text-align:left;
  box-shadow:var(--e1);transition:border-color var(--t1), box-shadow var(--t1);
}
.interruptor:hover{border-color:var(--linea-2)}
.interruptor .txt{font-size:.92rem;font-weight:500}
.interruptor .txt small{display:block;color:var(--texto-3);font-size:.78rem;font-weight:400;margin-top:1px}
.interruptor .palanca{
  width:44px;height:26px;border-radius:var(--r-pill);background:var(--linea-2);position:relative;flex:none;transition:background var(--t2) var(--ease);
}
.interruptor .palanca::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left var(--t3) var(--spring);
}
.interruptor[aria-pressed=true] .palanca{background:var(--ok)}
.interruptor[aria-pressed=true] .palanca::after{left:21px}
.interruptor:focus-visible{outline:2px solid var(--laser);outline-offset:2px}

.dibujo-vivo{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-md);padding:16px;position:relative;box-shadow:var(--e1)}
.dibujo-vivo .eti{
  position:absolute;top:12px;left:16px;font-family:var(--disp);font-weight:600;font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--plano);
}

/* opciones de precio */
.opciones-precio{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 4px;max-width:600px}
.opcion-precio{
  flex:1;min-width:150px;position:relative;text-align:left;background:var(--carta);
  border:1px solid var(--linea-2);border-radius:var(--r-md);padding:0;box-shadow:var(--e1);
  transition:border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease), transform var(--t2) var(--out);
}
.opcion-precio:hover{transform:translateY(-2px);box-shadow:var(--e2)}
.opcion-precio .nom{
  display:block;font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.11em;
  font-size:.64rem;color:var(--texto-3);padding:9px 14px;border-bottom:1px solid var(--linea);
  background:var(--carta-2);border-radius:var(--r-md) var(--r-md) 0 0;
}
.opcion-precio .monto{
  display:block;font-family:var(--mono);font-size:1.35rem;font-weight:500;letter-spacing:-.01em;line-height:1.1;
  color:var(--texto);font-variant-numeric:tabular-nums;padding:14px 14px 3px;
}
.opcion-precio .des{display:block;font-size:.74rem;color:var(--texto-3);line-height:1.35;padding:0 14px 13px}
.opcion-precio.elegida{border-color:var(--laser);box-shadow:0 0 0 2px var(--laser-suave), var(--e2)}
.opcion-precio.elegida .nom{background:var(--laser-suave);color:var(--laser-txt);border-bottom-color:var(--laser-borde)}
.opcion-precio.elegida::after{
  content:"ELEGIDA";position:absolute;top:-9px;right:12px;background:var(--laser);color:#fff;
  font-family:var(--disp);font-weight:600;font-size:.58rem;letter-spacing:.12em;padding:3px 9px;border-radius:var(--r-xs);
  box-shadow:0 4px 10px -3px rgba(232,92,25,.6);animation:sello-pop .3s var(--spring)}
@keyframes sello-pop{from{opacity:0;transform:translateY(4px) scale(.8)}to{opacity:1;transform:none}}
.opcion-precio:focus-visible{outline:2px solid var(--laser);outline-offset:2px}

.burbuja{
  background:#E9F6EB;border:1px solid #CBE6D1;border-radius:14px 14px 14px 4px;
  padding:15px 17px;font-size:.9rem;line-height:1.55;color:#243228;white-space:pre-wrap;
}

/* kanban producción */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.kanban h4{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;color:var(--texto-2);
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
}
.kanban h4 .n{background:var(--linea);border-radius:var(--r-pill);padding:0 9px;font-family:var(--mono);font-size:.72rem}
.tarjeta-ot{
  width:100%;text-align:left;background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-md);
  padding:14px 15px;margin-bottom:12px;box-shadow:var(--e1);
  transition:box-shadow var(--t2) var(--ease),border-color var(--t1),transform var(--t2) var(--out);
}
.tarjeta-ot:hover{box-shadow:var(--e2);border-color:var(--linea-2);transform:translateY(-3px)}
.tarjeta-ot:active{transform:translateY(-1px) scale(.995)}
.tarjeta-ot:focus-visible{outline:2px solid var(--laser);outline-offset:2px}
.tarjeta-ot .cod{font-family:var(--mono);font-size:.74rem;color:var(--texto-3)}
.tarjeta-ot .tit{font-weight:600;font-size:.92rem;line-height:1.3;margin:3px 0 4px}
.tarjeta-ot .fila-sellos{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* panel lateral (detalle OT) */
.velo{position:fixed;inset:0;background:rgba(15,18,22,.5);z-index:80;animation:aparece .2s var(--ease);backdrop-filter:blur(2px)}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.panel-lateral{
  position:fixed;top:0;right:0;bottom:0;width:min(480px,94vw);background:var(--carta);
  z-index:90;box-shadow:var(--e3);display:flex;flex-direction:column;
  animation:desliza .34s var(--out);
}
@keyframes desliza{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.panel-lateral .cab{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--linea)}
.panel-lateral .cuerpo{padding:20px 22px;overflow-y:auto;flex:1}
.panel-lateral .pie{padding:16px 22px;border-top:1px solid var(--linea);display:flex;gap:10px;flex-wrap:wrap}

/* modal */
.modal{
  position:fixed;z-index:100;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(560px,94vw);max-height:90vh;overflow-y:auto;background:var(--carta);border-radius:var(--r-lg);
  box-shadow:var(--e3);animation:modalIn .36s var(--spring);
}
@keyframes modalIn{from{opacity:0;transform:translate(-50%,calc(-50% + 16px)) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.modal.sin-anim{animation:none}
.modal-fondo{position:fixed;inset:0;z-index:99;background:rgba(15,18,22,.5);backdrop-filter:blur(2px)}
.modal.modal-ancho{width:min(640px,94vw)}
.modal.modal-ficha{width:min(680px,95vw);animation:fichaIn .34s var(--spring)}
@keyframes fichaIn{from{opacity:0;transform:translate(-50%,-46%) scale(.955)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.lista{display:flex;flex-direction:column;gap:10px}
.lista-fila{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-md);padding:14px 16px;cursor:pointer;box-shadow:var(--e1);transition:border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease),transform var(--t2) var(--out);font:inherit;color:inherit}
.lista-fila:hover{border-color:var(--laser-borde);box-shadow:var(--e2);transform:translateY(-2px)}
.lista-fila:active{transform:translateY(0) scale(.995)}
.lista-fila:focus-visible{outline:2px solid var(--laser);outline-offset:2px}
.lista-fila .lf-mini{width:54px;height:42px;border-radius:var(--r-xs);flex:none;background:repeating-linear-gradient(135deg,#C6CDD3 0 8px,#D7DCE1 8px 16px);background-size:cover;background-position:center}
.lista-fila .lf-main{min-width:0;flex:1}
.lista-fila .lf-main b{font-size:.97rem}
.lista-fila .lf-sub{color:var(--texto-3);font-size:.82rem;margin-top:2px}
.lista-fila .lf-sellos{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.lista-fila .lf-chev{color:var(--texto-3);flex:none;font-size:1.3rem;transition:transform var(--t2) var(--out)}
.lista-fila:hover .lf-chev{transform:translateX(3px);color:var(--laser)}
.ficha-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.ficha-stats>div{display:flex;flex-direction:column;gap:2px;padding:11px 13px;background:var(--carta-2);border:1px solid var(--linea);border-radius:var(--r-sm)}
.ficha-stats span{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-3);font-family:var(--disp);font-weight:600}
.ficha-stats b{font-size:.98rem;color:var(--texto)}
.ficha-sec-t{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--texto-3);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--linea)}
.retazo-foto{width:100%;height:220px;border-radius:var(--r-md);border:1px solid var(--linea-2);background:repeating-linear-gradient(135deg,#C6CDD3 0 12px,#D7DCE1 12px 24px);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.retazo-foto span{color:var(--texto-3);font-size:.86rem;background:rgba(255,255,255,.7);padding:4px 10px;border-radius:var(--r-xs)}
.ana-titulo{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--texto-2);margin-bottom:10px}
.ana-titulo span{color:var(--texto-3);font-weight:400;text-transform:none;letter-spacing:0;font-family:var(--ui);font-size:.8rem}
.ana-wrap{max-width:620px;display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.modulo-ana .ana-sec-t{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:.66rem;color:var(--texto-3);margin:8px 0 0}
.ana-precios{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--linea)}
.ana-precios>div{flex:1;min-width:118px;display:flex;flex-direction:column;gap:2px;padding:9px 13px;background:var(--carta-2);border:1px solid var(--linea);border-radius:var(--r-sm)}
.ana-precios span{font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-3);font-family:var(--disp);font-weight:600}
.ana-precios b{font-size:1rem}
.ana-precios .ana-b{background:var(--laser-suave);border-color:var(--laser-borde)}
.ana-precios .ana-b b{color:var(--laser-txt)}
.modal.modal-catalogo{width:min(920px,95vw)}
.cat-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.cat-item{display:flex;flex-direction:column;gap:0;padding:0;background:var(--carta);border:1px solid var(--linea-2);border-radius:var(--r-sm);overflow:hidden;cursor:pointer;transition:border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease),transform var(--t2) var(--out);text-align:left}
.cat-item img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--humo);display:block}
.cat-item span{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.62rem;color:var(--texto-3);padding:8px 9px;border-top:1px solid var(--linea)}
.cat-item:hover{border-color:var(--laser-borde);box-shadow:var(--e2);transform:translateY(-3px)}
.cat-item.sel{border-color:var(--laser);box-shadow:0 0 0 2px var(--laser-suave)}
.cat-item.sel span{color:var(--laser-txt);background:var(--laser-suave)}
.plano-lienzo{border:1px solid var(--linea-2);border-radius:var(--r-md);background:var(--carta);padding:12px;display:flex;justify-content:center}
.plano-lienzo svg{width:100%;max-width:440px;height:auto}
.plano-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:14px}
.plano-datos>div{display:flex;flex-direction:column;gap:2px;padding:10px 13px;background:var(--carta-2);border:1px solid var(--linea);border-radius:var(--r-sm)}
.plano-datos span{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--texto-3);font-family:var(--disp);font-weight:600}
.plano-datos b{font-size:.95rem;color:var(--texto)}
.modal .cab{display:flex;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid var(--linea);position:sticky;top:0;background:color-mix(in srgb,var(--carta) 90%, transparent);backdrop-filter:blur(8px);z-index:2}
.modal .cuerpo{padding:20px 24px}
.modal .pie{padding:16px 24px;border-top:1px solid var(--linea);display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;background:color-mix(in srgb,var(--carta) 90%, transparent);backdrop-filter:blur(8px)}
.fila-anim{animation:filaEntra .4s var(--out) backwards}
@keyframes filaEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* mensajes (maqueta del CRM embebido) */
.crm-demo{display:flex;min-height:380px;overflow:hidden}
.crm-lista{width:230px;flex:none;border-right:1px solid var(--linea)}
.crm-panel{flex:1;display:flex;flex-direction:column;min-width:0}

/* toast */
#avisos{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:calc(100% - 32px);max-width:440px}
.toast{
  background:var(--tinta);color:#fff;border-radius:var(--r-md);padding:12px 20px;font-size:.9rem;
  box-shadow:var(--e3);display:flex;gap:11px;align-items:center;animation:toastIn .34s var(--spring);max-width:100%;
}
.toast .punto{width:8px;height:8px;border-radius:50%;flex:none;background:var(--laser);box-shadow:0 0 8px 1px rgba(232,92,25,.8)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* ============================================================
   MODO TELEVISOR · rediseño para pantallas de 32" (2026-07-28)

   Se ve de pie, a 2–4 metros, con las manos ocupadas y sin poder acercarse.
   De ahí salen las cuatro reglas de esta hoja:

   1. TODO MEDIDO CONTRA LA ALTURA. La letra sale de `min(2.6vh, 1.6vw)`, así
      que un televisor de 1366×768 y uno de 1920×1080 muestran EXACTAMENTE lo
      mismo, más grande o más pequeño, pero nunca más o menos cosas. Nada en
      `rem` ni en píxeles: eso no crece con la pantalla.
   2. NADA SE SALE NI SE DESLIZA. Un televisor no tiene quién le baje la barra:
      lo que no cabe, no existe. Por eso la cola dice "+N esperando" en vez de
      esconder trabajos abajo.
   3. UN SOLO PROTAGONISTA. Un operador hace UNA pieza a la vez. El trabajo
      señalado manda en tamaño; los que siguen son renglones de una línea.
   4. SIN EMOJI. En los navegadores de televisor barato salen como cuadritos.
      Las señales son formas dibujadas con CSS (el triángulo de urgente, el
      punto que late) o palabras.

   Los colores son los del sistema: un solo acento naranja láser y el semáforo
   para los estados. El televisor es su propio mundo oscuro (DESIGN-SYSTEM.md).
   ============================================================ */
body.es-tv{background:#0E1114;overflow:hidden}
.tv-pantalla{
  position:fixed;inset:0;background:#0E1114;color:#EFF1F3;display:flex;flex-direction:column;
  font-size:min(2.6vh, 1.6vw);
  /* Muchos televisores recortan el borde de la imagen ("overscan"). El margen
     de seguridad evita que la hora o las teclas queden fuera del vidrio. */
  padding:.5vh .8vw;
}
.tv-pantalla>*{flex:none}

/* LA FRANJA. La única pieza decorativa, y no es decorativa: pintada con el
   estado del trabajo señalado, dice desde la otra punta del taller si algo
   lleva demasiado tiempo ahí. Verde recién entrado, ámbar más de un día,
   naranja más de tres. */
.tv-franja{height:.55em;border-radius:.3em;background:#2EBD6B;transition:background .4s linear}
.tv-pantalla.estado-ojo .tv-franja{background:#E8B84B}
.tv-pantalla.estado-mal .tv-franja{background:#F0793B}
.tv-pantalla.estado-fin .tv-franja{background:#2EBD6B}

.tv-cab{display:flex;align-items:center;gap:1em;padding:.55em .8em .5em}
.tv-cab .tit{font-family:var(--disp);font-weight:600;font-size:1.55em;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap}
.tv-cab .tit i{color:#F0793B;font-style:normal}
.tv-cab .reloj{margin-left:auto;font-family:var(--mono);color:#8A939C;font-size:.95em;white-space:nowrap}
.tv-cuenta{display:flex;gap:1.1em;align-items:baseline;color:#8A939C;font-size:.8em;
  letter-spacing:.1em;text-transform:uppercase}
.tv-cuenta b{font-family:var(--mono);color:#EFF1F3;font-size:1.45em;letter-spacing:0}
.tv-cuenta .ok b{color:#2EBD6B}
.tv-cuerpo{flex:1;display:flex;flex-direction:column;gap:.6em;padding:.2em .8em .4em;min-height:0;overflow:hidden}

/* ---------- la lista: uno grande, los demás en renglón ---------- */
.tv-ahora{
  display:flex;align-items:stretch;gap:1.2em;background:#171A1E;border:.12em solid #F0793B;
  border-radius:.5em;padding:.7em 1em;min-height:0;flex:1 1 auto;max-height:40%;
}
.tv-ahora.en-camino{border-color:#3A4046;border-style:dashed}
/* Si es el único trabajo del taller, que ocupe la pantalla entera:
   no hay nada más que mirar. */
.tv-cuerpo.sola .tv-ahora{max-height:100%}
.tv-cuerpo.sola .tv-cola{display:none}

/* Taller sin nada que hacer: el mensaje ocupa la pantalla, centrado. */
.tv-nada{align-items:center;justify-content:center;text-align:center;gap:.4em}
.tv-nada .tv-que-es{max-width:22ch;-webkit-line-clamp:4}
.tv-nada p{color:#8A939C;font-size:1.05em;max-width:34ch;line-height:1.4;margin:0}
.tv-ahora-txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.12em}
.tv-ahora .eti{font-family:var(--disp);font-weight:600;font-size:.78em;letter-spacing:.2em;
  text-transform:uppercase;color:#F0793B}
.tv-ahora .cod{font-family:var(--mono);font-size:.92em;color:#9AA3AC;letter-spacing:.04em}
.tv-ahora .tit{font-family:var(--disp);font-weight:600;font-size:2.5em;line-height:1.04;
  color:#fff;text-transform:uppercase;letter-spacing:.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tv-ahora .sub{color:#B7BFC7;font-size:1em;margin-top:.15em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-ahora-reloj{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
  text-align:right;min-width:6.5em}
.tv-ahora-reloj .eti{font-size:.7em;letter-spacing:.14em;text-transform:uppercase;color:#8A939C}

/* Los que siguen. Una línea cada uno: número, qué es, para cuándo, cuánto
   lleva. Alineados en columnas para poder barrerlos de un vistazo. */
.tv-cola{flex:1;display:flex;flex-direction:column;gap:.3em;min-height:0;overflow:hidden;
  list-style:none;margin:0;padding:0}
.tv-fila{
  flex:1 1 0;min-height:2.5em;max-height:4.2em;display:grid;grid-template-columns:2em 1fr auto auto;align-items:center;gap:.9em;
  background:#15181B;border:1px solid #23272C;border-radius:.4em;padding:.42em .8em;
  cursor:pointer;transition:border-color .12s, background .12s;
}
.tv-fila:hover{background:#1B1F24}
.tv-fila.foco{border-color:#F0793B;background:#1D2126}
.tv-fila.en-camino{opacity:.5;border-style:dashed}
.tv-fila .n{font-family:var(--mono);color:#6E7681;font-size:.95em;text-align:right}
.tv-fila .tit{font-weight:600;font-size:1.18em;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-fila .cli{color:#8A939C;font-size:.85em;font-weight:400}
.tv-fila .ent{font-size:.88em;color:#9AA3AC;white-space:nowrap}
.tv-fila .ent.tarde{color:#F0793B;font-weight:600}
.tv-fila .tv-reloj{margin:0;min-width:4.6em;text-align:right}
.tv-mas{flex:none;color:#6E7681;font-size:.95em;padding:.3em .8em;letter-spacing:.04em}

/* Urgente: un triángulo dibujado, no un emoji. */
.urg{color:#F0793B;font-weight:600;font-size:.86em;letter-spacing:.08em;text-transform:uppercase}
.urg::before{content:"";display:inline-block;width:0;height:0;margin-right:.35em;
  border-left:.32em solid transparent;border-right:.32em solid transparent;
  border-bottom:.55em solid #F0793B;vertical-align:.02em}

.tv-pie{
  display:flex;gap:1.6em;align-items:center;padding:.5em .9em;border-top:1px solid #23272C;
  color:#8A939C;font-size:.85em;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;
}
.tv-pie b{color:#EFF1F3}
.tv-tecla{
  display:inline-flex;align-items:center;justify-content:center;min-width:1.7em;height:1.7em;
  border:.08em solid #3A4046;border-radius:.3em;padding:0 .4em;color:#EFF1F3;margin-right:.45em;
  font-family:var(--mono);font-size:.9em;
}
.tv-vivo{margin-left:auto;display:flex;align-items:center;gap:.5em}
.tv-vivo .punto{width:.55em;height:.55em;border-radius:50%;background:#2EBD6B;animation:chispa 2s ease-in-out infinite}
.tv-click{cursor:pointer;transition:color .12s}
.tv-click:hover{color:#fff}

/* ---------- la orden abierta: el dibujo manda, la ficha acompaña ---------- */
.tv-cab-ot .cod{font-family:var(--mono);font-size:1.5em;color:#F0793B;letter-spacing:.02em}
.tv-cab-ot .eti{font-family:var(--disp);font-weight:600;font-size:.75em;letter-spacing:.2em;
  text-transform:uppercase;color:#6E7681;margin-right:.5em}
.tv-cab-ot .cli .urg{margin-left:.5em}
.tv-cab-ot .cli{font-size:1.05em;color:#CBD3DA;font-weight:600;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-cab-ot .tv-crono-cab{margin-left:auto;display:flex;align-items:baseline;gap:.55em;flex:none}
.tv-crono-cab .eti{font-size:.7em;letter-spacing:.14em;text-transform:uppercase;color:#8A939C}

.tv-ot-main{flex:1;display:flex;gap:.8em;min-height:0;overflow:hidden}
.tv-diseno{flex:2.5;min-width:0;background:#15181B;border:1px solid #23272C;border-radius:.5em;
  padding:.6em .8em;display:flex;flex-direction:column;min-height:0}
.tv-diseno h3{font-size:.72em;letter-spacing:.18em;text-transform:uppercase;color:#8A939C;margin-bottom:.35em}
.tv-arte-grande{flex:1;display:flex;align-items:center;justify-content:center;background:#0C0E10;
  border-radius:.4em;padding:.5em;min-height:0}
.tv-arte-grande svg{width:100%;height:100%}
.tv-arte-grande img{max-width:100%;max-height:100%;object-fit:contain}
.tv-compara{
  display:flex;gap:.5em;align-items:center;margin-top:.5em;background:#1D2126;border:1px solid #2C3238;
  border-radius:.35em;padding:.45em .8em;font-size:.9em;color:#CBD3DA;line-height:1.3;
}
.tv-compara b{color:#F0793B}

/* La ficha: un solo panel con renglones etiqueta/valor. Antes eran cuatro
   cajas apiladas y la última se salía de la pantalla en 768 de alto. */
.tv-ficha{flex:1.15;min-width:0;display:flex;flex-direction:column;gap:.45em;min-height:0;overflow:hidden}
.tv-ficha-que{flex:none;background:#15181B;border:1px solid #23272C;border-radius:.5em;padding:.6em .85em}
.tv-ficha-que h3{font-size:.72em;letter-spacing:.18em;text-transform:uppercase;color:#8A939C;margin-bottom:.2em}
.tv-que-es{font-family:var(--disp);font-weight:600;font-size:1.5em;line-height:1.08;color:#fff;
  text-transform:uppercase;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tv-ficha-datos{flex:0 1 auto;background:#15181B;border:1px solid #23272C;border-radius:.5em;
  padding:.4em .85em;margin:0;display:flex;flex-direction:column;justify-content:flex-start;
  min-height:0;overflow:hidden}
.tv-ficha-datos>div{display:flex;align-items:baseline;gap:.7em;padding:.3em 0;border-top:1px solid #1E2226}
.tv-ficha-datos>div:first-child{border-top:0}
.tv-ficha-datos dt{font-size:.64em;letter-spacing:.1em;text-transform:uppercase;color:#8A939C;
  flex:none;width:8.6em;padding-right:.8em;white-space:nowrap}
.tv-ficha-datos dd{margin:0;font-size:1.05em;font-weight:600;color:#E7ECF0;min-width:0;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tv-ficha-datos dd.mono{font-family:var(--mono);font-weight:500;font-size:.92em;letter-spacing:-.01em}
.tv-ficha-datos dd.ok{color:#2EBD6B}
.tv-ficha-datos dd.tarde{color:#F0793B}
.tv-ficha-datos dd.falta{color:#6E7681;font-weight:400}
.tv-ficha-datos dd.fuerte{color:#F0793B}

/* confirmación grande del TV */
.tv-confirmar{
  position:fixed;inset:0;background:#0E1114;z-index:300;display:flex;
  align-items:center;justify-content:center;flex-direction:column;gap:1em;text-align:center;padding:2em;
  animation:aparece .2s var(--ease);font-size:min(2.6vh, 1.6vw);
}
.tv-confirmar .preg{font-family:var(--disp);font-size:2.4em;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.tv-confirmar .cual{font-family:var(--mono);color:#F0793B;font-size:1.2em}
.tv-confirmar .botones{display:flex;gap:1em}
.tv-confirmar .tv-boton{
  font-family:var(--disp);font-weight:600;font-size:1.3em;letter-spacing:.06em;text-transform:uppercase;
  border:.1em solid #3A4046;border-radius:.35em;padding:.55em 1.4em;color:#EFF1F3;transition:all .16s var(--spring);
}
.tv-confirmar .tv-boton.foco{border-color:#F0793B;background:#F0793B;color:#101214;transform:scale(1.04)}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* tablet: riel un poco más angosto, menos padding lateral */
@media (max-width: 1024px){
  .riel{width:210px}
  .vista{padding:24px 24px 80px}
  .barra{padding:13px 24px}
  .kanban{grid-template-columns:repeat(2,1fr)}
}

/* celular: el riel se vuelve un cajón que sale por la izquierda */
@media (max-width: 768px){
  #app{display:block}
  .riel{
    position:fixed;left:0;top:0;bottom:0;height:100dvh;width:min(300px,84vw);
    transform:translateX(-100%);transition:transform .34s var(--out);box-shadow:none;
  }
  .riel.abierto{transform:none;box-shadow:var(--e3)}
  .riel-velo.abierto{display:block;position:fixed;inset:0;background:rgba(15,18,22,.5);z-index:55;animation:aparece .2s var(--ease);backdrop-filter:blur(2px)}
  .lienzo{min-height:100vh}
  .menu-btn{display:inline-flex}
  .barra{padding:11px 16px;gap:10px}
  .barra>div{min-width:0}
  .barra h1{font-size:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barra .miga{display:none}
  .como{padding:6px 10px;font-size:.78rem}
  .como-lbl{display:none}
  .como select{max-width:96px}
  .vista{padding:18px 16px 40px}
  /* cabeceras de tarjeta: que los sellos bajen a otra línea en vez de cortarse */
  .carta .cab{flex-wrap:wrap}
  /* tablas más compactas para que quepan más columnas (aun así pueden deslizarse de lado) */
  .tabla{font-size:.82rem}
  .tabla th,.tabla td{padding:8px 10px}
  .tabla th{letter-spacing:.05em}
  .rejilla.c4{grid-template-columns:1fr 1fr}
  .kpi{padding:15px 15px}
  .kpi .valor{font-size:clamp(1.15rem,6vw,1.5rem)}
  .kanban{grid-template-columns:1fr}
  .fila-campos{flex-direction:column;gap:0}
  .opciones-precio{flex-direction:column}
  .opcion-precio{min-width:0}
  .buscador-cliente{flex-wrap:wrap}
  .buscador-cliente .boton{width:100%}
  /* barra de acento del ítem activo, ya no en el borde -12 sino pegada */
  .riel a.activo::before{left:-6px}
  /* CRM embebido: apilar lista + conversación */
  .crm-demo{flex-direction:column;min-height:0}
  .crm-lista{width:100%;border-right:none;border-bottom:1px solid var(--linea);display:flex;overflow-x:auto}
  .crm-lista>div{flex:1;min-width:150px;border-bottom:none!important;border-right:1px solid var(--linea)}
  /* ventanas: suben como hoja desde abajo (estilo app) */
  .modal,.modal.modal-ancho,.modal.modal-ficha,.modal.modal-catalogo{
    top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-width:100%;max-height:92dvh;
    border-radius:var(--r-xl) var(--r-xl) 0 0;animation:hojaUp .38s var(--out);
  }
  @keyframes hojaUp{from{transform:translateY(100%)}to{transform:none}}
  .modal::before{content:"";display:block;width:38px;height:4px;border-radius:99px;background:var(--linea-2);margin:9px auto 1px}
  .modal .cab{padding-top:8px}
  /* panel lateral de OT: pantalla completa */
  .panel-lateral{width:100vw;max-width:100vw;animation:hojaUp .38s var(--out)}
  /* toast por encima de todo, centrado */
  #avisos{bottom:16px}
}

/* celular angosto: KPIs a una sola columna para que respiren */
@media (max-width: 400px){
  .rejilla.c4{grid-template-columns:1fr}
  .kpi .valor{font-size:1.7rem}
}

/* TV en pantallas chicas: apila diseño + datos, no se corta nada */
@media (max-width: 900px){
  .tv-cuerpo{flex-direction:column;overflow-y:auto}
  .tv-detalle,.tv-ot-main{flex-direction:column}
  .tv-lista,.tv-lado,.tv-diseno,.tv-rail{flex:none}
  .tv-arte-grande{min-height:38vh}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ============================================================
   MODO CRM · la página embebida dentro de Chatwoot (?crm=1)
   como Dashboard App: sin menú lateral ni "Ver como", barra
   compacta — el recuadro de Chatwoot es angosto y las reglas
   responsivas de arriba ya acomodan el resto.
   ============================================================ */
.modo-crm .riel,.modo-crm .riel-velo{display:none !important}
.modo-crm .lienzo{min-height:100vh}
.modo-crm .barra{padding:10px 14px}
.modo-crm .barra h1{font-size:1.05rem}
.modo-crm .como,.modo-crm .menu-btn{display:none}
.modo-crm .vista{padding:14px 14px 40px}

/* ── Franja de MODO DEMOSTRACIÓN ──────────────────────────────────────────
   Estorba a propósito: mientras esté encendida la demostración, nadie debe
   poder confundir lo que ve con datos reales del negocio. */
.franja-demo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 10px 20px;
  background: repeating-linear-gradient(45deg, #F2760C, #F2760C 14px, #D9660A 14px, #D9660A 28px);
  color: #fff; font-size: .88rem; letter-spacing: .01em;
}
.franja-demo b { letter-spacing: .06em; }
.franja-demo .boton { background: #fff; border-color: #fff; color: #8A3D02; font-weight: 600; }

/* ── Pantalla todavía no conectada (modo real) ────────────────────────── */
.no-conectada { max-width: 620px; margin: 8px 0; }
.no-conectada .cuerpo { padding: 22px 24px; }
.no-conectada h3 { font-size: 1.05rem; margin: 0 0 8px; }
.no-conectada p { color: var(--texto-2); margin: 0 0 14px; line-height: 1.55; }
.no-conectada .fase {
  display: inline-block; font-family: var(--disp); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: .68rem;
  color: var(--texto-3); border: 1px solid var(--linea);
  border-radius: 999px; padding: 4px 11px;
}

/* En la TV del taller la franja va más grande: se lee desde lejos, colgada
   en la pared. Es la pantalla donde confundir ejemplo con trabajo real
   costaría material y horas de taller. */
.franja-demo-tv { font-size: 1.15rem; padding: 14px 26px; justify-content: center; text-align: center; }

/* ============================================================
   FASE 2A · diseño de letreros y paneles
   El renglón "a quién le toca" es lo más visible de cada tarjeta:
   la forma número uno de perder un trabajo es que todos crean
   que lo tiene otro.
   ============================================================ */
.col-trabajos{max-width:680px}
.seccion-lista{
  font-family:var(--disp);font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);margin:0 0 12px;display:flex;align-items:baseline;gap:9px;
}
.seccion-lista span{
  font-family:var(--ui);font-size:.72rem;letter-spacing:0;text-transform:none;font-weight:600;
  background:var(--linea);color:var(--texto-2);padding:1px 8px;border-radius:var(--r-pill);
}
.carta.trabajo{margin-bottom:12px;overflow:hidden}
.carta.trabajo.destaca{border-color:var(--laser-borde);box-shadow:var(--e2)}
.trabajo-cab{display:flex;align-items:flex-start;gap:12px}
.trabajo-cab .cod{color:var(--texto-3);font-size:.78rem;padding-top:4px;white-space:nowrap}
.trabajo-cab h3{font-size:1.2rem;line-height:1.2;margin:0}
.trabajo-cab .sub{color:var(--texto-2);font-size:.88rem}

.espera{
  display:flex;align-items:center;gap:9px;margin:13px 0 0;padding:9px 12px;
  border-radius:var(--r-sm);font-size:.92rem;font-weight:600;
  background:var(--carta-2);border:1px solid var(--linea);color:var(--texto);
}
.espera .punto{width:8px;height:8px;border-radius:50%;flex:none;background:var(--texto-3)}
.espera .quien{color:var(--texto-2);font-weight:500}
.espera.tuya{background:var(--laser-suave);border-color:var(--laser-borde);color:var(--laser-txt)}
.espera.tuya .punto{background:var(--laser);box-shadow:0 0 0 3px var(--laser-suave)}
.espera.tuya .quien{color:var(--laser-txt);opacity:.8}
.espera.tarde{background:var(--warn-suave);border-color:transparent;color:var(--warn)}
.espera.tarde .punto{background:var(--warn)}
.espera.tarde .quien{color:var(--warn);opacity:.85}
.espera.lista{background:var(--ok-suave);border-color:transparent;color:var(--ok)}
.espera.lista .punto{background:var(--ok)}
.espera.lista .quien{color:var(--ok);opacity:.85}

.carta.trabajo .adjunto{display:flex;gap:14px;align-items:flex-start;margin-top:13px}
.lamina-img{
  width:136px;height:86px;flex:none;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--linea-2);background:var(--tinta);
}
.carta.trabajo .adjunto p{margin:0 0 4px;font-size:.9rem;color:var(--texto-2)}
.carta.trabajo .ver{font-size:.8rem;color:var(--texto-2)}
.carta.trabajo .ver b{background:var(--linea);padding:1px 6px;border-radius:4px;color:var(--texto)}
.pedido{
  background:var(--carta-2);border:1px solid var(--linea);border-radius:var(--r-sm);
  padding:11px 13px;font-size:.9rem;color:var(--texto-2);margin-top:13px;
}
.pedido b{color:var(--texto)}
.pedido .et{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:5px;font-weight:600;
}
.carta.trabajo .acciones{
  display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--pad-carta,18px) 16px;
}
.boton.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.nota-regla{
  border:1px dashed var(--linea-2);border-radius:var(--r-md);padding:16px 18px;
  color:var(--texto-3);font-size:.9rem;margin-top:12px;
}

/* adjuntos del vendedor al diseñador */
.adjuntos{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}
.adjuntos .pieza{
  width:104px;border-radius:var(--r-sm);overflow:hidden;position:relative;
  border:1px solid var(--linea-2);background:var(--carta-2);
}
.adjuntos .pieza img{width:100%;height:66px;object-fit:cover;display:block;background:var(--tinta)}
/* pie de la miniatura adjunta: NO puede llamarse .pie, porque dentro de un
   modal .modal .pie es la barra de botones de abajo y se lo comería. */
.adjuntos .pieza .pie-mini{font-size:.7rem;color:var(--texto-2);padding:5px 7px;line-height:1.3}
.adjuntos .pieza .quitar{
  position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
  background:rgba(15,18,22,.78);color:#fff;font-size:1rem;line-height:1;
  display:grid;place-items:center;
}
.adjuntos .soltar{
  border:1px dashed var(--linea-2);border-radius:var(--r-sm);width:104px;min-height:92px;
  display:grid;place-items:center;color:var(--texto-3);font-size:.74rem;text-align:center;padding:8px;
}
.adjuntos .soltar:hover{border-color:var(--laser);color:var(--laser-txt)}
.acciones-modal{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.tenue{color:var(--texto-3);font-weight:400}
/* la aclaración de una etiqueta se lee como frase, no como rótulo en
   mayúsculas: si no, compite con el título del campo y cansa la vista */
.campo>label .tenue{text-transform:none;letter-spacing:0;font-size:.82rem}

/* ============================================================
   MIS TRABAJOS · bandeja y riel
   Izquierda: cuadritos, uno por cosa que espera algo de ti, con el
   verbo grande. Derecha: todo lo demás con el riel de los cinco
   pasos — se ve dónde está trabado sin abrir nada. El detalle y los
   botones viven en la ventana, no en la lista.
   ============================================================ */
.trab-tablero{display:grid;grid-template-columns:minmax(270px,350px) 1fr;gap:28px;align-items:start}
.trab-col{min-width:0}

/* --- los cuadritos (izquierda) --- */
.trab-cuadritos{display:flex;flex-direction:column;gap:10px}
.trab-cuadrito{
  display:grid;gap:3px;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  padding:14px 16px;background:var(--carta);border:1px solid var(--linea);
  border-radius:var(--r-md);box-shadow:var(--e1);
  transition:border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease),transform var(--t2) var(--out);
}
.trab-cuadrito:hover{border-color:var(--laser-borde);box-shadow:var(--e2);transform:translateY(-2px)}
.trab-cuadrito:active{transform:translateY(0) scale(.99)}
.trab-cuadrito:focus-visible{outline:2px solid var(--laser);outline-offset:2px}
.tc-cab{display:flex;align-items:baseline;gap:8px}
.tc-cod{color:var(--texto-3);font-size:.76rem}
.tc-dias{margin-left:auto;font-size:.72rem;color:var(--texto-3);font-variant-numeric:tabular-nums}
/* el título va a dos líneas como mucho: los cuadritos tienen que quedar
   parejos para leerse de un golpe, y el detalle completo está adentro */
.tc-tit{
  font-family:var(--disp);font-weight:600;font-size:1.16rem;line-height:1.15;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tc-cli{color:var(--texto-2);font-size:.86rem}
.tc-mini{
  width:100%;height:92px;object-fit:cover;display:block;margin-top:9px;
  border-radius:var(--r-sm);border:1px solid var(--linea-2);background:var(--tinta);
}
.tc-verbo{
  display:flex;align-items:center;gap:8px;margin-top:11px;padding:9px 12px;
  border-radius:var(--r-sm);font-size:.92rem;font-weight:600;
  background:var(--carta-2);border:1px solid var(--linea);color:var(--texto);
}
.tc-flecha{margin-left:auto;transition:transform var(--t2) var(--out)}
.trab-cuadrito:hover .tc-flecha{transform:translateX(3px)}
.trab-cuadrito.tuya .tc-verbo{background:var(--laser-suave);border-color:var(--laser-borde);color:var(--laser-txt)}
.trab-cuadrito.tuya{border-color:var(--laser-borde)}
.trab-cuadrito.tarde .tc-verbo{background:var(--warn-suave);border-color:transparent;color:var(--warn)}
.trab-cuadrito.lista .tc-verbo{background:var(--ok-suave);border-color:transparent;color:var(--ok)}

/* --- las filas con riel (derecha) --- */
.trab-filas{display:flex;flex-direction:column;gap:9px}
.trab-fila{
  display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  padding:13px 16px 12px;background:var(--carta);border:1px solid var(--linea);
  border-radius:var(--r-md);box-shadow:var(--e1);
  transition:border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease),transform var(--t2) var(--out);
}
.trab-fila:hover{border-color:var(--linea-2);box-shadow:var(--e2);transform:translateY(-2px)}
.trab-fila:active{transform:translateY(0) scale(.997)}
.trab-fila:focus-visible{outline:2px solid var(--laser);outline-offset:2px}
.tf-cab{display:flex;align-items:baseline;gap:10px;min-width:0}
.tf-cod{color:var(--texto-3);font-size:.74rem;flex:none}
.tf-tit{font-weight:600;font-size:.96rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-quien{margin-left:auto;flex:none;font-size:.78rem;font-weight:600;color:var(--texto-2)}
.tf-quien.tuya{color:var(--laser-txt)}
.tf-quien.tarde{color:var(--warn)}
.tf-quien.lista{color:var(--ok)}
.tf-sub{display:block;color:var(--texto-3);font-size:.82rem;margin-top:1px}

/* --- el riel de los cinco pasos --- */
.riel-pasos{display:flex;align-items:flex-start;margin-top:11px}
.rp{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.rp::before{content:"";position:absolute;top:5px;left:-50%;width:100%;height:2px;background:var(--linea)}
.rp:first-child::before{display:none}
.rp i{
  width:12px;height:12px;border-radius:50%;display:block;position:relative;z-index:1;
  background:var(--carta);border:2px solid var(--linea-2);box-sizing:border-box;
}
.rp em{
  font-style:normal;font-family:var(--disp);font-weight:600;font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);white-space:nowrap;
}
.rp em{font-size:.62rem}
.rp.hecho i{background:var(--ok);border-color:var(--ok)}
.rp.hecho::before,.rp.activo::before{background:var(--ok)}
/* entregado: el riel entero verde, sin punto naranja — no queda nada que hacer */
.riel-pasos.completo .rp:last-child i{box-shadow:0 0 0 4px var(--ok-suave)}
.riel-pasos.completo .rp:last-child em{color:var(--ok)}
.rp.activo i{background:var(--laser);border-color:var(--laser);box-shadow:0 0 0 4px var(--laser-suave)}
.rp.activo em{color:var(--laser-txt)}

/* --- pestañas (solo en celular) --- */
.trab-tabs{display:none;gap:8px;margin-bottom:16px}
.trab-tab{
  flex:1;padding:10px 12px;border-radius:var(--r-sm);font-size:.88rem;font-weight:600;
  background:var(--carta);border:1px solid var(--linea);color:var(--texto-2);box-shadow:var(--e1);
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.trab-tab span{
  font-size:.72rem;background:var(--linea);color:var(--texto-2);padding:1px 7px;border-radius:var(--r-pill);
}
.trab-tab.activa{background:var(--tinta);border-color:var(--tinta);color:#fff}
.trab-tab.activa span{background:rgba(255,255,255,.18);color:#fff}

/* --- la ventana de detalle --- */
.tm-titulo{min-width:0;flex:1}
.tm-titulo h3{font-size:1.3rem;line-height:1.15;margin:1px 0 0;overflow-wrap:anywhere}
.tm-titulo .sub{color:var(--texto-2);font-size:.88rem;margin-top:2px}
.tm-cerrar{flex:none;font-size:1.5rem;line-height:1;padding:2px 12px;align-self:flex-start;color:var(--texto-3)}
.trab-modal .cab{align-items:flex-start}
.trab-modal .espera{margin-top:0}
.tm-riel{padding:4px 2px 2px;margin-top:14px}
.tm-lamina{
  width:100%;max-height:320px;object-fit:contain;display:block;margin-top:14px;
  background:var(--tinta);border:1px solid var(--linea-2);border-radius:var(--r-md);
}

/* tablet: dos columnas no caben sin machucar el riel, así que se apilan
   (arriba lo tuyo, abajo lo que anda) y cada una usa todo el ancho */
@media (max-width:1100px){
  .trab-tablero{grid-template-columns:1fr;gap:24px}
  .trab-col.andando .seccion-lista{margin-top:4px}
}

@media (max-width:768px){
  .trab-tablero{grid-template-columns:1fr;gap:0}
  .trab-tabs{display:flex}
  .trab-col .seccion-lista{display:none}
  .trab-tablero[data-tab="tuyo"] .trab-col.andando{display:none}
  .trab-tablero[data-tab="andando"] .trab-col.tuyo{display:none}
  /* en celular los seis nombres se pisan: quedan los puntos, y el paso en
     el que va lo dice el renglón de la derecha ("En el taller", "Entregado") */
  .rp em{display:none}
  .riel-pasos{margin-top:12px;padding-bottom:2px}
}

@media (max-width:560px){
  .trabajo-cab{flex-wrap:wrap}
  .carta.trabajo .adjunto{flex-direction:column}
  .lamina-img{width:100%;height:150px}
}

/* La fila "a quién le toca" en una sola línea: hereda centrado de la carta. */
.carta.trabajo .espera{flex-direction:row;justify-content:flex-start;text-align:left}

/* Fase 2B · detalle real en el televisor del taller */
.tv-arte-img{max-height:100%;max-width:100%;object-fit:contain;display:block;margin:0 auto}
.tv-sin-arte{
  display:flex;flex-direction:column;gap:.5em;align-items:center;justify-content:center;
  height:100%;text-align:center;padding:1.2em;
  background:rgba(195,58,43,.10);border:.1em solid #C33A2B;border-radius:.5em;
}
.tv-sin-arte b{font-family:var(--disp);font-weight:600;font-size:2em;color:#FF8B7A;line-height:1.12;text-transform:uppercase}
.tv-sin-arte span{color:#E7B4AC;font-size:1em;max-width:30ch;line-height:1.4}

/* Fase 2B · tablero de producción */
.kpis-prod{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.kpi-p{
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-md);
  padding:12px 16px;min-width:140px;box-shadow:var(--sombra);
}
.kpi-p .et{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.kpi-p .num{font-family:var(--disp);font-size:1.8rem;line-height:1.1}
.prod-tablero{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px;overflow-x:auto}
@media (max-width:760px){.prod-tablero{grid-template-columns:1fr}}
.prod-col h3{
  font-family:var(--disp);font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--linea);
}
.prod-col h3 em{font-style:normal;font-family:var(--ui);font-size:.82rem;color:var(--texto-2);font-weight:600}
.prod-tarj{
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-sm);
  padding:11px 13px;margin-bottom:8px;box-shadow:var(--sombra);
}
.prod-tarj.haciendo{border-left:3px solid var(--laser)}
.prod-tarj.urgente{border-left:3px solid var(--crit)}
.prod-tarj .cod{font-size:.72rem;color:var(--texto-3)}
.prod-tarj .que{font-weight:600;font-size:.92rem;line-height:1.3;margin:2px 0 3px}
.prod-tarj .cli{font-size:.8rem;color:var(--texto-2)}
.prod-tarj .sellos{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.prod-vacia{
  border:1px dashed var(--linea-2);border-radius:var(--r-sm);padding:16px;
  text-align:center;color:var(--texto-3);font-size:.85rem;
}
.tv-enlaces{margin-top:20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--texto-3);font-size:.88rem}

/* En celular los enlaces a los televisores se apilan en vez de salirse. */
@media (max-width:560px){
  .tv-enlaces{flex-direction:column;align-items:stretch}
  .tv-enlaces .boton{width:100%;text-align:center}
  .kpis-prod .kpi-p{flex:1 1 46%;min-width:0}
}

/* La barra de arriba en teléfonos angostos: el título tenía prohibido
   encogerse (le faltaba min-width:0), así que empujaba el botón "Salir"
   fuera de la pantalla. Pasaba en TODAS las pantallas, no solo en las
   nuevas; se vio al medir Producción a 390 px. */
.barra > div:not(.der){min-width:0}
.barra h1{overflow-wrap:anywhere}
@media (max-width:560px){
  .barra h1{font-size:1.2rem}
  .barra .der .boton{padding-left:12px;padding-right:12px}
}

/* Celular: nada de lo nuevo puede empujar la página a lo ancho.
   Los códigos largos (LAC-2026-0199) con white-space:nowrap eran lo que
   se salía; en pantalla angosta se les deja partir. */
.carta.trabajo, .prod-tarj{overflow-wrap:anywhere}
@media (max-width:560px){
  .trabajo-cab{flex-wrap:wrap;gap:6px}
  .trabajo-cab .cod{white-space:normal}
  .espera{flex-wrap:wrap}
  .col-trabajos, .carta.trabajo, .prod-tablero, .prod-col, .prod-tarj{min-width:0;max-width:100%}
  .acciones-modal{flex-wrap:wrap}
}

/* El lado derecho de la barra (el botón "Salir") NO debe encogerse: tenía
   min-width:0, así que en pantalla angosta el contenedor se achicaba y el
   botón se le salía por fuera. El que se encoge es el título. */
.barra .der{flex:none}

/* Fase 2B · lo que viene al taller pero todavía no se puede cortar.
   Diego (2026-07-21): que se vea en gris para ir preparando el material,
   pero que NO se pueda marcar listo. */
.tv-traba{color:#DFAE46;font-size:.9em;margin-top:.1em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-aviso-traba{
  background:rgba(223,174,70,.12);border:.1em solid #DFAE46;border-radius:.45em;
  padding:.45em .9em;margin-bottom:.5em;display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;
}
.tv-aviso-traba b{font-family:var(--disp);font-weight:600;font-size:1.3em;color:#FFD166;text-transform:uppercase}
.tv-aviso-traba span{color:#E8D6AC;font-size:.92em;line-height:1.3}

/* La foto de la guía de encomienda: es lo que se le reenvía al cliente. */
.guia-lista{display:flex;gap:10px;align-items:center;margin-top:8px}
.guia-mini{
  width:56px;height:56px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--linea-2);display:block;
}
.guia-lista small{color:var(--texto-3)}

/* Mientras falte el envoplast, la pieza se queda en pantalla avisando. */
.tv-falta-embalaje{
  color:#0B0D10;background:#DFAE46;font-weight:700;font-size:.85em;
  padding:.1em .5em;border-radius:.25em;display:inline-block;margin-top:.2em;
  letter-spacing:.02em;text-transform:uppercase;
}

/* ============================================================
   FASE 5 · Módulo administrativo (tesorería, por cobrar/pagar,
   reportes, ajustes). Mismo sistema visual "acero refinado".
   ============================================================ */
.chips-a5{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* coherencia: los filtros (cuenta, buscador, fechas) igual que el resto */
.chips-a5 select,.chips-a5 input[type=text],.chips-a5 input[type=search],.chips-a5 input[type=date]{
  border:1.5px solid var(--linea-2);background:var(--carta);color:var(--texto);
  border-radius:var(--r-sm);padding:9px 12px;font-size:.9rem;box-shadow:var(--e1);
  transition:border-color var(--t1),box-shadow var(--t1)}
.chips-a5 select:focus,.chips-a5 input:focus{outline:none;border-color:var(--laser);box-shadow:0 0 0 3px var(--laser-suave)}
.chips-a5 input[type=date]{font-family:var(--mono);color:var(--texto-2)}
.chip-a5{border:1.5px solid var(--linea-2);background:var(--carta);border-radius:var(--r-pill);
  padding:7px 14px;font-size:.88rem;font-weight:500;color:var(--texto-2);
  transition:background var(--t1) var(--ease), color var(--t1), border-color var(--t1)}
.chip-a5:hover{border-color:var(--laser)}
.chip-a5.activo{background:var(--laser);border-color:var(--laser);color:#fff;font-weight:600}
.chip-a5 small{display:block;font-size:.68rem;opacity:.75;font-family:var(--mono);letter-spacing:0}

.a5-total{display:flex;align-items:baseline;gap:12px;padding:6px 4px;margin:2px 0 12px}
.a5-total span{font-family:var(--disp);font-weight:600;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texto-2)}
.a5-total b{font-size:1.25rem;font-weight:500}

.malla-cuentas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:14px}
.tarjeta-cuenta{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-md);
  padding:14px 16px;box-shadow:var(--e1)}
.tarjeta-cuenta .cab{display:flex;align-items:baseline;gap:8px}
.tarjeta-cuenta .cab .tag{margin-left:auto;font-size:.68rem;color:var(--texto-3);
  text-transform:uppercase;letter-spacing:.08em}
.tarjeta-cuenta .saldo{font-size:1.35rem;font-weight:500;margin-top:4px}
.tarjeta-cuenta .sub{font-size:.78rem;color:var(--texto-2);margin-top:5px;line-height:1.5}

.pildora{display:inline-block;border-radius:var(--r-pill);padding:3px 10px;font-size:.74rem;font-weight:600;margin-top:7px}
.pildora.mal{background:var(--crit-suave);color:var(--crit)}
.pildora.bien{background:var(--ok-suave);color:var(--ok)}
.pildora.ambar{background:var(--warn-suave);color:var(--warn)}
.pildora.azul{background:var(--plano-suave);color:var(--plano)}
.bien-txt{color:var(--ok)}
.mal-txt{color:var(--crit)}

.recordatorio-a5{background:var(--warn-suave);border:1px solid #F0DFAE;border-radius:var(--r-md);
  padding:11px 14px;font-size:.85rem;color:#5C430B;margin-bottom:12px;cursor:pointer}
.recordatorio-a5 b{display:block;color:#3F2E06}

.botonera-a5{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px}
.boton-grande{border-radius:var(--r-md);padding:16px 10px;text-align:center;font-weight:600;
  font-size:.95rem;background:var(--carta);border:1px solid var(--linea);box-shadow:var(--e1);
  transition:transform var(--t1) var(--spring), box-shadow var(--t1)}
.boton-grande:active{transform:scale(.97)}
.boton-grande.naranja{background:var(--laser);border-color:var(--laser);color:#fff}
.boton-grande.oscuro{background:var(--tinta-2);border-color:var(--tinta-2);color:#fff}

.fila-a5{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-md);
  padding:11px 14px;display:flex;align-items:center;gap:12px;margin-bottom:8px;cursor:pointer;
  transition:border-color var(--t1), box-shadow var(--t1)}
.fila-a5:hover{border-color:var(--laser-borde);box-shadow:var(--e1)}
.fila-a5.alerta{border-color:#F1B9B0;background:var(--crit-suave)}
.fila-a5 .info{min-width:0;flex:1}
.fila-a5 .t1{font-weight:600;font-size:.92rem;overflow:hidden;text-overflow:ellipsis}
.fila-a5 .t2{font-size:.78rem;color:var(--texto-3);overflow:hidden;text-overflow:ellipsis}
.fila-a5 .monto{font-size:1rem;font-weight:500;text-align:right;flex:none}
.fila-a5 .monto small{display:block;font-size:.7rem;color:var(--texto-3);font-weight:400}
.ot-a5{background:var(--humo);border-radius:8px;padding:2px 8px;font-size:.78rem;color:var(--texto-2);flex:none}

.titulo-a5{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;
  font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2);
  margin:18px 0 10px;padding:0 2px}
.globo-a5{background:var(--laser);color:#fff;font-family:var(--mono);font-size:.72rem;
  border-radius:var(--r-pill);padding:1px 8px;letter-spacing:0}

.kpis-a5{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kpi-a5{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-md);padding:12px 14px}
.kpi-a5 span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--texto-3);font-weight:600}
.kpi-a5 b{display:block;font-size:1.15rem;font-weight:500;margin-top:3px}

.tarjeta-panel{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:14px 16px;margin-bottom:14px;box-shadow:var(--e1)}
.tarjeta-panel .titulo-a5{margin-top:2px}
.cat-a5{display:grid;grid-template-columns:130px 1fr 90px;gap:10px;align-items:center;
  font-size:.82rem;margin-bottom:8px}
.cat-a5 .nom{color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-a5 .pista{height:9px;background:var(--humo);border-radius:var(--r-pill);overflow:hidden}
.cat-a5 .lleno{height:100%;border-radius:var(--r-pill);background:var(--laser)}
.cat-a5 .lleno.gris{background:var(--texto-3)}
.cat-a5 .mono{text-align:right}

.a5-equiv{background:var(--tinta);color:#fff;border-radius:var(--r-md);padding:12px 16px;
  display:flex;justify-content:space-between;align-items:center;margin:4px 0 10px}
.a5-equiv span{font-size:.72rem;color:#AEB6BD;text-transform:uppercase;letter-spacing:.1em}
.a5-equiv b{font-size:1.2rem;font-weight:500}

@media (max-width:640px){
  .botonera-a5{max-width:none}
  .kpis-a5{grid-template-columns:1fr 1fr}
  .cat-a5{grid-template-columns:96px 1fr 80px}
}

/* Fase 5 · una sola entrada "Administración": sub-menú interno + dashboard */
.subnav-a5{margin-bottom:16px;position:sticky;top:72px;z-index:30;
  background:color-mix(in srgb, var(--humo) 88%, transparent);
  backdrop-filter:blur(10px);padding:6px 0;border-radius:var(--r-pill)}
.kpis-dash{grid-template-columns:repeat(4,1fr)}
.kpi-toca{cursor:pointer;transition:border-color var(--t1), box-shadow var(--t1)}
.kpi-toca:hover{border-color:var(--laser-borde);box-shadow:var(--e1)}
.tarjeta-cuenta[data-a5-pantalla]{cursor:pointer}
@media (max-width:640px){ .kpis-dash{grid-template-columns:1fr 1fr} }

/* ---------- Proyectos (fase6): el expediente de un trabajo ---------- */
.a6-bandeja{border:1.5px solid var(--laser-borde);background:var(--laser-suave);
  border-radius:var(--r-md);padding:12px;margin-bottom:16px}
.a6-bandeja-tt{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--laser-txt);margin:0 2px 10px;display:flex;
  justify-content:space-between;align-items:center}
.a6-bandeja .fila-a5{cursor:default}

.a6-cabecera{display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;flex-wrap:wrap;margin-bottom:14px}
.a6-cabecera h3{font-size:1.3rem;letter-spacing:-.01em}

.a6-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin-bottom:16px}
.a6-num{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-md);
  padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.a6-num .et{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-3);font-weight:700}
.a6-num b{font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.a6-num .pie{font-size:.74rem;color:var(--texto-3)}
.a6-num.entro b{color:var(--ok)}
.a6-num.salio b{color:var(--crit)}
.a6-num.quedo{background:var(--tinta);border-color:var(--tinta)}
.a6-num.quedo .et,.a6-num.quedo .pie{color:#8A939C}
.a6-num.quedo b{color:#fff}

.a6-panel{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-md);
  overflow:hidden;margin-bottom:12px}
.a6-panel > .tt{padding:9px 14px;border-bottom:1px solid var(--linea);
  background:var(--carta-2);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--texto-2);display:flex;justify-content:space-between;gap:10px}
.a6-panel .fila-a5{border:0;border-bottom:1px solid var(--linea);border-radius:0;
  margin:0;box-shadow:none;cursor:default;background:transparent}
.a6-panel .fila-a5:last-child{border-bottom:0}
.a6-panel .fila-a5:hover{border-color:var(--linea);box-shadow:none}

/* ============================================================
   CORTE · la pantalla del taller láser
   Tarjetas anchas y botones grandes: se opera de pie, con la
   máquina al lado y a veces con guantes.
   ============================================================ */
.corte-tabs{display:flex;max-width:420px}
.corte-lista{display:flex;flex-direction:column;gap:14px;max-width:760px}
.corte-tarj{
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-md);
  box-shadow:var(--e1);padding:16px 18px;
}
.corte-tarj.urgente{border-color:var(--crit);box-shadow:var(--e2)}
.ct-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ct-ot{color:var(--texto-3);font-size:.78rem;margin-right:auto}
.corte-tarj h3{font-size:1.25rem;line-height:1.2;margin:8px 0 2px}
.ct-cli{color:var(--texto-2);font-size:.9rem}
.ct-cuerpo{display:flex;gap:16px;align-items:flex-start;margin-top:14px;flex-wrap:wrap}
.ct-mini{
  width:150px;height:104px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--linea-2);background:var(--tinta);flex:none;
}
.ct-acciones{display:flex;flex-direction:column;gap:10px;flex:1;min-width:220px}
.ct-version{color:var(--texto-2);font-size:.86rem}
.ct-acciones .boton{justify-content:center;text-align:center;text-decoration:none;display:flex;align-items:center}

/* el explorador: una carpeta por mes, con lo que tenga cada trabajo */
.ca-buscador{max-width:520px;margin-bottom:16px}
.ca-buscador input{
  width:100%;background:var(--carta);border:1px solid var(--linea-2);border-radius:var(--r-sm);
  padding:11px 13px;font-size:1rem;box-shadow:var(--e1);
}
.ca-buscador input:focus{outline:none;border-color:var(--laser);box-shadow:0 0 0 3px var(--laser-suave)}
.ca-lista{max-width:820px}
.ca-mes{
  font-family:var(--disp);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);margin:22px 0 8px;
}
.ca-fila{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-md);
  box-shadow:var(--e1);padding:12px 16px;margin-bottom:8px;
}
.ca-datos{flex:1;min-width:200px}
.ca-cod{color:var(--texto-3);font-size:.76rem;margin-right:8px}
.ca-tit{font-size:.98rem}
.ca-sub{color:var(--texto-3);font-size:.82rem;margin-top:2px}
.ca-archivos{display:flex;gap:8px;flex-wrap:wrap}
.ca-archivos .boton{text-decoration:none;display:flex;align-items:center}
.ca-paginas{display:flex;align-items:center;gap:12px;margin-top:18px;color:var(--texto-2);font-size:.88rem}
@media (max-width:560px){
  .ct-mini{width:100%;height:150px}
  .ct-acciones{min-width:0;width:100%}
  .ca-fila{align-items:flex-start}
  .ca-archivos{width:100%}
  .ca-archivos .boton{flex:1;justify-content:center}
}

/* ============================================================
   DIRECCIÓN · el panel del dueño (direccion.js)
   ============================================================ */
.dir-cab{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.dir-intro{margin:0;color:var(--texto-2);font-size:.92rem}
.dir-seg{display:inline-flex;margin-left:auto;border:1px solid var(--linea-2);border-radius:var(--r-sm);background:var(--carta);box-shadow:var(--e1);overflow:hidden}
.dir-seg button{font:inherit;font-size:.82rem;font-weight:600;color:var(--texto-2);background:none;border:none;border-left:1px solid var(--linea);padding:7px 14px;cursor:pointer;transition:background var(--t1),color var(--t1)}
.dir-seg button:first-child{border-left:none}
.dir-seg button:hover{background:var(--carta-2);color:var(--texto)}
.dir-seg button.activo{background:var(--laser-suave);color:var(--laser-txt)}
.dir-seg button:focus-visible{outline:2px solid var(--laser);outline-offset:-2px}

.rejilla.c5{grid-template-columns:repeat(auto-fit,minmax(176px,1fr));margin-bottom:16px}
.kpi .detalle .mal{color:var(--crit);font-weight:600}
a.kpi{text-decoration:none;color:inherit;display:block}

.dir-medio{display:grid;grid-template-columns:3fr 2fr;gap:16px;margin-bottom:16px}

/* Barras dobles: entra (naranja) contra sale (azul) */
.dir-barras{display:flex;align-items:stretch;gap:10px;height:170px;padding-top:8px}
.dir-mes{flex:1;display:flex;flex-direction:column;min-width:0}
.dir-par{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:4px;border-bottom:1px solid var(--linea-2);padding:0 6px}
.dir-par span{width:100%;max-width:26px;border-radius:4px 4px 0 0;min-height:3px;transition:opacity var(--t1)}
.dir-mes:hover .dir-par span{opacity:.82}
.b-entra{background:var(--laser)}
.b-sale{background:var(--plano)}
.dir-mes-eti{text-align:center;font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);padding-top:6px}
.dir-leyenda{display:flex;gap:18px;margin-top:12px;font-size:.82rem;color:var(--texto-2)}
.dir-leyenda span{display:inline-flex;align-items:center;gap:7px}
.pto{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}

/* Dona de estados */
.dir-dona{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.dir-dona svg{width:150px;height:150px;flex:none}
.dona-num{font-family:var(--mono);font-size:9px;font-weight:500;fill:var(--texto)}
.dona-eti{font-family:var(--disp);font-weight:600;font-size:3.1px;letter-spacing:.12em;text-transform:uppercase;fill:var(--texto-3)}
.dir-dona-ley{flex:1;min-width:180px;display:flex;flex-direction:column}
.fila-estado{display:flex;align-items:center;gap:9px;padding:7px 2px;font-size:.88rem;border-top:1px solid var(--linea)}
.fila-estado:first-child{border-top:none}
.fila-estado b{margin-left:auto}

/* Renglones de acción (abajo) */
.dir-renglon{text-decoration:none;color:inherit;border-radius:var(--r-xs);transition:background var(--t1)}
.dir-renglon:hover{background:var(--carta-2)}
.dir-rojo{color:var(--crit);font-weight:600}
.dir-apagado{color:var(--texto-3)}
.dir-neto{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--linea-2);margin-top:10px;padding-top:10px;font-size:.88rem;color:var(--texto-2)}
.dir-pie{color:var(--texto-3);font-size:.8rem;margin:10px 2px 0}

@media (max-width:1024px){
  .dir-medio{grid-template-columns:1fr}
  .rejilla.c5{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .dir-seg{margin-left:0;width:100%;display:flex}
  .dir-seg button{flex:1;padding:8px 4px}
  .dir-barras{height:140px;gap:6px}
}
@media (max-width:400px){
  .rejilla.c5{grid-template-columns:1fr}
  .dir-dona{justify-content:center}
}

/* v2 del panel: números sobre las barras, calendario, ventanas y fechas */
.rejilla.c5 .kpi .valor{font-size:clamp(1.1rem,1.5vw,1.7rem)}
.dir-par span{position:relative}
.dir-par span b{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-weight:500;font-size:.68rem;color:var(--texto-2)}
.dir-barras{padding-top:20px}
.dir-cal{margin-bottom:16px}
.dir-cal-grupo{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.11em;font-size:.7rem;color:var(--texto-3);margin:14px 2px 4px}
.dir-cal-grupo:first-child{margin-top:0}
.dir-cal-grupo.rojo{color:var(--crit)}
.dir-renglon{font:inherit;border:none;background:none;width:100%;text-align:left;cursor:pointer}
.dir-modal-pista{margin:0 0 14px;color:var(--texto-2);font-size:.88rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dir-fechas{display:flex;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.dir-fechas label{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--texto-2)}
.dir-fechas input{width:70px;font:inherit;font-family:var(--mono);text-align:center;padding:7px;border:1px solid var(--linea-2);border-radius:var(--r-sm);background:var(--carta)}
.dir-fechas input:focus-visible{outline:2px solid var(--laser);outline-offset:1px}

/* Recuadrito de tasas del día (BCV oficial + Binance P2P) */
.dir-tasas{display:inline-flex;align-items:center;gap:12px;background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-sm);box-shadow:var(--e1);padding:7px 14px;font-size:.85rem;color:var(--texto-2);margin-left:auto;white-space:nowrap}
.dir-tasas .eti{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:var(--texto-3)}
.dir-tasas b{color:var(--texto);font-weight:500}
.dir-tasas small{color:var(--texto-3)}
.dir-tasas + .dir-seg{margin-left:0}
@media (max-width:768px){
  .dir-tasas{margin-left:0;width:100%;justify-content:center;white-space:normal;flex-wrap:wrap;gap:8px 12px}
}

/* Ventana "Cotizado vs. vendido": resumen grueso, sin listas largas */
.dir-seg.chico{margin-left:auto}
.dir-seg.chico button{padding:5px 11px;font-size:.78rem}
.dir-cot .dir-par span b{font-size:.6rem;top:-15px;white-space:nowrap}
.dir-mes-eti i{display:block;font-style:normal;font-family:var(--ui);font-weight:400;letter-spacing:0;text-transform:none;font-size:.68rem;color:var(--texto-3);margin-top:2px}
.dir-cot-tot{display:flex;gap:26px;border-top:1px solid var(--linea-2);margin-top:14px;padding-top:12px;flex-wrap:wrap}
.dir-cot-tot small{display:block;font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;color:var(--texto-3)}
.dir-cot-tot b{font-size:1.25rem;font-weight:500;letter-spacing:-.02em}
.dir-cat{margin:6px 0}
.dir-cat-fila{display:flex;align-items:baseline;gap:10px;font-size:.88rem}
.dir-cat-fila small{color:var(--texto-3)}
.dir-cat-fila b{margin-left:auto}
@media (max-width:768px){
  .dir-seg.chico{margin-left:0;width:100%}
  .dir-cot .dir-par span b{font-size:.54rem}
}