/* ============================================================
   CAPA 3 DE LAS HERRAMIENTAS — Grupo Papelera FK & RR
   El diseño de la empresa es el del CRM (decisión del 26-oct-2026). Esta hoja
   va DESPUÉS de las dos capas del CRM, copiadas tal cual en marca-crm/:
     brand.css  (capa 1: color y letra del manual, la única con valores)
     tokens.css (capa 2: el papel de cada color, var(--ui-*))
   Aquí se visten los componentes que ya usan las pantallas de las herramientas
   (.caja, .siguiente, .kpi, .lista, .pill…) con el aspecto del CRM, para no
   reescribir ninguna plantilla. Regla del CRM: ni un hex ni una fuente literal;
   todo sale de var(--ui-*) o var(--brand-*).

   Esta hoja es LA MISMA en requisiciones, el WMS y conversión. Si cambia, se
   cambia en una y se copia a las otras dos. Si el CRM cambia, se vuelven a
   copiar brand.css y tokens.css desde seguimiento.papelerafk.com.co/static/.

   Se viste la estructura que ya tiene cada herramienta (barra de arriba con
   su menú corto); no se copia la barra lateral del CRM.

   Única diferencia consciente con el CRM: en pantallas táctiles los controles
   miden 44 px y no 34. Estas herramientas se usan de pie, con guantes, en la
   bodega; el CRM se usa sentado en un escritorio.
   ============================================================ */

/* Los nombres de color de la hoja vieja, apuntando a los del CRM. Algunas
   pantallas traen un <style> propio que los usa (var(--azul), var(--linea)…);
   así se visten con la marca del CRM sin reescribirlas. No usar en CSS nuevo:
   lo nuevo va con var(--ui-*) directamente. */
:root{
  --azul:var(--brand-primary);  --azul-op:var(--ui-link);  --cian:var(--brand-accent);
  --verde:var(--ui-success);    --rojo:var(--ui-danger);   --ambar:var(--ui-warning);
  --azul-f:var(--ui-info-bg);   --verde-f:var(--ui-success-bg); --rojo-f:var(--ui-danger-bg);
  --ambar-f:var(--ui-warning-bg); --gris-f:var(--ui-canvas);
  --crema:var(--ui-canvas);     --blanco:var(--ui-surface);
  --carbon:var(--ui-text);      --tinta:var(--ui-text);    --tenue:var(--ui-text-secondary);
  --linea:var(--ui-border);     --linea-fuerte:var(--ui-field-border);
  --linea-azul:var(--brand-primary-light); --suave:var(--ui-canvas);
  --sombra:var(--ui-shadow-card);
  --radio:var(--ui-radius-input); --radio-chico:var(--ui-radius-input);
  --display:var(--ui-font-heading); --texto:var(--ui-font-body);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
/* lo que la página esconde (el contador sin pendientes, "Activar avisos" cuando
   ya se dio permiso) se queda escondido aunque su clase le dé forma de botón */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ui-canvas);color:var(--ui-text);font:var(--ui-body);
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:var(--ui-link)}
a:hover{color:var(--ui-link-hover)}

/* ---------- la barra de arriba: la de cada herramienta, con los colores del CRM ----------
   Se conserva la estructura de cada herramienta (logo, menú corto, quién soy);
   solo cambia el vestido: blanca como la barra del CRM, menú en azul profundo y
   la marca cian debajo del enlace activo, como la marca de la barra lateral del CRM. */
header.barra{background:var(--ui-surface);border-bottom:1px solid var(--ui-border);display:flex;align-items:center;
             gap:var(--ui-sp-3) 22px;padding:10px 22px;position:sticky;top:0;z-index:30}
header.barra img{height:46px;width:auto;display:block;flex:none}
/* el menú ocupa lo que queda entre el logo y el nombre; si es largo (el del
   administrador del WMS tiene nueve), se parte en dos renglones ahí mismo */
header.barra nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap;flex:1 1 auto;min-width:0}
header.barra nav a{font:var(--ui-button);font-size:13px;color:var(--ui-link);text-decoration:none;padding:9px 14px;
                   border-radius:var(--ui-radius-pill);display:inline-flex;align-items:center;gap:6px;
                   border-bottom:3px solid transparent}
header.barra nav a:hover{background:var(--ui-row-hover);color:var(--ui-link-hover)}
header.barra nav a.activo{background:var(--ui-chrome-bg);color:var(--ui-chrome-text);border-radius:var(--ui-radius-input) var(--ui-radius-input) 0 0;
                          border-bottom-color:var(--ui-chrome-marker)}
header.barra .yo{margin-left:auto;flex:none;max-width:260px;font:var(--ui-meta);font-size:12.5px;color:var(--ui-text-secondary);text-align:right}
header.barra .yo b{font-weight:var(--brand-weight-bold);color:var(--ui-text);font-size:13px}
header.barra .yo a{color:var(--ui-link);text-decoration:none}
header.barra .yo a:hover{color:var(--ui-link-hover);text-decoration:underline}
main{max-width:1180px;margin:0 auto;padding:26px 26px 72px}

/* ---------- entrar (la misma caja del ingreso al CRM) ---------- */
.caja-login{max-width:420px;margin:7vh auto;background:var(--ui-surface);border:1px solid var(--ui-border);
            border-radius:var(--ui-radius-card);padding:36px 38px 32px;box-shadow:var(--ui-shadow-card)}
.caja-login .marca-login{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:18px;text-align:center}
.caja-login .logo-grupo{width:210px;max-width:100%;height:auto}
.caja-login h1{font:var(--ui-h2);font-size:18px;color:var(--brand-primary);margin:0}
.caja-login .lema{font:var(--ui-meta);font-size:13px;color:var(--ui-text-secondary)}
.caja-login label{margin-top:var(--ui-sp-3)}
.caja-login button{margin-top:20px;width:100%}

/* ---------- tipografía (reparto de oficios del manual 2.4) ---------- */
h1{font:var(--ui-h1);letter-spacing:var(--ui-track-h1);color:var(--ui-text);margin:0 0 var(--ui-sp-1)}
h1.rt{font-size:34px;line-height:40px}
.consecutivo{font:var(--ui-meta);color:var(--ui-text-secondary)}
h2{font:var(--ui-h2);letter-spacing:var(--ui-track-h2);color:var(--ui-text);margin:var(--ui-sp-6) 0 var(--ui-sp-3)}
h3{font:var(--ui-card-title);color:var(--ui-text);margin:0 0 var(--ui-sp-2)}
p{margin:0 0 var(--ui-sp-3)}
.tenue{color:var(--ui-text-secondary)}
.chico{font:var(--ui-meta)}
b,strong,.dato{font-weight:var(--brand-weight-bold)}
h1 + .tenue,h1 + p.tenue{margin-bottom:var(--ui-sp-4)}

/* Título de sección con número: el número es el orden del trabajo, no adorno. */
.seccion{display:flex;align-items:center;gap:10px;margin:var(--ui-sp-6) 0 var(--ui-sp-3);flex-wrap:wrap}
.seccion .n{width:26px;height:26px;border-radius:50%;background:var(--brand-primary);color:var(--ui-chrome-text);
            font:400 13px/26px var(--ui-font-heading);text-align:center;flex:none}
.seccion h2{margin:0}
.seccion .tenue{margin-left:auto;font:var(--ui-meta)}

/* ---------- superficies: la .caja es el .panel del CRM ---------- */
.caja{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-card);
      padding:var(--ui-pad-card);margin-bottom:var(--ui-gap-card);box-shadow:var(--ui-shadow-card)}
.caja.suave{background:var(--ui-canvas);box-shadow:none}
.caja.plana{box-shadow:none}
.caja > :last-child{margin-bottom:0}
details.caja{padding:0}
details.caja > summary{padding:var(--ui-sp-4) var(--ui-pad-card);cursor:pointer;list-style:none;display:flex;gap:4px 10px;
                       align-items:center;flex-wrap:wrap}
details.caja > summary b{font:var(--ui-card-title);color:var(--ui-text)}
details.caja > summary .tenue{flex:1 1 auto;font:var(--ui-meta)}
details.caja > summary::-webkit-details-marker{display:none}
details.caja > summary::before{content:"";width:.5rem;height:.5rem;border-right:2px solid var(--ui-link);border-bottom:2px solid var(--ui-link);
  transform:rotate(-45deg);transition:transform .15s;flex:none;margin:0 .2rem 0 .1rem}
details.caja[open] > summary::before{transform:rotate(45deg)}
details.caja > .interior{padding:0 var(--ui-pad-card) var(--ui-pad-card)}
details.suelto > summary{cursor:pointer;color:var(--ui-link)}

/* ---------- el hilo de pasos ---------- */
.hilo{display:flex;gap:0;margin:var(--ui-sp-3) 0 var(--ui-sp-5);padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.hilo::-webkit-scrollbar{display:none}
.hilo li{flex:1;min-width:92px;position:relative;text-align:center;font:var(--ui-label);font-weight:var(--brand-weight-medium);
         color:var(--ui-text-secondary);padding-top:22px}
.hilo li::before{content:"";position:absolute;top:6px;left:0;right:0;height:2px;background:var(--ui-border)}
.hilo li:first-child::before{left:50%} .hilo li:last-child::before{right:50%}
.hilo li::after{content:"";position:absolute;top:0;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;
                background:var(--ui-surface);border:2px solid var(--ui-field-border)}
.hilo li.hecho{color:var(--ui-link)}
.hilo li.hecho::before,.hilo li.hecho::after{background:var(--ui-link);border-color:var(--ui-link)}
.hilo li.actual{color:var(--brand-primary);font-weight:var(--brand-weight-bold)}
.hilo li.actual::before{background:linear-gradient(90deg,var(--ui-link) 50%,var(--ui-border) 50%)}
.hilo li.actual::after{background:var(--ui-surface);border:4px solid var(--brand-primary);width:16px;height:16px;margin-left:-8px;top:-1px}
.hilo li.actual.pausa::after{border-color:var(--ui-warning)}
.hilo li.actual.pausa{color:var(--ui-warning)}
.hilo li.fin.hecho::after{background:var(--ui-success);border-color:var(--ui-success)}
.hilo li.fin.hecho{color:var(--ui-success)}

/* ---------- "ahora te toca": el aviso informativo del CRM, con la acción al lado ---------- */
.siguiente{display:flex;gap:var(--ui-sp-4);align-items:center;flex-wrap:wrap;background:var(--ui-info-bg);
           border:1px solid var(--ui-link);border-left-width:3px;border-radius:var(--ui-radius-input);
           padding:var(--ui-sp-4) var(--ui-sp-5);margin-bottom:var(--ui-gap-card)}
.siguiente.quieto{background:var(--ui-canvas);border-color:var(--ui-border)}
.siguiente.listo{background:var(--ui-success-bg);border-color:var(--ui-success)}
.siguiente .que{flex:1;min-width:240px}
.siguiente .que .e{font:var(--ui-label);font-weight:var(--brand-weight-bold);text-transform:uppercase;letter-spacing:.5px;
                   color:var(--ui-link);margin-bottom:4px}
.siguiente.quieto .que .e{color:var(--ui-text-secondary)}
.siguiente.listo .que .e{color:var(--ui-success)}
.siguiente .que .t{font-size:15px;line-height:22px}
.siguiente .que .t b{color:var(--brand-primary)}
.siguiente a.ir{flex:none}

/* ---------- datos: tablas y cifras como el CRM ---------- */
table{width:100%;border-collapse:collapse;font:var(--ui-body)}
th{text-align:left;font:var(--ui-label);font-weight:var(--brand-weight-medium);color:var(--ui-text-secondary);
   padding:var(--ui-sp-2) var(--ui-sp-3);border-bottom:1px solid var(--ui-border);white-space:nowrap}
td{padding:var(--ui-sp-2) var(--ui-sp-3);border-bottom:1px solid var(--ui-divider);vertical-align:middle;color:var(--ui-text)}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--ui-row-hover)}
.num{text-align:right;font-variant-numeric:var(--ui-num)}
.tabla{overflow-x:auto;-webkit-overflow-scrolling:touch}
tr.marcada td{background:var(--ui-success-bg)}
/* tabla de muchas columnas (el mes a mes): con ancho mínimo el contenedor
   desplaza en vez de encoger y partir el nombre en cinco líneas */
.tabla.ancha table{min-width:760px}
.tabla.ancha td:first-child,.tabla.ancha th:first-child{min-width:220px}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--ui-sp-4) var(--ui-sp-6)}
.kpi .v{font-family:var(--ui-font-body);font-weight:var(--brand-weight-bold);font-size:30px;line-height:1.05;letter-spacing:-1px;
        font-variant-numeric:var(--ui-num);color:var(--ui-text)}
.kpi .e{font:var(--ui-label);font-weight:var(--brand-weight-bold);text-transform:uppercase;letter-spacing:.5px;
        color:var(--ui-text-secondary);margin-top:6px}
.kpi .v .tenue{font-size:15px;font-weight:var(--brand-weight-normal);letter-spacing:0}

/* ---------- formularios ---------- */
input,select,button,textarea{font:inherit}
select,textarea,
input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden],[type=submit],[type=button],[type=image],[type=reset]){
  font:var(--ui-body);color:var(--ui-text);border:1px solid var(--ui-field-border);border-radius:var(--ui-radius-input);
  background:var(--ui-surface);padding:0 var(--ui-sp-3);height:var(--ui-control-h);width:100%}
textarea{height:auto;padding:var(--ui-sp-2) var(--ui-sp-3);line-height:20px}
input::placeholder,textarea::placeholder{color:var(--ui-text-secondary);opacity:.8}
select:focus-visible,input:focus-visible,textarea:focus-visible{border-color:var(--ui-link)}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--brand-primary);cursor:pointer;margin:0}
input[type=radio]{width:18px;height:18px;accent-color:var(--brand-primary);cursor:pointer;margin:0 .3rem 0 0;vertical-align:-3px}
label{display:block;font:var(--ui-label);color:var(--ui-text-secondary);margin-bottom:4px}

/* botones: la píldora del CRM. `button` es la acción principal (azul profundo);
   .sec y .suave son el botón fantasma; .cta es el cian del manual. */
button,a.boton,.btn{font:var(--ui-button);border-radius:var(--ui-radius-pill);height:var(--ui-control-h);min-height:var(--ui-control-h);
  padding:0 var(--ui-sp-4);background:var(--brand-primary);border:1px solid var(--brand-primary);color:var(--ui-chrome-text);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;cursor:pointer;
  transition:background .15s,color .15s;white-space:nowrap}
button:hover,a.boton:hover,.btn:hover{background:var(--brand-primary-dark);border-color:var(--brand-primary-dark);color:var(--ui-chrome-text)}
button.cta,a.boton.cta{background:var(--ui-btn-primary);border-color:var(--ui-btn-primary-bd);color:var(--ui-btn-primary-tx)}
button.cta:hover,a.boton.cta:hover{background:var(--ui-btn-primary-hv);color:var(--ui-btn-primary-tx)}
button.sec,a.boton.sec,button.suave,a.boton.suave,.btn.ghost{background:var(--ui-surface);color:var(--ui-link);border-color:var(--ui-btn-ghost-bd)}
button.sec:hover,a.boton.sec:hover,button.suave:hover,a.boton.suave:hover,.btn.ghost:hover{background:var(--ui-row-hover);
  border-color:var(--ui-link);color:var(--ui-link-hover)}
button.peligro,a.boton.peligro{background:var(--ui-surface);color:var(--ui-danger);border-color:var(--ui-danger);
  height:28px;min-height:28px;padding:0 var(--ui-sp-3);font:var(--ui-label);font-weight:var(--brand-weight-medium)}
button.peligro:hover,a.boton.peligro:hover{background:var(--ui-danger-bg);color:var(--ui-danger)}
button.chico,a.boton.chico{height:28px;min-height:28px;padding:0 var(--ui-sp-3);font:var(--ui-label);font-weight:var(--brand-weight-medium)}
button[disabled]{opacity:.4;cursor:not-allowed}
button[disabled]:hover{background:var(--brand-primary)}
button.sec[disabled]:hover,button.suave[disabled]:hover{background:var(--ui-surface)}
.fila{display:flex;gap:var(--ui-sp-3);flex-wrap:wrap;align-items:end}
.campo{flex:1;min-width:130px}
.ayuda{color:var(--ui-text-secondary);font:var(--ui-label);margin:6px 0 0}

/* ---------- estados: los tonos del aviso del CRM ---------- */
.aviso{--t:var(--ui-link);--tbg:var(--ui-info-bg);background:var(--tbg);border:1px solid var(--t);border-left-width:3px;
       border-radius:var(--ui-radius-input);padding:var(--ui-sp-3) var(--ui-sp-4);font:var(--ui-body);color:var(--ui-text);
       margin:0 0 var(--ui-gap-card)}
.aviso.ok{--t:var(--ui-success);--tbg:var(--ui-success-bg)}
.aviso.error{--t:var(--ui-danger);--tbg:var(--ui-danger-bg)}
.aviso.ambar{--t:var(--ui-warning);--tbg:var(--ui-warning-bg)}
.aviso.info{--t:var(--ui-link);--tbg:var(--ui-info-bg)}
.aviso ul{margin:6px 0 0 18px;padding:0}
.aviso b{font-weight:var(--brand-weight-bold)}

/* la etiqueta corta de estado: forma de .tag del CRM, con los tonos de estado */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--ui-radius-pill);font:var(--ui-label);
      font-weight:var(--brand-weight-medium);background:var(--ui-info-bg);color:var(--brand-primary);white-space:nowrap;vertical-align:middle}
.pill.verde{background:var(--ui-success-bg);color:var(--ui-success)}
.pill.rojo{background:var(--ui-danger-bg);color:var(--ui-danger)}
.pill.ambar{background:var(--ui-warning-bg);color:var(--ui-warning)}
.pill.azul{background:var(--ui-info-bg);color:var(--brand-primary)}
.pill.sin{background:var(--ui-canvas);color:var(--ui-text-secondary);border:1px solid var(--ui-border)}
.tag{font:var(--ui-label);font-weight:var(--brand-weight-medium);color:var(--brand-primary);background:var(--ui-info-bg);
     padding:2px 10px;border-radius:var(--ui-radius-pill)}
.mdm{font:var(--ui-meta);color:var(--ui-text-muted)}
.empty{text-align:center;padding:var(--ui-sp-8) var(--ui-sp-4);color:var(--ui-text-secondary);font:var(--ui-body);
       background:var(--ui-canvas);border-radius:var(--ui-radius-input)}

/* El archivo plano de Siesa necesita monoespaciada: las columnas tienen que alinear. */
pre{background:var(--brand-primary);color:var(--ui-chrome-text);padding:var(--ui-sp-3) var(--ui-sp-4);border-radius:var(--ui-radius-input);
    overflow-x:auto;margin:var(--ui-sp-3) 0;font:400 13px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* listas en vez de tablas cuando se lee en celular: lo importante a la izquierda,
   el número a la derecha, la acción al final */
.lista{display:flex;flex-direction:column}
.lista .item{display:grid;grid-template-columns:auto 1fr auto auto;gap:4px var(--ui-sp-4);align-items:center;
             padding:var(--ui-sp-3) var(--ui-sp-2);border-bottom:1px solid var(--ui-divider)}
.lista .item:last-child{border-bottom:0}
.lista .item.marcada{background:var(--ui-success-bg);border-radius:var(--ui-radius-input)}
.lista .item.recomendado{background:var(--ui-row-selected);border-radius:var(--ui-radius-input)}
.lista .n{color:var(--ui-text-secondary);font:var(--ui-meta);min-width:1.2rem;text-align:right}
.lista .lote{font:var(--ui-card-title);color:var(--ui-text)}
.lista .desc{color:var(--ui-text-secondary);font:var(--ui-meta);margin-top:2px}
.lista .kg{text-align:right;font-variant-numeric:var(--ui-num);white-space:nowrap}
.lista .kg b{font-size:16px}
.lista .kg .tenue{display:block;font:var(--ui-meta)}
.lista .accion{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.lista .accion form{margin:0}
.lista .total{display:flex;justify-content:space-between;padding:var(--ui-sp-3) var(--ui-sp-2) 0;color:var(--ui-text-secondary)}
.lista .total b{color:var(--ui-text);font-size:15px}
.lista label.lote{cursor:pointer;margin:0}

/* contador en el menú (el .pendientes del CRM) y el globo cuando llega algo nuevo */
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 7px;
       border-radius:var(--ui-radius-pill);background:var(--brand-accent);color:var(--brand-primary-dark);
       font:var(--ui-label);font-size:11px;font-weight:var(--brand-weight-bold)}
.toast{position:fixed;right:var(--ui-sp-4);bottom:var(--ui-sp-4);z-index:50;max-width:340px;background:var(--brand-primary);
       color:var(--ui-chrome-text);border-radius:var(--ui-radius-input);padding:var(--ui-sp-3) var(--ui-sp-4);box-shadow:var(--ui-shadow-pop);
       cursor:pointer;font:var(--ui-body);animation:sube .2s ease-out}
.toast b{display:block;margin-bottom:2px}
.toast .tenue{color:var(--ui-chrome-dim)}
@keyframes sube{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
button.avisos{background:transparent;color:var(--ui-link);border:1px dashed var(--ui-field-border);font:var(--ui-label)}
button.avisos:hover{background:var(--ui-row-hover);color:var(--ui-link-hover)}

/* documentos en una lista: tarjeta-enlace */
.ordenes{display:flex;flex-direction:column;gap:10px}
.orden{display:grid;grid-template-columns:1.3fr 1.6fr 1fr auto;gap:10px var(--ui-sp-5);align-items:center;background:var(--ui-surface);
       border:1px solid var(--ui-border);border-radius:var(--ui-radius-card);padding:14px var(--ui-sp-5);box-shadow:var(--ui-shadow-card);
       text-decoration:none;color:inherit;transition:border-color .12s}
.orden:hover{border-color:var(--ui-link);color:inherit}
.orden .cons{font:var(--ui-h2);letter-spacing:var(--ui-track-h2);color:var(--brand-primary)}
.orden .sub{color:var(--ui-text-secondary);font:var(--ui-meta);margin-top:2px}
.orden .det{font:var(--ui-body)}
.orden .est .tenue{display:block;margin-top:4px;font:var(--ui-meta)}
.orden .ir{color:var(--ui-link);font-size:22px;line-height:1}
.orden.mia{border-left:4px solid var(--brand-primary)}
/* una acción dentro de la fila, para resolver sin abrir el documento */
.orden form{margin:0;justify-self:end}
.orden form button{white-space:nowrap}

/* ---------- tableros (WMS: cómo vamos, ciclo del inventario, antigüedad) ----------
   Un tablero no es una pantalla de trabajo: los filtros van arriba y después
   solo se lee. Los colores salen de los tonos del CRM. */
.ciclo{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.ciclo .paso{flex:1;min-width:150px;background:var(--ui-canvas);border-radius:var(--ui-radius-input);padding:12px 14px}
.ciclo .paso .e{font:var(--ui-label);font-weight:var(--brand-weight-bold);text-transform:uppercase;letter-spacing:.5px;color:var(--ui-link)}
.ciclo .paso .v{font-family:var(--ui-font-body);font-weight:var(--brand-weight-bold);font-size:20px;line-height:1.2;
                font-variant-numeric:var(--ui-num);color:var(--brand-primary);margin:4px 0 2px}
.ciclo .flecha{align-self:center;color:var(--ui-link);font-size:26px;line-height:1}

.meses{display:flex;align-items:flex-end;gap:2px;height:150px}
.meses .mes{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.meses .valor{font:var(--ui-label);font-variant-numeric:var(--ui-num);color:var(--ui-text-secondary);margin-bottom:4px}
.meses .col{flex:1;width:100%;display:flex;align-items:flex-end;border-bottom:1px solid var(--ui-border)}
.meses .relleno{width:100%;background:var(--brand-primary);border-radius:4px 4px 0 0;min-height:2px}
.meses .mes.parcial .relleno{background:var(--ui-info-bg);border:1px solid var(--brand-primary);border-bottom:0}
.meses .rotulo{font:var(--ui-label);font-size:11px;color:var(--ui-text-secondary);margin-top:6px}
.meses-tope{font:var(--ui-label);font-size:11px;color:var(--ui-text-secondary);text-align:right;margin-bottom:5px}

.filtros{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;background:var(--ui-surface);border:1px solid var(--ui-border);
         border-radius:var(--ui-radius-card);padding:12px 16px;margin:var(--ui-sp-4) 0 var(--ui-sp-4);box-shadow:var(--ui-shadow-card);
         position:sticky;z-index:5;top:calc(var(--alto-barra, 0px) + 6px)}
.filtros label{display:flex;flex-direction:column;gap:4px;margin:0}
.filtros select{min-width:150px;width:auto}
.filtros #f-resumen{margin-left:auto;text-align:right}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--ui-sp-3);margin-bottom:var(--ui-sp-4)}
.kpis .tarjeta{background:var(--ui-surface);border:1px solid var(--ui-border);border-left:4px solid var(--brand-primary);
               border-radius:var(--ui-radius-card);padding:14px 16px;box-shadow:var(--ui-shadow-card)}
.kpis .e{font:var(--ui-label);font-weight:var(--brand-weight-bold);text-transform:uppercase;letter-spacing:.5px;color:var(--ui-text-secondary)}
.kpis .v{font-family:var(--ui-font-body);font-weight:var(--brand-weight-bold);font-size:26px;line-height:1.15;letter-spacing:-.5px;
         font-variant-numeric:var(--ui-num);color:var(--ui-text);margin:5px 0 2px}
.kpis .sub{font:var(--ui-meta);color:var(--ui-text-muted)}

/* dos bloques que se leen juntos (la gráfica y la tabla) y en celular se apilan */
.panel{display:grid;gap:var(--ui-gap-card);margin-bottom:var(--ui-gap-card)}
@media(min-width:900px){.panel{grid-template-columns:1fr 1fr}}
.panel .caja{margin:0}
.panel h3,.caja>.fila h3{font:var(--ui-card-title);color:var(--ui-text);margin:0 0 10px}

td.parte{min-width:130px}
td.parte span{display:inline-block;height:9px;background:var(--brand-primary);border-radius:0 3px 3px 0;vertical-align:middle;min-width:2px}
td.parte i{font-style:normal;font:var(--ui-label);color:var(--ui-text-secondary);font-variant-numeric:var(--ui-num);margin-left:6px}
tr.familia{cursor:pointer}
tr.familia:hover{background:var(--ui-row-hover)}
tr.familia.marcada{background:var(--ui-row-selected);box-shadow:inset 3px 0 0 var(--brand-primary)}

.tramos{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.tramos .tramo{display:grid;grid-template-columns:104px 1fr 62px;gap:10px;align-items:center}
.tramos .r{font:var(--ui-label);font-size:11px;color:var(--ui-text-secondary);text-align:right}
.tramos .b{background:var(--ui-canvas);border-radius:3px;height:16px;overflow:hidden}
.tramos .b span{display:block;height:100%;background:var(--brand-primary);border-radius:0 3px 3px 0;min-width:2px}
.tramos .viejo .b span{background:var(--ui-warning)}
.tramos .v{font:var(--ui-meta);color:var(--ui-text);font-variant-numeric:var(--ui-num);text-align:right}
@media (max-width:720px){
  .ciclo{flex-direction:column}
  .ciclo .flecha{transform:rotate(90deg)}
}
@media (max-width:560px){
  .meses{height:120px}
  .meses .valor{font-size:11px}
  .meses .mes:nth-child(even) .rotulo{visibility:hidden}
  .tramos .tramo{grid-template-columns:86px 1fr 54px;gap:6px}
  .tramos .r{font-size:10px}
}

/* ---------- foco: anillo azul profundo, visible también sobre el cian ---------- */
select:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:var(--ui-focus-w) solid var(--ui-focus-ring);outline-offset:var(--ui-focus-offset)}

/* ---------- tactil: 44 px para el dedo con guante ---------- */
@media (pointer:coarse){
  select,input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden],[type=submit],[type=button],[type=image],[type=reset]),
  button,a.boton,.btn{height:44px;min-height:44px}
  button.chico,a.boton.chico,button.peligro{height:36px;min-height:36px}
  header.barra nav a{padding-top:12px;padding-bottom:12px}
}

/* ---------- celular y tableta ---------- */
@media (max-width:900px){
  header.barra{position:static;gap:6px 10px;padding:8px 14px;flex-wrap:wrap}
  header.barra img{height:34px}
  /* el menú en una sola franja que se desliza de lado: en bodega se entra a
     trabajar, no a escoger entre renglones de menú */
  header.barra nav{order:3;flex-basis:100%;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  header.barra nav::-webkit-scrollbar{display:none}
  header.barra nav a{white-space:nowrap;padding:9px 12px}
  header.barra .yo{font-size:12px;max-width:none;flex:1 1 auto}
}
@media (max-width:720px){
  main{padding:18px 14px 56px}
  h1{font-size:22px;line-height:28px} h1.rt{font-size:28px;line-height:34px}
  .caja{padding:var(--ui-sp-4)} details.caja > summary{padding:14px var(--ui-sp-4)} details.caja > .interior{padding:0 var(--ui-sp-4) var(--ui-sp-4)}
  details.caja > summary .tenue{flex-basis:100%;padding-left:1.3rem}
  .hilo li{min-width:62px;font-size:10px;padding-left:2px;padding-right:2px}
  .lista .item{grid-template-columns:auto 1fr auto;gap:4px 10px}
  .lista .item .accion{grid-column:2 / -1;justify-content:flex-start;padding-top:2px}
  .lista .accion button,button.peligro,button.chico{width:auto}
  .kpi{grid-template-columns:repeat(2,1fr)} .kpi .v{font-size:24px}
  .orden{grid-template-columns:1fr auto;padding:12px 14px}
  .orden .det{grid-column:1 / -1}
  .orden .est{grid-column:1 / -1}
  .orden .ir{grid-column:2;grid-row:1;align-self:start}
  .siguiente{padding:14px 16px}
  .siguiente a.ir{width:100%}
  button,a.boton{width:100%}
  .fila > div:not(.campo){width:100%}
  .fila form{width:100%}
  .caja-login{margin:4vh 14px;padding:28px 22px 24px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
@media print{header.barra{display:none}}