/* ══════════════════════════════════════════════════════════════════════════
   TALONARIO — sistema visual                                    F1C-V7.34.0
   --------------------------------------------------------------------------
   Los colores salen del logo de CECUAMAQ, no de un gusto: el negro #1D1E1C
   del recuadro y el rojo #BE1723 del arco. Todo claro, sobre blanco.

   Hay UN SOLO rojo en el sistema. La identidad la carga el logo, que está
   siempre en pantalla, así que el rojo queda libre para significar algo:
   descuadre, error, dinero que sale. Por eso el botón de acción es negro.

   Los nombres viejos (--gr-2, --ink, --teal…) siguen existiendo al final,
   apuntando a los nuevos. Así las 14 000 líneas ya escritas siguen valiendo
   y las pantallas se van migrando de a una.
   ══════════════════════════════════════════════════════════════════════════ */

/* Las fuentes se sirven desde lib/: nada de CDN de terceros, que es lo que
   disparaba los avisos de Tracking Prevention. 116 KB en total. */
@font-face{font-family:'Archivo'; src:url('lib/fonts/archivo-latin-400-normal.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Archivo'; src:url('lib/fonts/archivo-latin-500-normal.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:'Archivo'; src:url('lib/fonts/archivo-latin-600-normal.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;}
@font-face{font-family:'Archivo'; src:url('lib/fonts/archivo-latin-700-normal.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;}
@font-face{font-family:'IBM Plex Mono'; src:url('lib/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'IBM Plex Mono'; src:url('lib/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:'IBM Plex Mono'; src:url('lib/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;}

:root{
  /* ── superficies ────────────────────────────────────────────────────── */
  --t-lienzo:#f8f9fb;    /* el fondo de la aplicación, casi blanco */
  --t-surface:#ffffff;   /* tarjetas, paneles, filas */
  --t-surface-2:#fcfcfd; /* cabeceras de tabla, campos, hover */
  --t-line:#e4e7ec;      /* borde visible */
  --t-line-2:#f0f2f5;    /* separador entre filas */

  /* ── tinta ──────────────────────────────────────────────────────────── */
  --t-ink:#1d1e1c;       /* el negro del logo */
  --t-ink-2:#55585c;     /* texto secundario */
  /* V7.89.0 — el gris apagado era #8b9096: 3,05:1 sobre el lienzo y 3,22:1
     sobre blanco, o sea por debajo del 4,5:1 que pide la norma. No era un
     detalle de un sitio: lo usaban los rótulos de las tarjetas de cifra, la
     miga de pan, los estados vacíos, el pie de versión y la ficha de la
     persona conectada. Un token, decenas de sitios.
     #676d75 da 4,96:1 sobre el lienzo y 5,22:1 sobre blanco, y sigue
     leyéndose como texto secundario: no compite con --t-ink-2. */
  --t-ink-3:#676d75;     /* rótulos, ayudas, texto apagado — 4,96:1 sobre el lienzo */

  /* ── marca ──────────────────────────────────────────────────────────── */
  --t-marca:#be1723;     /* el rojo del logo */
  --t-marca-oscuro:#9c1119;

  /* ── semánticos ─────────────────────────────────────────────────────── */
  --t-ok:#0e7c5a;    --t-ok-bg:#e9f5f0;   --t-ok-line:#bfe0d3;
  --t-mal:#be1723;   --t-mal-bg:#fdedee;  --t-mal-line:#f5c9cd;
  /* El ámbar anterior estaba a ΔE 9,6 del rojo de marca en visión normal: en
     la misma columna de estados, «Sin cruzar» y «Cobrado sin asiento» se leían
     igual de un vistazo. Este ámbar está a ΔE 15,8 del rojo y a 15,1 del verde
     —los cuatro estados quedan por encima de 15 entre sí— y sube el contraste
     a 6,7:1 sobre blanco y 6,1:1 sobre su propio tinte. Cambiarlo se midió, no
     se opinó: la prueba t42 vuelve a calcularlo en cada corrida. */
  --t-aviso:#7d5400; --t-aviso-bg:#fdf3dd;--t-aviso-line:#ecd9a8;
  --t-info:#1f5fa8;  --t-info-bg:#eaf2fb; --t-info-line:#c8dcf2;
  /* V7.90.0 — «Pendiente de salida» necesitaba su propio color: con seis
     estados en el TV, repetir uno hace que dos columnas se lean igual de
     lejos, que es justo lo que este tablero no se puede permitir. Este
     violeta está a ΔE 39,8 del azul de «Revisado» —el más cercano de los
     cinco que ya había— y da 7,4:1 sobre blanco y 6,5:1 sobre su tinte.
     Medido, no elegido a ojo. */
  --t-espera:#7038a8; --t-espera-bg:#f1eafa; --t-espera-line:#ddcaf0;
  --t-quieto-bg:#f0f2f5; --t-quieto:#55585c;

  /* ── espacio: múltiplos de 4, sin excepciones ───────────────────────── */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px;

  /* ── tipografía: seis tamaños, ni uno más ───────────────────────────── */
  --f-micro:11px;  /* rótulos en versalitas, notas al pie */
  --f-dato:12px;   /* celdas de tabla, ayudas */
  --f-base:13px;   /* texto de interfaz */
  --f-med:15px;    /* subtítulos */
  --f-alto:20px;   /* títulos de sección */
  --f-cifra:28px;  /* la cifra de una tarjeta */

  /* ── forma, profundidad y movimiento ────────────────────────────────── */
  --r1:6px; --r2:10px; --r3:999px;
  --s1:0 1px 2px rgba(29,30,28,.05);
  --s2:0 2px 4px rgba(29,30,28,.05), 0 8px 20px rgba(29,30,28,.07);
  --v-rapido:120ms; --v-normal:180ms; --v-lento:260ms;
  --curva:cubic-bezier(.32,.72,0,1);

  /* ── densidad de las tablas: 1 cómodo, .72 compacto ─────────────────── */
  --densidad:1;

  /* ══ PUENTE con los nombres anteriores ════════════════════════════════
     No borrar: es lo que permite que el cambio de paleta sea una sola
     edición en vez de tocar 856 sitios. Se irán retirando a medida que
     cada pantalla se migre. */
  --gr-0:var(--t-ink);      --gr-1:var(--t-surface-2);
  --gr-2:var(--t-lienzo);   --gr-3:var(--t-surface);  --gr-line:var(--t-line);
  --ink:var(--t-ink);       --ink-1:var(--t-ink);     /* --ink-1 se usaba sin estar definida */
  --ink-2:var(--t-ink-2);   --ink-3:var(--t-ink-3);
  --amber:var(--t-aviso);   --amber-bg:var(--t-aviso-bg);  --amber-dark:var(--t-aviso);
  --teal:var(--t-ok);       --teal-bg:var(--t-ok-bg);      --teal-dark:var(--t-ok);
  --red:var(--t-mal);       --red-bg:var(--t-mal-bg);      --red-dark:var(--t-mal);
  --blue:var(--t-info);     --blue-bg:var(--t-info-bg);    --blue-dark:var(--t-info);
  --gray-bg:var(--t-quieto-bg); --gray-dark:var(--t-quieto);

  font-family:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;}
html,body{background:var(--t-lienzo); color:var(--t-ink);}
body{font-family:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;}

/* ── utilidades del sistema ──────────────────────────────────────────────
   Veinte clases que absorben la mayoría de los estilos escritos a mano.
   Se agregan sin quitar nada: lo viejo sigue funcionando al lado. */
.t-num{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;}
.t-rotulo{font-size:var(--f-micro); letter-spacing:.06em; text-transform:uppercase;
  color:var(--t-ink-3); font-weight:600; margin:0;}
.t-ayuda{font-size:var(--f-dato); color:var(--t-ink-3); margin:0;}
/* V7.89.0 — `.t-ayuda` estaba en --f-micro (11px), que es el tamaño de las
   versalitas. Pero esto no es un rótulo: son los párrafos que explican qué
   significa un tablero, y se leen de corrido. Los rótulos en versalitas con
   letter-spacing se leen más grandes de lo que miden; un párrafo, no. */
.t-secundario{font-size:var(--f-dato); color:var(--t-ink-2);}
.t-tarjeta{background:var(--t-surface); border:1px solid var(--t-line);
  border-radius:var(--r2); padding:var(--e3) var(--e4);}
.t-panel{background:var(--t-surface); border:1px solid var(--t-line);
  border-radius:var(--r2); overflow:hidden;}
.t-fila{display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap;}
.t-entre{display:flex; align-items:center; justify-content:space-between; gap:var(--e3); flex-wrap:wrap;}
.t-der{text-align:right;}
/* Las cifras van en negrita: en una tabla de conciliación el número ES el
   dato, y competía con el texto que lo acompaña. */
.t-monto{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;
  font-weight:600; white-space:nowrap; text-align:right;}
.t-monto--entra{color:var(--t-ok);}
.t-monto--sale{color:var(--t-ink);}
.t-pastilla{display:inline-flex; align-items:center; gap:5px; font-size:var(--f-micro);
  font-weight:600; padding:3px 9px; border-radius:var(--r3); border:1px solid transparent;
  white-space:nowrap; line-height:1.35;}
.t-pastilla::before{content:''; width:5px; height:5px; border-radius:50%;
  background:currentColor; flex:none;}
.t-ok{background:var(--t-ok-bg); color:var(--t-ok); border-color:var(--t-ok-line);}
.t-mal{background:var(--t-mal-bg); color:var(--t-mal); border-color:var(--t-mal-line);}
.t-aviso{background:var(--t-aviso-bg); color:var(--t-aviso); border-color:var(--t-aviso-line);}
.t-info{background:var(--t-info-bg); color:var(--t-info); border-color:var(--t-info-line);}
.t-quieto{background:var(--t-quieto-bg); color:var(--t-quieto); border-color:var(--t-line);}
.t-espera{background:var(--t-espera-bg); color:var(--t-espera); border-color:var(--t-espera-line);}
/* El punto de estado. Va SIEMPRE con su texto al lado: el color solo
   refuerza, nunca es lo único que distingue una cosa de otra. */
.t-punto{display:inline-block; width:8px; height:8px; border-radius:50%;
  vertical-align:1px; margin-right:5px; flex:none;}
.t-punto--mal{background:var(--t-mal); color:var(--t-mal);}
.t-punto--ok{background:var(--t-ok); color:var(--t-ok);}
.t-punto--aviso{background:var(--t-aviso); color:var(--t-aviso);}
.t-punto--info{background:var(--t-info); color:var(--t-info);}
.t-punto--quieto{background:var(--t-ink-3); color:var(--t-ink-3);}
.t-franja{border-left:3px solid transparent;}
.t-franja--mal{border-left-color:var(--t-mal);}
.t-franja--aviso{border-left-color:var(--t-aviso);}
.t-franja--info{border-left-color:var(--t-info);}
/* V8.15.0 — `t-tabla-envoltura` se usaba en 9 tablas de app.js y no existía
   aquí: por debajo de 760px no se notaba porque esas tablas son tarjetas,
   pero entre 761px y su ancho natural —un iPad vertical abriendo la tabla de
   aprobaciones, de nueve columnas— desbordaba la página entera y aparecía el
   scroll horizontal del documento. Contiene el scroll donde corresponde. */
.t-tabla-envoltura{overflow-x:auto;}
.t-scroll{overflow-x:auto;}
.t-oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap;}

/* ── las clases que reemplazan a los estilos escritos a mano ──────────── */
.t-tabla{width:100%; border-collapse:collapse; font-size:var(--f-dato);}
.t-tabla thead th{text-align:left; font-size:var(--f-micro); letter-spacing:.07em;
  text-transform:uppercase; color:var(--t-ink-2); font-weight:700;
  padding:calc(9px * var(--densidad)) var(--e3); border-bottom:1px solid var(--t-line);
  white-space:nowrap; background:var(--t-surface-2);}
.t-tabla tbody td{padding:calc(10px * var(--densidad)) var(--e3);
  border-bottom:1px solid var(--t-line-2); vertical-align:middle;}
.t-tabla tbody tr:last-child td{border-bottom:0;}
.t-tabla tbody tr{transition:background var(--v-rapido) var(--curva);}
.t-tabla tbody tr:hover{background:var(--t-surface-2);}
/* El nombre de la fila —cliente, concepto, producto— va en negrita: es por
   donde se busca cuando se recorre la tabla con el dedo. */
.t-tabla td.t-celda-tit, .t-tabla td b{font-weight:600; color:var(--t-ink);}
.t-tabla td.t-celda-tit{color:var(--t-ink);}
/* La regla de color a la izquierda de la fila. Duplica lo que dice la
   pastilla; existe para poder barrer la columna sin leer. */
.t-tabla tbody tr.t-fila--ok    > td:first-child{box-shadow:inset 3px 0 0 var(--t-ok);}
.t-tabla tbody tr.t-fila--mal   > td:first-child{box-shadow:inset 3px 0 0 var(--t-mal);}
.t-tabla tbody tr.t-fila--aviso > td:first-child{box-shadow:inset 3px 0 0 var(--t-aviso);}
.t-tabla tbody tr.t-fila--info  > td:first-child{box-shadow:inset 3px 0 0 var(--t-info);}
.t-tabla tbody tr[class*="t-fila--"] > td:first-child{padding-left:calc(var(--e3) + 6px);}
.t-titulo-bloque{font-size:var(--f-base); font-weight:600; letter-spacing:-.01em; margin:0 0 var(--e2);}
.t-apagado{color:var(--t-ink-3);}
.t-centro{text-align:center;}
.t-nowrap{white-space:nowrap;}
.t-m0{margin:0;}
.t-mt1{margin:var(--e1) 0 0;}
.t-mt2{margin-top:6px;}
.t-mb3{margin-bottom:var(--e3);}
.t-mb4{margin-bottom:var(--e4);}

.t-caja{background:var(--t-surface); border:1px solid var(--t-line);
  border-radius:var(--r2); padding:var(--e4);}
.t-etiqueta{font-size:var(--f-dato); color:var(--t-ink-2); display:block; margin-bottom:var(--e1);}
.t-subtitulo{font-size:var(--f-dato); font-weight:500; color:var(--t-ink-2); margin:0 0 var(--e3);}
.t-texto{font-size:var(--f-base); color:var(--t-ink-3);}
.t-ancho{width:100%;}
.t-flex1{flex:1;}
.t-oculta{display:none;}
.t-linea-arriba{border-top:1px solid var(--t-line);}
.t-mt3{margin-top:var(--e3);}
.t-mb2{margin-bottom:var(--e2);}
.t-ok-txt{color:var(--t-ok);}

/* ── el icono: un solo tamaño base, hereda el color del texto ─────────── */
.t-ico{width:15px; height:15px; flex:none; vertical-align:-2px;}
.t-ico--sm{width:13px; height:13px;}
.t-ico--lg{width:19px; height:19px;}

/* ── los cuatro estados de una pantalla ──────────────────────────────────
   Cargando, vacía, con error y con datos. Antes solo existía la última: la
   conciliación se quedaba congelada 400 ms sin decir nada, y todo lo demás
   —guardados, fallos— salía por un aviso que se iba solo a los 3 segundos. */

/* Vacía, pero con la salida puesta */
.t-vacio{text-align:center; padding:var(--e6) var(--e4);}
.t-vacio-ico{width:38px; height:38px; margin:0 auto var(--e3); color:var(--t-ink-3); opacity:.5;}
.t-vacio h4{font-size:var(--f-base); font-weight:600; margin:0 0 var(--e1);}
.t-vacio p{font-size:var(--f-dato); color:var(--t-ink-2); margin:0 auto var(--e3); max-width:44ch;}

/* Con error, y con la salida también */
.t-error{display:flex; gap:var(--e3); align-items:flex-start; background:var(--t-mal-bg);
  border:1px solid var(--t-mal-line); border-radius:var(--r2); padding:var(--e3) var(--e4);}
.t-error .t-ico{color:var(--t-mal); margin-top:1px;}
.t-error h4{font-size:var(--f-base); font-weight:600; margin:0 0 2px; color:var(--t-ink);}
.t-error p{font-size:var(--f-dato); color:var(--t-ink-2); margin:0;}

/* El guardado se confirma DONDE ocurrió, no en un aviso que se va */
.t-guardado{position:relative;}
.t-guardado::after{
  content:''; position:absolute; right:7px; top:50%; width:13px; height:13px;
  margin-top:-6px; opacity:0; pointer-events:none;
  transition:opacity var(--v-normal) var(--curva);
  background:no-repeat center/13px 13px;
}
.t-guardado--guardando::after{opacity:.55;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355585c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4'/%3E%3C/svg%3E");}
.t-guardado--ok::after{opacity:1;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c5a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");}
.t-guardado--mal::after{opacity:1;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23be1723' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");}
.t-guardado--mal{outline:1px solid var(--t-mal-line);}
/* el campo deja sitio a la marca para que no la tape el texto */
.t-guardado input, .t-guardado select{padding-right:24px !important;}

/* ── el esqueleto de carga ───────────────────────────────────────────── */
.t-hueso{background:linear-gradient(90deg,var(--t-line-2) 25%,var(--t-line) 37%,var(--t-line-2) 63%);
  background-size:400% 100%; border-radius:4px; animation:t-brillo 1.4s ease-in-out infinite;}
@keyframes t-brillo{0%{background-position:100% 0}100%{background-position:0 0}}

/* ── movimiento: solo donde explica algo, y nunca si piden que no ────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important;
    animation-iteration-count:1 !important;}
}
.dc-wrap{background:var(--gr-2); color:var(--ink); border-radius:12px; overflow:hidden; border:0.5px solid var(--gr-line); position:relative;}
.dc-mono{font-family:'IBM Plex Mono',monospace;}
.dc-head{background:var(--t-surface); color:var(--t-ink); padding:var(--e4) var(--e5);
  border-bottom:1px solid var(--t-line);}
.dc-head-row{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.dc-title{font-size:var(--f-alto); font-weight:600; letter-spacing:-.01em; margin:0 0 var(--e1);}
.dc-sub{font-size:var(--f-dato); color:var(--t-ink-3); margin:0;}
.dc-tick{display:inline-block; width:22px; height:3px; background:var(--t-marca);
  border-radius:2px; vertical-align:middle; margin-right:8px;}
.dc-profile{display:flex; align-items:center; gap:var(--e2); font-size:var(--f-dato); color:var(--t-ink-2);}
.dc-profile select{background:var(--t-surface); color:var(--t-ink); border:1px solid var(--t-line);
  border-radius:var(--r1); padding:6px 8px; font-size:var(--f-base); font-family:inherit;}
.dc-body{padding:20px 24px;}
.dc-tabs{display:flex; gap:6px; margin-bottom:16px; border-bottom:0.5px solid var(--gr-line); flex-wrap:wrap;}
.dc-tab{border:none; background:none; padding:9px 4px; margin-right:18px; font-size:13.5px; color:var(--ink-3); cursor:pointer; border-bottom:2px solid transparent; font-weight:500;}
.dc-tab:active{cursor:grabbing;}
.dc-tab.dragging{opacity:0.4;}
.dc-tab.drop-target{border-bottom:2px solid var(--t-marca);}
.dc-tabs.reordenando .dc-tab{cursor:grab;}
.dc-tab.active{color:var(--t-ink); border-bottom-color:var(--t-marca); font-weight:600;}
.dc-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:18px;}
.dc-kpi{background:var(--t-surface); border:1px solid var(--t-line); border-radius:var(--r2);
  padding:var(--e3) var(--e4);}
.dc-kpi-label{font-size:var(--f-micro); letter-spacing:.06em; text-transform:uppercase;
  color:var(--t-ink-3); font-weight:600; font-family:inherit; margin:0 0 var(--e1);}
/* La cifra manda en la tarjeta: 700 y sin tabular-nums, que a 28 px separa los
   dígitos y hace que un «121» se lea flojo. Las columnas sí siguen tabulares. */
.dc-kpi-val{font-size:var(--f-cifra); font-weight:700; letter-spacing:-.025em; margin:0;
  line-height:1.1;}
/* Una cifra suelta y grande va en la tipografía del sistema, no en la
   monoespaciada: `tabular-nums` da a cada dígito el ancho de un cero, y a 28 px
   eso hace que un «121» se lea flojo y descosido. Lo monoespaciado se reserva
   para las COLUMNAS de números, donde alinear sí importa. Las 22 tarjetas del
   sistema traen `dc-mono` escrito a mano; se les quita desde aquí. */
.dc-kpi-val.dc-mono{font-family:'Archivo','Inter',system-ui,sans-serif;
  font-variant-numeric:normal;}

/* ── LA TARJETA DE CIFRA ───────────────────────────────────────────────
   Rótulo en versalitas · cifra grande en el color de su estado · una línea
   que explica de dónde sale · y, si la cifra es parte de un total, la barra
   que lo dice sin obligar a dividir mentalmente.
   El color va SIEMPRE con la palabra: un verde solo no dice «conciliado». */
.dc-kpi-val--ok{color:var(--t-ok);}
.dc-kpi-val--mal{color:var(--t-mal);}
.dc-kpi-val--aviso{color:var(--t-aviso);}
.dc-kpi-val--info{color:var(--t-info);}
.dc-kpi-de{font-size:var(--f-med); font-weight:600; color:var(--t-ink-3); letter-spacing:0;}
.dc-kpi-sub{font-size:var(--f-micro); color:var(--t-ink-3); margin:var(--e2) 0 0;
  line-height:1.5;}
.dc-kpi-sub b{color:var(--t-ink-2); font-weight:600;}
.dc-kpi-barra{height:4px; border-radius:var(--r3); background:var(--t-line);
  margin:var(--e2) 0 0; overflow:hidden;}
.dc-kpi-barra i{display:block; height:100%; border-radius:var(--r3);
  background:var(--t-ok); transition:width var(--v-normal) var(--curva);}
.dc-kpi-barra--mal i{background:var(--t-mal);}
.dc-kpi-barra--aviso i{background:var(--t-aviso);}
.dc-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; align-items:center;}
.dc-filters select, .dc-filters input[type=text]{
  border:0.5px solid var(--gr-line); border-radius:7px; padding:7px 10px; font-size:13px; background:var(--gr-3); color:var(--ink); min-width:120px;
}
.dc-filters label.chk{display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink-2); background:var(--gr-3); border:0.5px solid var(--gr-line); padding:6px 10px; border-radius:7px;}
.dc-btn{border:1px solid var(--t-line); background:var(--t-surface); border-radius:var(--r1);
  padding:7px 12px; font-size:var(--f-base); font-family:inherit; cursor:pointer; color:var(--t-ink);
  transition:background var(--v-rapido) var(--curva), border-color var(--v-rapido) var(--curva),
             transform var(--v-rapido) var(--curva);}
.dc-btn:hover{background:var(--t-surface-2); border-color:var(--t-ink-3);}
.dc-btn:active{transform:translateY(1px);}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--t-marca); outline-offset: 2px; border-radius: var(--r1);
}
.dc-btn.primary{background:var(--ink); color:#fff; border-color:var(--ink);}
/* El botón de una fila de tabla. Estaba escrito a mano nueve veces con el
   mismo `style`, y cambiar el tamaño obligaba a acordarse de los nueve. */
.dc-btn--chico{font-size:11px; padding:4px 9px;}
/* El aviso de limpieza de puntos GPS antiguos, en Bodega › Logística. */
.gps-mant{margin-top:18px; padding-top:14px; border-top:1px solid var(--gr-line);}
.gps-mant-tit{font-size:12px; font-weight:600; margin:0 0 6px;}
.gps-mant-ayuda{margin:0 0 10px; max-width:640px;}
.gps-mant-resultado{font-size:12px; color:var(--ink-2); margin:8px 0 0;}
/* La presentación de la bandeja abierta en la conciliación. */
.conc-bandeja-tit{font-size:12.5px; font-weight:600; margin:0 0 2px;}
.conc-bandeja-ayuda{font-size:11px; color:var(--ink-2); margin:0;}
.dc-btn.primary:hover{background:#000;}
/* `--amber` es el color de TEXTO de los avisos (#7d5400, oscuro). Usarlo de
   fondo con otro marrón encima daba 2,17 de contraste — por debajo de 3, o
   sea ilegible. El fondo de aviso es `--amber-bg`. Así queda en 6,06. */
/* ── Los botones del selector de módulos ──────────────────────────────
   Antes eran tres estilos repartidos por un ternario: negro, verde claro y
   marrón. El marrón sobre marrón daba 2,17 de contraste y no se leía, y los
   otros dos no significaban nada — Bodega y Flota compartían color sin tener
   nada en común.

   Ahora cada módulo lleva su tono. El color aquí SÍ es información: identifica
   el módulo al que se entra todos los días, y con cinco entradas eso se
   reconoce antes que el texto. Los cinco están medidos entre 6,6 y 7,6 de
   contraste (WCAG pide 4,5) y sus tonos se separan al menos 41°, así que se
   distinguen entre sí y no solo por el rótulo. */
.dc-btn.btnModoApp{padding:20px 26px; font-size:16px; font-weight:600; border-radius:12px;
  border-width:1px; border-style:solid; min-width:186px; justify-content:center;
  transition:transform var(--v-rapido) var(--curva), box-shadow var(--v-rapido) var(--curva);}
.dc-btn.btnModoApp:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(29,30,28,.13);}
.dc-btn.btnModoApp .t-ico{width:19px; height:19px;}
.mod-crm       {background:#fdecec; color:#a6162a; border-color:#f3cdd0;}
.mod-bodega    {background:#e9f5f0; color:#0b6047; border-color:#c3e2d6;}
.mod-financiero{background:#eaf0fb; color:#1b4a8f; border-color:#c9d9f2;}
.mod-flota     {background:#fdf3dd; color:#6b4700; border-color:#eddaad;}
.mod-talento   {background:#f2ecfa; color:#5b3a94; border-color:#dcd0ef;}
.mod-inspeccion{background:#e2f1f4; color:#0a5c6e; border-color:#bcdde5;}
.mod-seguimiento{background:#f1f5e1; color:#4a5a0d; border-color:#d9e3b4;}
.mod-ventas    {background:#fdeef0; color:#8a2338; border-color:#f3cdd5;}
/* ── Módulo Inspección ─────────────────────────────────────────── V7.74.0
   Sus propias clases, como hizo Flota. Reutilizar las de otro módulo para
   algo que no es lo mismo termina en un cambio de estilo allá que rompe
   una pantalla aquí. */
.insp-nota{border:1px solid var(--t-line); border-left-width:3px; border-radius:var(--r1);
  padding:10px 13px; font-size:var(--f-dato); line-height:1.5; color:var(--t-ink-2);
  background:var(--t-surface-2); margin-bottom:var(--e3);}
.insp-nota b{color:var(--t-ink);}
.insp-nota--info{background:var(--t-info-bg); border-color:var(--t-info-line); border-left-color:var(--t-info);}
.insp-nota--aviso{background:var(--t-aviso-bg); border-color:var(--t-aviso-line); border-left-color:var(--t-aviso);}
.insp-nota--mal{background:var(--t-mal-bg); border-color:var(--t-mal-line); border-left-color:var(--t-mal);}
.insp-cab{display:flex; align-items:baseline; justify-content:space-between; gap:var(--e3);
  flex-wrap:wrap; padding:var(--e3) var(--e4); border-bottom:1px solid var(--t-line-2);}
.insp-cab h3{margin:0; font-size:var(--f-base); font-weight:600; letter-spacing:-.01em;}
.insp-cab h4{margin:0; font-size:var(--f-dato); font-weight:600;}
.insp-texto{padding:0 var(--e4) var(--e3); font-size:var(--f-dato);
  color:var(--t-ink-2); line-height:1.5;}
.insp-texto b{color:var(--t-ink);}
.insp-item{display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap;
  padding:var(--e3) var(--e4); border-bottom:1px solid var(--t-line-2);}
.insp-item:last-child{border-bottom:0;}
.insp-campos{display:flex; gap:var(--e3); flex-wrap:wrap; padding:var(--e3) var(--e4);
  align-items:center;}
.insp-campos--ras{padding:0;}
.insp-input-corto{width:110px;}
.insp-campos input, .insp-campos select{border:1px solid var(--t-line); border-radius:var(--r1);
  padding:7px 10px; font:inherit; font-size:var(--f-dato);
  background:var(--t-surface); color:var(--t-ink);}
.insp-campos input:focus, .insp-campos select:focus{outline:none; border-color:var(--t-ink);}
.insp-enlace{background:none; border:0; padding:0; font:inherit; font-weight:600;
  color:var(--t-ink); cursor:pointer; text-align:left; text-decoration:underline;
  text-decoration-color:var(--t-line); text-underline-offset:3px;}
.insp-enlace:hover{text-decoration-color:currentColor;}
.insp-motivos{display:flex; flex-direction:column; gap:4px; align-items:flex-end;}
.insp-item--activa{background:var(--t-ok-bg); border-left:3px solid var(--t-ok);}
.lub-punto{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:5px;}
.lub-punto .dc-btn{font-size:11.5px; padding:6px 9px; min-height:36px;}
.lub-punto input{flex:1; min-width:120px; border:1px solid var(--t-line);
  border-radius:var(--r1); padding:7px 9px; font:inherit; font-size:var(--f-dato);}
.lub-bloque{border-left:2px solid var(--t-line-2); padding-left:10px; margin-bottom:10px;}
.insp-cuerpo{padding:0 var(--e4) var(--e4);}
/* ── La visita: pensada para un pulgar, con guantes ───────────── V7.75.0 */
.insp-equipo{border-left:3px solid var(--t-line);}
.insp-equipo--listo{border-left-color:var(--t-ok);}
.insp-rot{font-size:var(--f-micro); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--t-ink-2); margin:var(--e3) 0 6px;}
/* Los botones de estado son grandes a propósito: se tocan de pie, junto a una
   máquina, muchas veces con guantes. Un objetivo pequeño obliga a mirar la
   pantalla en vez de mirar el sensor.

   El `min-height:44px` HOY no cambia nada —medido: el alto natural del botón
   es exactamente 44— y por eso quitarlo no lo caza ninguna prueba. Se queda
   igual: es un suelo declarado, para que un cambio futuro en el relleno de
   `.dc-btn` no encoja estos objetivos sin que nadie se entere. La prueba en
   navegador sí exige los 44, así que ese cambio sí se cazaría. */
.insp-letras{display:flex; gap:6px; flex-wrap:wrap;}
.insp-letras .dc-btn{flex:1; min-width:120px; min-height:44px; justify-content:center;}
.insp-letras .dc-btn b{margin-right:5px; font-size:14px;}
.insp-fotos{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--e3);}
/* La cabecera plegable de un equipo. Es un botón entero, no una flechita:
   en un teléfono, con guantes, el blanco tiene que ser toda la fila. */
.insp-plegar{display:flex; align-items:center; gap:var(--e3); width:100%;
  background:none; border:0; padding:var(--e3) 0; margin:0; cursor:pointer;
  text-align:left; font:inherit; color:inherit; min-height:44px; flex-wrap:wrap;}
.insp-plegar:hover .insp-plegar-flecha{color:var(--ink-1);}
.insp-plegar:focus-visible{border-radius:8px;}
.insp-plegar > .t-flex1{display:flex; flex-direction:column; gap:2px; min-width:0;}
.insp-plegar b{font-size:var(--f-med); letter-spacing:-.01em;}
.insp-plegar-flecha{display:inline-flex; color:var(--ink-3); flex-shrink:0;
  transition:transform .16s ease;}
.insp-plegar-flecha--abierta{transform:rotate(90deg);}
@media (prefers-reduced-motion:reduce){ .insp-plegar-flecha{transition:none;} }
.insp-foto{border:1px solid var(--t-line); border-radius:var(--r1); padding:6px 10px;
  font-size:var(--f-micro); color:var(--t-ink-2); cursor:pointer; background:var(--t-surface-2);
  display:flex; flex-direction:column; gap:2px; min-height:40px; justify-content:center;}
.insp-foto b{color:var(--t-ink); font-size:var(--f-micro);}
.insp-foto:hover{border-color:var(--t-ink);}
.insp-modal{max-width:560px; width:min(94vw,560px); max-height:92vh; overflow-y:auto;}
/* El modal de la aplicación centra su contenido y estira los `input` con
   letra espaciada —está pensado para un código de acceso—. La ficha de un
   punto es un formulario normal: se le devuelve el comportamiento normal. */
.insp-modal input{letter-spacing:normal; text-align:left; font-size:var(--f-dato);
  margin-bottom:0; border:1px solid var(--t-line); border-radius:var(--r1); padding:9px 11px;}
@media (max-width:520px){
  .insp-letras .dc-btn{min-width:calc(50% - 3px);}
  .insp-campos{padding:var(--e3);}
}
.mod-neutro    {background:var(--t-surface); color:var(--t-ink); border-color:var(--t-line);}
.dc-btn.amber{background:var(--amber-bg); color:var(--amber); border-color:var(--t-aviso-line);}
.dc-btn.amber:hover{background:#fbebc4;}
.dc-btn.teal{background:var(--teal-bg); color:var(--teal-dark); border-color:var(--teal-bg);}
.dc-btn.red{background:var(--red); color:#fff; border-color:var(--red);}
.dc-btn.red:hover{background:var(--red-dark); border-color:var(--red-dark);}
.dc-btn.red-outline{background:var(--red-bg); color:var(--red-dark); border-color:var(--red-bg);}
.revisionItemCheck{width:22px; height:22px; flex-shrink:0; cursor:pointer; accent-color:var(--teal); margin-top:1px;}
.dc-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:14px; align-items:start;}
@media (max-width:760px){.dc-grid{grid-template-columns:1fr;}}
.dc-list{background:var(--gr-3); border:0.5px solid var(--gr-line); border-radius:10px; max-height:560px; overflow-y:auto;}
/* V8.17.0 — `.dc-row` pasó de <div> a <button> para poder seleccionar un
   proyecto con el teclado. Estas cuatro líneas son las que le quitan al botón
   su apariencia de botón: sin ellas heredaría el fondo, el borde y el texto
   centrado del navegador. El mismo criterio que ya seguía el tablero. */
.dc-row{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:0.5px solid var(--gr-line); cursor:pointer;
  width:100%; text-align:left; font:inherit; color:inherit; background:none;
  border-left:0; border-right:0; border-top:0; -webkit-appearance:none; appearance:none;}
.dc-row:last-child{border-bottom:none;}
.dc-row:hover{background:var(--gr-2);}
.dc-row.active{background:#fdf3e2;}
.dc-led{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
/* V8.17.0 — `--amber` y `--amber-dark` apuntan los dos a `--t-aviso`, así que
   «En curso» (.mid) y «Suspendido» (.susp) salían del MISMO hex: no se
   distinguían ni con vista normal. No es accesibilidad, es un bug. Se lleva
   «Suspendido» a `--t-espera`, el morado que ya está definido y medido a ΔE
   39,8 del azul. Y el punto apagado sube de #c3c2b7 (1,79:1) a un gris que se
   ve de verdad. */
.dc-led.ok{background:var(--teal);} .dc-led.mid{background:var(--amber);} .dc-led.off{background:#8b9096;} .dc-led.late{background:var(--red);} .dc-led.susp{background:var(--t-espera);}
.dc-row-main{flex:1; min-width:0;}
.dc-row-title{font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dc-row-sub{font-size:11.5px; color:var(--ink-3); margin-top:2px; display:flex; gap:6px; flex-wrap:wrap;}
.dc-chip{display:inline-block; font-size:var(--f-dato); font-weight:600; padding:2px 8px; border-radius:20px; background:var(--gray-bg); color:var(--gray-dark);}
.dc-chip.chip-red{background:var(--red-bg); color:var(--red-dark);}
.dc-chip.chip-amber{background:var(--amber-bg); color:var(--amber-dark);}
.dc-chip.chip-blue{background:var(--blue-bg); color:var(--blue-dark);}
.dc-chip.chip-gris{background:var(--gray-bg); color:var(--ink-2);}
.dc-row-value{font-size:12.5px; font-weight:500; text-align:right; white-space:nowrap;}
.dc-row-value.muted{color:var(--ink-3); font-weight:400;}
.dc-badge{display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px; font-weight:500;}
.dc-badge.b-teal{background:var(--teal-bg); color:var(--teal-dark);}
.dc-badge.b-amber{background:#fbe9d0; color:var(--amber-dark);}
.dc-badge.b-red{background:var(--red-bg); color:var(--red-dark);}
.dc-badge.b-gray{background:var(--gray-bg); color:var(--gray-dark);}
.dc-detail{background:var(--gr-3); border:0.5px solid var(--gr-line); border-radius:10px; padding:16px 18px; min-height:200px;}
.dc-detail-empty{color:var(--ink-3); font-size:13.5px; text-align:center; padding:60px 20px;}
.dc-detail h3{font-size:16px; font-weight:500; margin:0 0 6px;}
.dc-meta{font-size:12px; color:var(--ink-2); margin-bottom:10px; display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.dc-meta select.estadoSel{border:0.5px solid var(--gr-line); border-radius:20px; font-size:11px; padding:2px 8px; background:var(--gr-3);}
.dc-section{margin-top:16px; border-top:0.5px solid var(--gr-line); padding-top:14px;}
.dc-section-label{font-size:12px; font-weight:700; color:#000; font-family:Arial, sans-serif; margin-bottom:8px; text-transform:uppercase; letter-spacing:.02em; display:flex; justify-content:space-between; align-items:center; gap:8px;}
.dc-section-label-clic{cursor:pointer; user-select:none;}
.dc-seccion-flecha{color:var(--ink-3); font-size:11px; margin-left:auto;}
.dc-notes-box{background:var(--gr-2); border-radius:8px; padding:10px 12px; font-size:12.5px; color:var(--ink-2); white-space:pre-wrap; line-height:1.5;}
.dc-quote-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.dc-quote-col-label{font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px;}
.dc-quote-current{font-size:22px; font-weight:500; margin:0 0 4px;}
.dc-quote-meta{font-size:11.5px; color:var(--ink-3); margin-bottom:8px; min-height:14px;}
.dc-quote-form{display:flex; gap:6px; align-items:center;}
.dc-quote-form input{border:0.5px solid var(--gr-line); border-radius:7px; padding:7px 10px; font-size:13px; width:100px;}
.dc-comment{padding:8px 0; border-bottom:0.5px solid var(--gr-line);}
.dc-comment:last-child{border-bottom:none;}
.dc-comment-head{font-size:11.5px; color:var(--ink-3); margin-bottom:3px;}
.dc-comment-head b{color:var(--ink);}
.dc-comment-text{font-size:13px; line-height:1.5;}
.dc-comment-form{margin-top:10px;}
.dc-comment-form textarea{width:100%; border:0.5px solid var(--gr-line); border-radius:8px; padding:8px 10px; font-size:13px; font-family:inherit; resize:vertical; min-height:56px;}
.dc-mencion{background:var(--teal-bg); color:var(--teal-dark); padding:1px 4px; border-radius:4px; font-weight:500;}
#mencionDropdown{background:var(--gr-3); border:0.5px solid var(--gr-line); border-radius:8px; margin-top:4px; max-height:150px; overflow-y:auto;}
#edClienteVinculoDropdown{background:var(--gr-3); border:0.5px solid var(--gr-line); border-radius:8px; margin-top:4px; max-height:180px; overflow-y:auto;}
#enNuevoClienteDropdown, .entregaClienteDropdown{background:var(--gr-3); border:0.5px solid var(--gr-line); border-radius:8px; margin-top:4px; max-height:180px; overflow-y:auto; position:absolute; left:0; right:0; z-index:20;}
.dc-mencion-opcion{padding:6px 10px; font-size:12.5px; cursor:pointer;}
.dc-reacciones{display:flex; gap:4px; margin-top:4px;}
.dc-reaccion-btn{border:0.5px solid var(--gr-line); background:#fff; border-radius:10px; padding:1px 7px; font-size:12.5px; cursor:pointer; line-height:1.5;}
.dc-reaccion-btn:hover{background:var(--gr-1);}
.dc-reaccion-btn.activa{background:var(--teal-bg); border-color:var(--teal-dark);}
.dc-mencion-opcion:hover{background:var(--gr-2);}
.dc-mitrabajo-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; padding:16px 0;}
.dc-mitrabajo-seccion h4{font-size:13px; margin:0 0 10px; color:var(--ink-1);}
.dc-mitrabajo-card{background:#fff; border:0.5px solid var(--gr-line); border-radius:10px; padding:10px 12px; margin-bottom:8px;}
.dc-mitrabajo-card-head{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px;}
.dc-mitrabajo-desc{font-size:12px; color:var(--ink-2); margin:4px 0 0;}
.dc-mitrabajo-vacio{font-size:12px; color:var(--ink-3);}
.dc-accion-card{background:var(--gr-3); border:0.5px solid var(--gr-line); border-radius:8px; padding:10px 12px; margin-bottom:8px;}
@media (max-width: 720px){ .dc-mitrabajo-grid{grid-template-columns:1fr;} }
.dc-cliente-card{background:#fff; border:0.5px solid var(--gr-line); border-radius:10px; margin-bottom:10px; overflow:hidden;}
.dc-cliente-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; flex-wrap:wrap;}
.dc-cliente-head:hover{background:var(--gr-2);}
.dc-cliente-body{border-top:0.5px solid var(--gr-line); padding:12px 14px;}
.dc-cliente-datos{border-bottom:0.5px solid var(--gr-line); padding-bottom:12px; margin-bottom:8px;}
.dc-cliente-oport{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer; font-size:12.5px;}
.dc-cliente-oport:hover{background:var(--gr-2);}

/* ===== Capa móvil (PWA) ===== */
#dcMovil{display:none;}
body.movil #dcMovil{display:block;}
body.movil .dc-header, body.movil .dc-body{display:none !important;}
body.movil{background:var(--gr-2);}
.mv-header{position:sticky; top:0; z-index:20; background:var(--t-surface); color:var(--t-ink);
  border-bottom:1px solid var(--t-line); padding:var(--e3) var(--e4);
  display:flex; justify-content:space-between; align-items:center;}
.mv-header h1{font-size:15px; margin:0; font-weight:600;}
.mv-header .mv-user{font-size:var(--f-micro); color:var(--t-ink-3);}
.mv-cont{padding:12px 12px 84px; max-width:640px; margin:0 auto;}
.mv-nav{position:fixed; bottom:0; left:0; right:0; z-index:30; background:#fff; border-top:0.5px solid var(--gr-line); display:flex; padding-bottom:env(safe-area-inset-bottom);}
.mv-nav button{flex:1; border:none; background:none; padding:10px 4px 12px; font-size:11px; color:var(--ink-3); cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:3px;}
.mv-nav button .mv-ico{font-size:19px; line-height:1;}
.mv-nav button.active{color:var(--teal-dark); font-weight:600;}
.mv-grupo-titulo{font-size:12px; font-weight:600; color:var(--ink-2); margin:14px 2px 8px; display:flex; align-items:center; gap:6px;}
.mv-card{background:#fff; border:0.5px solid var(--gr-line); border-radius:12px; padding:12px 14px; margin-bottom:10px;}
.mv-card-cliente{font-size:15px; font-weight:600; margin:0 0 3px;}
.mv-card-sub{font-size:12.5px; color:var(--ink-2); margin:0;}
.mv-card-acc{font-size:12.5px; color:var(--ink-2); margin:6px 0 0;}
.mv-btn{border:0.5px solid var(--gr-line); background:#fff; border-radius:10px; padding:11px 14px; font-size:13.5px; font-family:inherit; cursor:pointer; color:var(--ink); font-weight:500;}
.mv-btn.full{width:100%; display:block;}
.mv-btn.primary{background:var(--t-ink); color:#fff; border-color:var(--t-ink);}
.mv-btn.grande{padding:15px; font-size:15px; font-weight:600;}
.mv-btn.sel{background:var(--teal-bg); border-color:var(--teal); color:var(--teal-dark); font-weight:600;}
.mv-btn-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.mv-btn-row .mv-btn{flex:1; min-width:calc(50% - 4px); text-align:center;}
.mv-label{font-size:12.5px; font-weight:600; color:var(--ink-2); margin:16px 0 8px; display:block;}
.mv-text{width:100%; border:0.5px solid var(--gr-line); border-radius:10px; padding:12px; font-size:15px; font-family:inherit; min-height:96px; resize:vertical; box-sizing:border-box;}
.mv-input{width:100%; border:0.5px solid var(--gr-line); border-radius:10px; padding:12px; font-size:15px; font-family:inherit; box-sizing:border-box;}
.mv-vacio{font-size:13px; color:var(--ink-3); text-align:center; padding:22px 10px;}
.mv-back{background:none; border:none; color:var(--teal-dark); font-size:13.5px; padding:4px 0 10px; cursor:pointer; font-family:inherit; font-weight:500;}
.mv-chip{display:inline-block; font-size:11px; padding:2px 9px; border-radius:20px; background:var(--gray-bg); color:var(--gray-dark);}
.mv-chip.rojo{background:var(--red-bg); color:var(--red-dark);}
.mv-chip.ambar{background:var(--amber-bg); color:var(--amber-dark);}
.mv-chip.verde{background:var(--teal-bg); color:var(--teal-dark);}
.mv-com{border-top:0.5px solid var(--gr-line); padding:9px 0 0; margin-top:9px;}
.mv-com-head{font-size:11.5px; color:var(--ink-3); margin:0 0 3px;}
.mv-com-txt{font-size:13px; color:var(--ink-2); margin:0; white-space:pre-wrap;}
.mv-dato{display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:7px 0; border-bottom:0.5px solid var(--gr-line);}
.mv-dato span:first-child{color:var(--ink-3);}
@media (min-width: 861px){ body.movil #dcMovil{display:none;} }

.dc-comment-form .row{display:flex; justify-content:flex-end; margin-top:6px;}
.dc-servicio-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;}
.dc-servicio-grid label{font-size:11.5px; color:var(--ink-2); display:block; margin-bottom:4px;}
.dc-servicio-grid input, .dc-servicio-grid select{width:100%; border:0.5px solid var(--gr-line); border-radius:7px; padding:7px 9px; font-size:13px;}
.dc-newform{background:var(--gr-3); border:0.5px solid var(--gr-line); border-radius:10px; padding:16px 18px; margin-top:14px; display:none;}
.dc-newform.open{display:block;}
.dc-newform-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;}
.dc-newform-grid label{font-size:11.5px; color:var(--ink-2); display:block; margin-bottom:4px;}
.dc-newform-grid input, .dc-newform-grid select{width:100%; border:0.5px solid var(--gr-line); border-radius:7px; padding:7px 9px; font-size:13px;}
.dc-checks{display:flex; gap:10px; flex-wrap:wrap; font-size:12.5px;}
.dc-checks label{display:flex; align-items:center; gap:4px;}
.dc-checks-group{margin-bottom:8px;}
.dc-checks-group-label{font-size:var(--f-micro); color:var(--ink-3); text-transform:uppercase; letter-spacing:.03em; display:block; margin-bottom:3px;}
.dc-footnote{font-size:11px; color:var(--ink-3); margin-top:14px; text-align:center;}
.dc-empty-list{color:var(--ink-3); font-size:13px; padding:30px; text-align:center;}
.dc-proceso-bar{background:var(--gr-2); border-radius:6px; height:6px; overflow:hidden; margin-bottom:10px;}
.dc-proceso-fill{background:var(--teal); height:100%;}
.dc-proceso-row{display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:7px; margin-bottom:2px; flex-wrap:wrap;}
.dc-proceso-cumple-line{flex-basis:100%; display:flex; gap:8px; align-items:center; padding-left:28px; margin-top:2px;}
.dc-proceso-cumple{border:0.5px solid var(--gr-line); border-radius:6px; padding:3px 6px; font-size:11.5px; background:#fff;}
.dc-proceso-comentario{flex:1; min-width:100px; border:0.5px solid var(--gr-line); border-radius:6px; padding:3px 6px; font-size:11.5px;}
.dc-proceso-row.done{background:var(--teal-bg);}
.dc-proceso-check input{width:16px; height:16px; accent-color:var(--teal); cursor:pointer;}
.dc-proceso-nombre{flex:1; font-size:12.5px;}
.dc-proceso-nombre.done{color:var(--teal-dark); text-decoration:line-through;}
.dc-proceso-fecha{border:0.5px solid var(--gr-line); border-radius:6px; padding:4px 6px; font-size:12px; width:132px;}
.dc-proceso-chk input:disabled{opacity:0.45; cursor:not-allowed;}
.dc-proceso-fecha:disabled{opacity:0.45; cursor:not-allowed; background:var(--gr-2);}
.dc-cal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.dc-cal-title{font-size:15px; font-weight:500; text-transform:capitalize;}
.dc-cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.dc-cal-head{font-size:11px; color:var(--ink-3); text-align:center; padding:4px 0; font-weight:500;}
.dc-cal-cell{background:var(--gr-3); border:0.5px solid var(--gr-line); border-radius:6px; min-height:74px; padding:4px; font-size:11.5px; overflow:hidden;}
.dc-cal-cell.empty{background:transparent; border:none;}
.dc-cal-cell.today{border-color:var(--amber); border-width:1.5px;}
.dc-cal-daynum{font-size:11px; color:var(--ink-2); margin-bottom:3px; font-weight:500;}
.dc-cal-modos{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
.dc-cal-ev{background:var(--teal-bg); color:var(--teal-dark); border-radius:4px; padding:1px 4px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;}
.dc-cal-ev.visita{background:var(--amber-bg); color:var(--amber-dark); font-weight:600;}
.dc-cal-ev.accion{background:var(--red-bg); color:var(--red-dark); font-weight:600;}
.dc-cal-ev.proceso{background:var(--teal-bg); color:var(--teal-dark);}
.dc-cal-more{color:var(--ink-3); font-size:var(--f-micro);}
.dc-roadmap{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
@media (max-width:760px){.dc-roadmap{grid-template-columns:repeat(2,1fr);}}
.dc-road-col{background:var(--gr-2); border:0.5px solid var(--gr-line); border-radius:10px; padding:10px; min-height:140px;}
.dc-road-col-head{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:500; padding-bottom:8px; margin-bottom:8px; border-bottom:2px solid var(--gr-line);}
.dc-road-col-head.road-red{border-bottom-color:var(--red); color:var(--red-dark);}
.dc-road-col-head.road-amber{border-bottom-color:var(--amber); color:var(--amber-dark);}
.dc-road-col-head.road-gray{border-bottom-color:var(--gray-dark); color:var(--gray-dark);}
.dc-road-col-head.road-teal{border-bottom-color:var(--teal); color:var(--teal-dark);}
.dc-road-col-sum{font-size:12px; color:var(--ink-2); margin-bottom:8px; text-align:right;}
.dc-road-card{background:var(--gr-3); border:0.5px solid var(--gr-line); border-radius:8px; padding:8px 10px; margin-bottom:8px; cursor:pointer;}
.dc-road-card:hover{background:var(--gr-2);}
.dc-road-card-title{font-size:12.5px; font-weight:500; margin-bottom:4px;}
.dc-road-card-meta{font-size:var(--f-dato); color:var(--ink-3); display:flex; gap:5px; flex-wrap:wrap; align-items:center;}
.dc-road-card-val{font-size:12px; font-weight:500; margin-top:5px; text-align:right;}
.dc-road-empty{font-size:11.5px; color:var(--ink-3); text-align:center; padding:12px 0;}
.dc-modal-overlay{position:fixed; inset:0; background:rgba(29,30,28,.42); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; z-index:1000; padding:var(--e4);}
.dc-modal-overlay.show{display:flex;}
/* V8.17.0 — la clase base no tenía alto máximo ni scroll. Con el overlay
   centrado, un modal más alto que la pantalla se recortaba por arriba Y por
   abajo, y no había forma de llegar a los botones. Es exactamente el fallo
   que ya ocurrió una vez y se resolvió creando `.dc-modal--largo`; la base se
   quedó sin arreglar. Se pone aquí para que no vuelva a pasar con el
   siguiente modal que crezca. */
.dc-modal{max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch;background:var(--t-surface); border:1px solid var(--t-line); border-radius:var(--r2);
  box-shadow:var(--s2); padding:var(--e5); width:100%; max-width:320px;}
.dc-modal-title{font-size:var(--f-med); font-weight:600; letter-spacing:-.01em; margin:0 0 var(--e2);}
/* El espaciado de dígitos y el centrado venían del cuadro del PIN que ya no
   existe, y se estaban aplicando a TODOS los campos de todos los cuadros:
   un nombre de empresa salía con las letras separadas y centrado, ilegible.
   Se conserva lo que sí valía para cualquiera —ancho, borde, relleno—. */
.dc-modal input{width:100%; border:0.5px solid var(--gr-line); border-radius:7px;
  padding:8px 10px; font-size:15px; margin-bottom:6px;}

/* ══════════════════════════════════════════════════════════════════════
   EL CUADRO LARGO: CABECERA FIJA, CUERPO QUE RUEDA, PIE FIJO
   ----------------------------------------------------------------------
   Sin esto, un cuadro con un formulario largo crecía hacia abajo hasta
   salirse de la pantalla y los botones de Crear y Cancelar quedaban FUERA,
   sin manera de llegar a ellos: el cuadro se abría y no se podía ni
   completar ni cerrar. Pasó en el alta de empresas, con seis palabras y
   tres líneas dentro.

   La cabecera y el pie se quedan quietos; solo rueda el medio. Así el
   botón de cerrar está siempre a la vista, por largo que sea el contenido.
   ══════════════════════════════════════════════════════════════════════ */
.dc-modal--largo{max-width:820px; max-height:min(88vh, 900px);
  display:flex; flex-direction:column; padding:0; overflow:hidden;}
.dc-modal-head{display:flex; align-items:center; gap:var(--e3); flex-shrink:0;
  padding:var(--e4) var(--e5); border-bottom:1px solid var(--t-line);
  font-size:var(--f-med); font-weight:600;}
.dc-modal-head > b{flex:1; min-width:0;}
.dc-modal-x{margin-left:auto; flex-shrink:0; background:none; border:0; cursor:pointer;
  color:var(--ink-3); padding:6px; border-radius:7px; line-height:0;
  min-width:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:center;}
.dc-modal-x:hover{background:var(--gr-2); color:var(--ink-1);}

/* `min-height:0` es lo que deja que un hijo de flex se encoja y ruede; sin
   eso el cuerpo se estira y vuelve a empujar el pie fuera de la pantalla. */
.dc-modal-body{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:var(--e4) var(--e5);}
.dc-modal-foot{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; flex-shrink:0;
  padding:var(--e4) var(--e5); border-top:1px solid var(--t-line); background:var(--t-surface);}
.dc-modal-body label{display:block; margin-bottom:var(--e3);}
.dc-modal-body input[type="text"], .dc-modal-body input[type="date"],
.dc-modal-body input[type="number"], .dc-modal-body select, .dc-modal-body textarea{
  width:100%; border:0.5px solid var(--gr-line); border-radius:7px; padding:7px 10px;
  font-size:13.5px; letter-spacing:normal; text-align:left; margin-top:3px;
  font-family:inherit; background:var(--t-surface); color:var(--ink-1);}
/* Una fila de campos que se parte sola en pantalla estrecha. */
.lub-fila{display:flex; gap:var(--e3); flex-wrap:wrap; align-items:flex-end;}
.lub-fila > label{flex:1 1 160px; margin-bottom:0;}
/* Las opciones de una sola respuesta van en línea con su texto: la marca a la
   izquierda y la palabra al lado, no una encima de otra. */
.dc-opcion{display:inline-flex !important; align-items:center; gap:6px;
  flex:0 0 auto !important; padding:6px 10px; border:0.5px solid var(--gr-line);
  border-radius:8px; cursor:pointer; margin-bottom:0;}
.dc-opcion:hover{background:var(--gr-2);}
.dc-opcion input{width:auto !important; margin:0 !important;}
@media (max-width:640px){
  .dc-modal--largo{max-width:100%; max-height:94vh;}
  .dc-modal-head, .dc-modal-body, .dc-modal-foot{padding-left:var(--e4); padding-right:var(--e4);}
  .dc-modal-foot .dc-btn{flex:1 1 140px;}
}
.dc-modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:8px;}
.dc-modal-error{color:var(--red); font-size:12px; margin:4px 0 0; display:none;}

/* ══════════════════════════════════════════════════════════════════════
   LA PUERTA DE ENTRADA                                        F1C-V7.43.0
   ----------------------------------------------------------------------
   El inicio de sesión es lo primero que se ve del sistema, todos los días.
   Hasta ahora era una tarjeta pequeña flotando sobre gris: correcta, pero
   sin decir nada de quién la hizo ni de para qué sirve.

   Ahora son dos mitades. A la izquierda, el trabajo: logo, formulario y
   nada más que distraiga. A la derecha, la casa: el nombre, lo que hace
   el sistema y una retícula construida en código —cero KB de imagen— que
   toma el rojo del logo y lo deja respirar sobre negro.

   Bajo 900 px la mitad derecha desaparece y queda el formulario solo,
   porque en un teléfono la mitad decorativa sería la mitad del sitio.
   ══════════════════════════════════════════════════════════════════════ */
.t-puerta{position:fixed; inset:0; z-index:1000; display:none;
  grid-template-columns:minmax(0,440px) 1fr; background:var(--t-surface);}
.t-puerta.show{display:grid;}
/* El formulario se centra verticalmente; la firma va anclada abajo, fuera del
   flujo, para que no desequilibre el centrado del bloque que importa. */
.t-puerta-form{position:relative; display:flex; flex-direction:column;
  justify-content:center; padding:var(--e6); overflow-y:auto; gap:var(--e4);}
.t-puerta-form > *{max-width:352px; width:100%;}
.t-puerta-logo{height:36px; width:auto; display:block; margin-bottom:var(--e2);}
.t-puerta h1{font-size:26px; font-weight:600; letter-spacing:-.02em; margin:0 0 var(--e1);
  line-height:1.15;}
.t-puerta-lema{font-size:var(--f-base); color:var(--t-ink-3); margin:0;}
.t-campo{display:flex; flex-direction:column; gap:5px; margin-bottom:var(--e3);}
.t-campo label{font-size:var(--f-micro); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--t-ink-3);}
.t-campo input{width:100%; border:1px solid var(--t-line); border-radius:var(--r1);
  padding:11px 12px; font-size:var(--f-med); font-family:inherit; color:var(--t-ink);
  background:var(--t-surface); letter-spacing:normal; text-align:left; margin:0;
  transition:border-color var(--v-rapido) var(--curva), box-shadow var(--v-rapido) var(--curva);}
.t-campo input:focus{outline:none; border-color:var(--t-ink);
  box-shadow:0 0 0 3px rgba(29,30,28,.08);}
.t-campo input::placeholder{color:var(--t-ink-3); letter-spacing:normal;}
.t-puerta .dc-btn.primary{min-height:44px; font-size:var(--f-med);}
.t-puerta-enlaces{display:flex; flex-direction:column; gap:var(--e2); align-items:flex-start;}
.t-puerta-enlaces a{font-size:var(--f-dato); color:var(--t-ink-2); text-decoration:none;
  border-bottom:1px solid var(--t-line); padding-bottom:1px;}
.t-puerta-enlaces a:hover{color:var(--t-ink); border-bottom-color:var(--t-ink);}
.t-puerta-firma{position:absolute; left:var(--e6); right:var(--e6); bottom:var(--e5);
  margin:0; font-size:var(--f-micro); color:var(--t-ink-3); line-height:1.7;}
.t-puerta-firma b{color:var(--t-ink-2); font-weight:600;}

/* la mitad de la casa */
.t-puerta-marca{position:relative; overflow:hidden; background:var(--t-ink);
  color:#fff; display:flex; flex-direction:column; justify-content:center;
  padding:var(--e6);}
/* La retícula: dos capas de líneas finas. Es la trama de un plano técnico,
   que es de donde viene el trabajo de esta casa. */
.t-puerta-marca::before{content:''; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:52px 52px;}
/* El resplandor rojo: el único color de la marca, puesto una sola vez. */
.t-puerta-marca::after{content:''; position:absolute; width:640px; height:640px;
  right:-190px; bottom:-260px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(190,23,35,.42) 0%, rgba(190,23,35,0) 68%);}
/* EL VIDEO DE FONDO                                            V7.51.0
   Va detrás de todo: la retícula y el resplandor rojo quedan encima, y el
   texto encima de ellos. Arranca invisible y aparece cuando el navegador
   confirma que puede reproducirlo; si el archivo no está, no pasa nada y la
   puerta se ve exactamente como antes. */
.t-puerta-marca > .t-puerta-video{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; opacity:0; pointer-events:none;
  transition:opacity 1.4s ease;}
/* `visible` = se ve (aunque sea el póster fijo). `listo` = además se mueve.
   Antes solo existía `listo`, y como se ponía en el evento `canplay` del
   vídeo, cuando el vídeo no arrancaba el panel se quedaba con el fondo liso.
   El póster pesa 31 KB contra los 2,7 MB del vídeo: se ve algo siempre. */
.t-puerta-marca > .t-puerta-video.visible,
.t-puerta-marca > .t-puerta-video.listo{opacity:.85;}
/* El velo. Sin esto, un fotograma claro se come el texto blanco: el contraste
   no puede depender de qué esté pasando en el video en ese segundo. */
.t-puerta-marca::before{z-index:1;}
.t-puerta-marca::after{z-index:1;}
.t-puerta-marca > .t-puerta-velo{position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0; transition:opacity 1.4s ease;
  background:linear-gradient(100deg, rgba(29,30,28,.90) 0%, rgba(29,30,28,.74) 46%,
    rgba(29,30,28,.42) 100%);}
.t-puerta-marca.con-video > .t-puerta-velo{opacity:1;}
.t-puerta-marca > *{position:relative; z-index:2;}
@media (prefers-reduced-motion: reduce){
  /* Quieto, no escondido. Quien pide menos animación pide que no se mueva, no
     quedarse sin la imagen: el póster es fija y cumple las dos cosas. Con
     `display:none` la puerta se veía vacía en cualquier equipo con los efectos
     de animación de Windows desactivados, que son muchos. */
  .t-puerta-marca > .t-puerta-video{transition:none;}
}
.t-puerta-marca h2{font-size:clamp(30px, 3.4vw, 44px); font-weight:600;
  letter-spacing:-.025em; line-height:1.1; margin:0 0 var(--e3); max-width:11em;
  text-wrap:balance;}
.t-puerta-marca p{font-size:var(--f-med); color:rgba(255,255,255,.72); margin:0;
  max-width:34em; line-height:1.6;}
.t-puerta-modulos{display:flex; flex-wrap:wrap; gap:var(--e2); margin-top:var(--e4);}
.t-puerta-modulo{display:flex; align-items:center; gap:7px; font-size:var(--f-dato);
  color:rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r3); padding:6px 13px;}
.t-puerta-modulo .t-ico{width:14px; height:14px; opacity:.8;}
/* El sello va anclado abajo para que el mensaje pueda ocupar el centro. */
.t-puerta-sello{position:absolute; left:var(--e6); right:var(--e6); bottom:var(--e6);
  display:flex; align-items:center; gap:var(--e3);
  border-top:1px solid rgba(255,255,255,.14); padding-top:var(--e4);}
/* El logo lleva letras negras: sobre negro desaparece. Se pasa a blanco
   entero —marca de agua, no logotipo— que es como se firma sobre oscuro. */
.t-puerta-sello img{height:24px; width:auto; opacity:.85;
  filter:brightness(0) invert(1);}
.t-puerta-sello span{font-size:var(--f-micro); color:rgba(255,255,255,.55);
  letter-spacing:.05em; text-transform:uppercase;}

@media (max-width: 900px){
  .t-puerta{grid-template-columns:1fr;}
  .t-puerta-marca{display:none;}
  .t-puerta-form{padding:var(--e5) var(--e4) 96px; justify-content:flex-start;
    padding-top:var(--e6);}
  .t-puerta-form > *{max-width:none;}
  .t-puerta-firma{left:var(--e4); right:var(--e4); bottom:var(--e4);}
}
@media (max-width: 900px) and (max-height: 620px){
  .t-puerta-form{padding-top:var(--e4);}
  /* Con el teclado abierto la firma deja de estar anclada: si no, tapa el botón. */
  .t-puerta-firma{position:static; margin-top:var(--e3);}
}

.dc-toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:1000; max-width:80%; text-align:center;}
.dc-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.dc-toast.error{background:var(--red);}

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL                                                       F1C-V7.36.0
   ----------------------------------------------------------------------
   Bodega no trabaja en escritorio. El despachador usa UNA mano, a veces con
   guante, y muchas veces con sol directo en la pantalla. Tres consecuencias:

     · los objetivos táctiles suben a 44 px — es lo que mide un pulgar
     · el texto de dato sube, porque 12 px al sol no se lee
     · el gris apagado se oscurece: al sol, gris claro sobre blanco desaparece

   Y una tabla de seis columnas dentro de un scroll horizontal del ancho de
   un dedo no es utilizable por bien diseñada que esté, así que bajo 760 px
   las filas se convierten en tarjetas.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px){
  :root{
    /* al sol hace falta más contraste que en una oficina */
    --t-ink-2:#41454a;
    /* En el celular sigue siendo más oscuro que en escritorio: al sol un
       gris de oficina desaparece. 5,77:1 sobre el lienzo. */
    --t-ink-3:#5c636b;
    /* el dato tiene que leerse de un vistazo, no entrecerrando los ojos */
    --f-dato:13.5px;
    --f-base:14.5px;
    --f-micro:12px;
  }
  /* el pulgar necesita 44 px; el ratón se conforma con 30 */
  .dc-btn, .mob-btn, .mv-btn,
  input[type="text"], input[type="search"], input[type="number"],
  input[type="date"], input[type="email"], input[type="password"], select{
    min-height:44px;
  }
  .dc-btn{padding:11px 14px;}
  input, select, textarea{font-size:16px;}   /* menos de 16 y iOS hace zoom solo */
  /* las casillas de la revisión: dar dónde tocar */
  .revisionItemCheck, input[type="checkbox"]{width:22px; height:22px;}

  /* ── la tabla se convierte en tarjetas ──────────────────────────────
     Cada celda lleva su rótulo en data-rotulo y lo muestra a la izquierda,
     así se entiende qué es cada número sin la cabecera de la tabla. */
  table.t-tabla-tarjetas thead{ position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); }
  table.t-tabla-tarjetas, table.t-tabla-tarjetas tbody,
  table.t-tabla-tarjetas tr, table.t-tabla-tarjetas td{ display:block; width:auto; }
  table.t-tabla-tarjetas tr{
    background:var(--t-surface); border:1px solid var(--t-line);
    border-left-width:3px; border-radius:var(--r2);
    padding:var(--e3); margin-bottom:var(--e2);
  }
  table.t-tabla-tarjetas td{
    border:0 !important; padding:3px 0 !important;
    display:flex; justify-content:space-between; align-items:baseline; gap:var(--e3);
  }
  table.t-tabla-tarjetas td::before{
    content:attr(data-rotulo); flex:none;
    font-size:var(--f-micro); text-transform:uppercase; letter-spacing:.05em;
    color:var(--t-ink-3); font-weight:600;
  }
  table.t-tabla-tarjetas td:empty{ display:none; }
  /* el monto es lo que se busca primero: se agranda y se queda a la derecha */
  table.t-tabla-tarjetas td.t-celda-monto{ font-size:var(--f-med); font-weight:600; }
  /* los campos de observación ocupan el ancho, no una columna estrecha */
  table.t-tabla-tarjetas td.t-celda-ancha{ display:block; }
  table.t-tabla-tarjetas td.t-celda-ancha::before{ display:block; margin-bottom:3px; }
  table.t-tabla-tarjetas td.t-celda-ancha input,
  table.t-tabla-tarjetas td.t-celda-ancha select{ width:100%; }

  /* ── la barra de acciones va abajo, donde llega el pulgar ──────────── */
  .t-acciones-abajo{
    /* por encima de la barra de navegación de bodega, que mide unos 62 px */
    position:sticky; bottom:calc(62px + env(safe-area-inset-bottom)); z-index:40;
    background:var(--t-surface); border-top:1px solid var(--t-line);
    padding:var(--e2) var(--e3) calc(var(--e2) + env(safe-area-inset-bottom));
    display:flex; gap:var(--e2); margin:var(--e3) calc(var(--e3) * -1) 0;
  }
  .t-acciones-abajo .dc-btn{ flex:1; justify-content:center; }
  /* los grupos de botones dejan de amontonarse */
  .dc-servicio-grid{ grid-template-columns:1fr !important; }
}
/* Con el teclado abierto la barra pegada abajo estorba más de lo que ayuda. */
@media (max-width: 760px) and (max-height: 460px){
  .t-acciones-abajo{ position:static; }
}

/* ══════════════════════════════════════════════════════════════════════
   EL RIEL DE MÓDULOS                                          F1C-V7.40.0
   ----------------------------------------------------------------------
   Con tres módulos y varias sub-pantallas, las pestañas ya no alcanzan: no
   hay sitio para contadores y se comen el ancho de arriba, que es donde
   deben ir las acciones.

   El riel es claro, como todo lo demás. El elemento activo va en negro —el
   del logo— y el contador de lo que hay por resolver, en el rojo de la marca.
   Bajo 980 px se pliega y la navegación vuelve a ser horizontal, porque en
   una pantalla estrecha un riel se come el espacio útil.
   ══════════════════════════════════════════════════════════════════════ */
.t-shell{display:grid; grid-template-columns:214px 1fr; min-height:100vh;
  background:var(--t-lienzo);}
.t-riel{background:var(--t-surface); border-right:1px solid var(--t-line);
  padding:var(--e4) var(--e3); display:flex; flex-direction:column; gap:var(--e5);
  position:sticky; top:0; height:100vh; overflow-y:auto;}
.t-riel-marca{display:flex; align-items:center; gap:var(--e2);
  padding:0 var(--e2) var(--e3); border-bottom:1px solid var(--t-line-2);}
.t-riel-marca img{height:30px; width:auto; display:block;}
.t-riel-marca span{font-weight:600; font-size:var(--f-base); letter-spacing:-.01em; line-height:1.2;}
.t-riel-marca small{display:block; font-size:var(--f-micro); font-weight:500; color:var(--t-ink-3);
  letter-spacing:.04em; text-transform:uppercase;}
.t-riel-grupo{display:flex; flex-direction:column; gap:2px;}
.t-riel-tit{font-size:var(--f-micro); letter-spacing:.13em; text-transform:uppercase;
  color:var(--t-ink-3); font-weight:600; padding:0 var(--e2) var(--e2); margin:0;}
.t-riel-item{display:flex; align-items:center; gap:var(--e2); padding:8px var(--e2);
  border-radius:var(--r1); color:var(--t-ink-2); font-size:var(--f-base); border:0;
  background:none; width:100%; text-align:left; font-family:inherit; cursor:pointer;
  transition:background var(--v-rapido) var(--curva), color var(--v-rapido) var(--curva);}
.t-riel-item:hover{background:var(--t-line-2); color:var(--t-ink);}
.t-riel-item[aria-current="page"]{background:var(--t-ink); color:#fff; font-weight:500;}
.t-riel-item .t-ico{width:15px; height:15px; flex:none;}
/* El número de paso ocupa el sitio del icono: 01 → 02 → 03 es una secuencia
   de verdad (primero el banco, luego el sistema, y solo entonces se cruzan),
   así que el riel la enseña en vez de tres iconos que no dicen el orden. */
.t-riel-paso{width:15px; flex:none; font-size:var(--f-micro); font-weight:600; text-align:center;
  font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;
  color:var(--t-ink-3); letter-spacing:-.02em;}
.t-riel-item:hover .t-riel-paso{color:var(--t-ink-2);}
.t-riel-item[aria-current="page"] .t-riel-paso{color:#fff;}
.t-riel-badge{margin-left:auto; font-size:var(--f-micro); font-weight:600; padding:1px 6px;
  border-radius:var(--r3); background:var(--t-marca); color:#fff; font-family:'IBM Plex Mono',monospace;}
.t-riel-item[aria-current="page"] .t-riel-badge{background:#fff; color:var(--t-marca);}
/* ── MÓDULO TALENTO ──────────────────────────────────────────────────
   La pantalla del evaluado no comparte nada con el resto del sistema: la ve
   gente que no trabaja aquí, en su teléfono, una sola vez. Por eso va a una
   columna, con la lectura ancha y el texto grande. */
.talento-nota{background:var(--t-info-bg); color:var(--t-info); border:1px solid var(--t-info-line);
  border-radius:var(--r1); padding:12px 14px; font-size:12.5px; line-height:1.55;}
.talento-diag{font-size:13.5px; line-height:1.65; margin:0 0 10px; padding-left:13px;
  border-left:2px solid var(--t-line);}
.talento-diag:last-child{margin-bottom:0;}
.talento-diag--bueno{border-left-color:var(--t-ok);}
.talento-diag--ojo{border-left-color:var(--t-aviso);}
.talento-diag--grave{border-left-color:var(--t-marca); color:var(--t-ink);}
.talento-detalle{border:1px solid var(--t-line); border-radius:var(--r1);
  padding:12px 14px; background:var(--t-surface);}
.talento-detalle summary{cursor:pointer; font-size:13px; color:var(--t-ink-2);
  list-style:none; display:flex; align-items:center; gap:8px;}
.talento-detalle summary::-webkit-details-marker{display:none;}
.talento-detalle summary::before{content:'▸'; color:var(--t-ink-3); flex:none;
  transition:transform var(--v-rapido) var(--curva);}
.talento-detalle[open] summary::before{transform:rotate(90deg);}
.talento-detalle summary:hover{color:var(--t-ink);}
.eva-marco{max-width:760px; margin:0 auto;
  padding:24px 18px calc(120px + env(safe-area-inset-bottom, 0px));}
.eva-cab{display:flex; align-items:center; gap:12px; margin-bottom:22px;
  padding-bottom:16px; border-bottom:1px solid var(--t-line);}
.eva-cab img{height:34px; width:auto;}
.eva-cab b{font-size:14px; letter-spacing:.02em;}
.eva-cab span{font-size:11.5px; color:var(--t-ink-3);}
.eva-caso{background:var(--t-surface); border:1px solid var(--t-line); border-radius:var(--r1);
  padding:20px; margin-bottom:14px;}
.eva-caso header{display:flex; justify-content:space-between; align-items:center;
  gap:10px; margin-bottom:10px; flex-wrap:wrap;}
.eva-num{font-size:11px; font-weight:700; color:var(--t-marca); letter-spacing:.03em;}
.eva-cat{font-size:var(--f-micro); background:var(--t-line-2); color:var(--t-ink-2);
  padding:2px 9px; border-radius:var(--r3); font-weight:600;}
.eva-q{font-size:15px; font-weight:600; color:var(--t-ink); margin:0 0 14px; line-height:1.5;
  text-wrap:pretty;}
.eva-ops{display:flex; flex-direction:column; gap:9px;}
.eva-op{display:flex; align-items:flex-start; gap:11px; padding:13px 15px; cursor:pointer;
  border:1px solid var(--t-line); border-radius:8px; background:var(--t-surface-2);
  transition:background var(--v-rapido) var(--curva), border-color var(--v-rapido) var(--curva);}
.eva-op:hover{background:var(--t-line-2); border-color:var(--t-ink-3);}
.eva-op input{margin-top:3px; flex:none; accent-color:var(--t-marca);}
.eva-op span{font-size:13.5px; line-height:1.5; color:var(--t-ink-2);}
.eva-op--elegida{border-color:var(--t-marca); background:var(--t-surface);}
.eva-op--elegida span{color:var(--t-ink);}
/* V8.17.0 — era la única de las cinco barras fijas inferiores sin reservar
   el indicador del sistema: en un iPhone se perdía media barra. Y la contesta
   el postulante desde SU teléfono. */
.eva-barra{position:fixed; left:0; right:0; bottom:0; min-height:34px;
  padding-bottom:env(safe-area-inset-bottom, 0px); box-sizing:content-box; background:var(--t-surface);
  border-top:1px solid var(--t-line); display:flex; align-items:center; z-index:5;}
.eva-barra-fill{height:3px; background:var(--t-marca); position:absolute; top:-1px; left:0;
  transition:width var(--v-normal) var(--curva); border-radius:0 2px 2px 0;}
.eva-barra-txt{margin-left:auto; margin-right:16px; font-size:11.5px; color:var(--t-ink-3);
  font-family:'IBM Plex Mono',ui-monospace,monospace;}
@media (max-width:600px){
  .eva-marco{padding:16px 12px calc(110px + env(safe-area-inset-bottom, 0px));}
  .eva-caso{padding:16px 14px;}
  .eva-q{font-size:14.5px;}
}
/* ─── Tablero de pedidos (TV de la sala de ventas) ──────────────────────────
   Se lee de lejos: todo un escalón más grande que el resto del sistema. Ya
   no es solo de lectura — cada tarjeta es un botón que abre el detalle del
   pedido (ítems, foto, motivo de no entrega), porque Christopher pidió poder
   tocarla para tener más control desde la misma pantalla — así que ahora sí
   necesita algo que invite a tocarla (el cursor y el resalte al pasar por
   encima), aunque el tablero siga pensado, primero, para verse de lejos. */
/* V7.90.0 — con la columna nueva son SEIS, y a 1600 px de tope no cabían:
   «Entregado hoy» se caía a una segunda fila. En un TV colgado en bodega eso
   es el fallo completo, porque lo que se mira de lejos es la fila entera.
   El tope sube a 1920 (que es lo que mide el televisor) y la columna puede
   estrecharse hasta 200 px, así que las seis entran también en un portátil
   de 1440. */
.tablero-marco{max-width:1920px; margin:0 auto; padding:28px 32px 40px;}
.tablero-cab{display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; margin-bottom:22px; padding-bottom:14px; border-bottom:2px solid var(--t-line); flex-wrap:wrap;}
.tablero-cab-titulo{font-size:26px; font-weight:700; letter-spacing:.01em; color:var(--t-ink);}
.tablero-cab-hora{font-size:14px; color:var(--t-ink-3);}
.tablero-cols{display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start;}
.tablero-col{flex:1 1 200px; min-width:200px; max-width:360px;
  background:var(--t-surface); border:1px solid var(--t-line); border-radius:var(--r1); padding:14px;}
.tablero-col-tit{font-size:16px; font-weight:700; margin:0 0 10px; color:var(--t-ink);
  padding-bottom:8px; border-bottom:1px solid var(--t-line-2);}
/* Cada pedido es un <button>, no un <div>: por teclado se puede llegar a él
   con Tab y abrirlo con Enter/espacio sin nada aparte que programar — el
   reset de abajo es solo para que un <button> se vea igual que la tarjeta de
   lectura que era antes. */
.tablero-pedido{display:block; width:100%; padding:10px 0; border:0; border-bottom:1px solid var(--t-line-2);
  background:none; font:inherit; text-align:left; cursor:pointer; border-radius:6px;}
.tablero-pedido:last-child{border-bottom:none;}
.tablero-pedido:hover, .tablero-pedido:focus-visible{background:var(--t-lienzo, var(--gr-3));}
.tablero-pedido-cliente{font-size:14px; font-weight:600; margin:0 0 2px; color:var(--t-ink);}
.tablero-pedido-doc{font-size:12px; color:var(--t-ink-3); margin:0 0 6px;}
/* V7.117.0 — En flex y no en línea de texto: con dos relojes esta línea
   envuelve a menudo, y en flujo normal el segundo trozo caía con la sangría
   del texto anterior, como si colgara de él. Con wrap cae alineado. */
.tablero-pedido-fecha{font-size:11px; color:var(--t-ink-3); margin:0 0 6px;
  display:flex; flex-wrap:wrap; align-items:center; gap:2px 7px;}
.tablero-pedido-vend{font-size:11.5px; color:var(--t-ink-3); margin:0;}
.tablero-pedido-motivo{font-size:11.5px; color:var(--red-dark, #b3261e); margin:6px 0 0; display:flex; align-items:center; gap:5px;}
/* ── Quién tocó el pedido ─────────────────────────────────  V7.109.0
   Los tres nombres van en UNA línea y no en tres: el TV se lee de pie y de
   lejos, y una tarjeta que crece al doble deja la mitad de los pedidos
   fuera de pantalla — que es justo lo contrario de lo que se pide aquí.
   El rótulo va apagado y el nombre normal: se busca el NOMBRE, el rótulo
   solo dice de qué es. */
.tablero-pedido-traza{font-size:11.5px; color:var(--t-ink-3); margin:3px 0 0;
  display:flex; flex-wrap:wrap; gap:2px 10px; line-height:1.4;}
.tablero-traza-uno{white-space:nowrap;}
/* El nombre al mismo tamaño que el del vendedor —es igual de importante para
   quien mira el TV desde el otro lado de la sala—; lo que se achica es el
   rótulo, que solo dice de qué es. */
/* V8.17.0 — el opacity:.6 sobre --t-ink-3 daba 2,41:1 a 10,5px, y esto va en
   el TELEVISOR de la sala, que se lee de lejos: era el peor contraste de toda
   la aplicación. La jerarquía la marca el tamaño, no hace falta desteñirlo. */
.tablero-traza-rol{color:var(--t-ink-2); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.03em; margin-right:3px;}
/* En el detalle sí hay sitio: rótulos enteros, uno por fila. */
.tablero-traza-caja .tablero-traza-fila{display:flex; justify-content:space-between;
  gap:12px; font-size:12.5px; margin:3px 0;}
.tablero-traza-caja .tablero-traza-fila span{color:var(--t-ink-3);}
/* ── Recepción: tildar lo que se recibe ───────────────────  V7.110.0 */
.recep-items--tildable{padding:2px 0;}
.recep-item{display:flex; align-items:center; gap:8px; padding:7px 4px;
  border-bottom:0.5px solid var(--t-line-2); cursor:pointer; font-size:12.5px;
  min-height:40px;}   /* el dedo, no el ratón: 40px es lo mínimo que se acierta */
.recep-item:last-of-type{border-bottom:none;}
.recep-item input[type=checkbox]{width:20px; height:20px; flex:0 0 auto; accent-color:var(--t-ok, #0a7c4a);}
.recep-item-txt{flex:1 1 auto; min-width:0; overflow-wrap:anywhere;}
.recep-item.es-ok .recep-item-txt{color:var(--t-ink-2);}
.recep-item.es-falta{background:var(--t-aviso-bg);}
.recep-item.es-falta .recep-item-txt b{color:var(--t-aviso);}
.recepTildeCant{width:56px; flex:0 0 auto; text-align:center; font-variant-numeric:tabular-nums;
  padding:5px 4px; font-size:13px;}
.recep-de{flex:0 0 auto; font-size:11px; color:var(--t-ink-3); white-space:nowrap;}
.recep-items-pie{margin:7px 0 0; font-size:11.5px; color:var(--t-ink-3);}
.recep-items-pie--falta{color:var(--t-aviso);}

/* ── La jornada de GPS: el estado, sin mentir ─────────────  V7.110.0
   Verde y ámbar en vez de un icono a secas, porque esto se mira de reojo
   con el celular en la mano y hay que distinguirlo sin leerlo. */
.jornada-gps{display:flex; align-items:flex-start; gap:9px; padding:10px 12px;
  border-radius:8px; margin:0 0 12px; font-size:12.5px; line-height:1.4;
  border:1px solid transparent;}
.jornada-gps--on{background:var(--t-ok-bg, rgba(10,124,74,.08)); color:var(--t-ok, #0a7c4a);
  border-color:var(--t-ok-line, rgba(10,124,74,.25));}
.jornada-gps--pausa{background:var(--t-aviso-bg); color:var(--t-aviso);
  border-color:var(--t-aviso-line);}
.jornada-punto{width:10px; height:10px; border-radius:50%; background:currentColor;
  flex:0 0 auto; margin-top:4px; animation:jornadaLatido 2s ease-in-out infinite;}
@keyframes jornadaLatido{0%,100%{opacity:1;} 50%{opacity:.35;}}
@media (prefers-reduced-motion: reduce){ .jornada-punto{animation:none;} }
.tablero-pastilla{font-size:12.5px; padding:4px 10px;}
.tablero-pedido--alerta{background:var(--t-mal-bg, rgba(220,53,69,.08)); margin:0 -10px; padding:10px; border-radius:6px; border-bottom:none; width:calc(100% + 20px);}
/* La columna de alerta ("No se pudo entregar") y la de "Entregado hoy" se
   distinguen del resto por el borde de arriba, sin depender solo del texto
   del título — mismo criterio que ya exige el sistema para las tarjetas. */
.tablero-col--alerta{border-top:3px solid var(--red-dark, #b3261e);}
.tablero-col--hoy{border-top:3px solid var(--t-ok, #1f8a4c); opacity:.85;}
.tablero-col-vacia{font-size:12px; color:var(--t-ink-3); margin:0; padding:6px 0;}
.tablero-leyenda{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; padding-top:16px; border-top:1px solid var(--t-line);}
/* El detalle que se abre al tocar un pedido (ver `tableroDetalleHtml`). */
.tablero-detalle-bloque{margin-top:var(--e3);}
.tablero-detalle-foto{width:100%; max-width:420px; border-radius:var(--r1); display:block; border:1px solid var(--t-line);}
.tablero-detalle-titulo{margin:0 0 4px; font-weight:600;}
.tablero-detalle-texto{margin:0 0 8px;}
.tablero-detalle-texto--seco{margin:0;}
.tablero-detalle-mt2{margin:6px 0 0;}
.tablero-detalle-item{margin:0 0 4px; font-size:12.5px;}
@media (max-width:900px){
  .tablero-marco{padding:18px 14px 30px;}
  .tablero-cab-titulo{font-size:20px;}
  .tablero-col{flex:1 1 100%; max-width:none;}
}
/* Pantallas de estado del tablero público (cargando / error / sin pedidos):
   una sola tarjeta centrada, dos tamaños según cuánto texto lleve dentro. */
.tp-pantalla{max-width:560px; margin:60px auto; text-align:center; padding:34px 26px;}
.tp-pantalla--chica{max-width:420px; margin:60px auto; text-align:center; padding:34px;}
.tp-vacio-tablero{max-width:520px; margin:60px auto; text-align:center; padding:30px;}
.tp-mensaje{line-height:1.6; text-align:left; margin-top:10px;}
/* El panel de administración del enlace, dentro de Bodega › Entregas. */
.tp-sin-permiso{font-size:12.5px; color:var(--t-ink-3); padding:14px 0;}
.tp-panel{padding:18px; max-width:620px;}
.tp-titulo{margin-bottom:4px;}
.tp-intro{line-height:1.5; margin:0 0 14px;}
.tp-enlace-fila{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px;}
.tp-enlace-input{flex:1; min-width:220px; font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12.5px; padding:7px 10px; border:1px solid var(--t-line); border-radius:var(--r1);
  background:var(--t-surface-2); color:var(--t-ink);}
.tp-meta{font-size:11.5px; color:var(--t-ink-3); margin:0 0 14px;}
.tp-vacio{font-size:12.5px; color:var(--t-ink-3); margin:0 0 14px;}
.t-riel-pie{margin-top:auto; font-size:var(--f-micro); color:var(--t-ink-3);
  padding:var(--e3) var(--e2) 0; border-top:1px solid var(--t-line-2); line-height:1.5;}
.t-lienzo{display:flex; flex-direction:column; min-width:0;}
.t-barra{display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap;
  padding:var(--e3) var(--e4); background:var(--t-surface);
  border-bottom:1px solid var(--t-line); position:sticky; top:0; z-index:30;}
.t-miga{display:flex; align-items:center; gap:6px; font-size:var(--f-dato); color:var(--t-ink-3);}
.t-miga b{color:var(--t-ink); font-weight:600; font-size:var(--f-base);}
.t-miga .t-ico{width:12px; height:12px; opacity:.45;}
.t-barra-der{margin-left:auto; display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap;}
.t-cuerpo{padding:var(--e4); display:flex; flex-direction:column; gap:var(--e4);}

/* ── el riel de CRM y Bodega ──────────────────────────────────────────
   Va fijo a la izquierda en lugar de dentro de una rejilla: así no hubo que
   reestructurar la página entera, y quitarlo es quitar una clase del body. */
.t-riel-fijo{position:fixed; left:0; top:0; bottom:0; width:214px; z-index:40;
  box-shadow:1px 0 0 var(--t-line);}
body.t-con-riel{padding-left:214px;}
/* Con el riel puesto, las pestañas ya lo dicen todo desde la izquierda.
   Siguen en el DOM —son ellas las que mandan— pero dejan de ocupar sitio. */
body.t-con-riel #dcTabs{display:none;}
body.t-con-riel .dc-wrap{border-radius:0; border-left:0;}
/* Dentro de entregas, las sub-pestañas también suben al riel. */
body.t-con-riel .dc-subtabs{display:none;}
.t-riel-firma{display:block; margin-top:4px; color:var(--t-ink-3); font-style:italic;}
/* Administración y Sesión bajan al pie del riel, encima de la firma: son
   cosas que se hacen de vez en cuando, no cada día. Lo de todos los días
   —las pantallas— se queda arriba, donde cae la vista primero. */
.t-riel-grupo--abajo{margin-top:auto;}
/* Con el riel puesto, la cabecera se queda solo con «actualizar». Lo demás
   vive ahora a la izquierda. Los botones NO se borran del documento: siguen
   siendo los que mandan —el riel se limita a pulsarlos— y vuelven a verse
   por sí solos cuando la pantalla es demasiado estrecha para el riel. */
body.t-con-riel #dcCorreosBtn,
body.t-con-riel #dcPermisosBtn,
body.t-con-riel #dcLogoutBtn,
body.t-con-riel #btnCambiarModulo{display:none !important;}
/* La cabecera repetía logo y nombre justo al lado del riel, que ya los lleva.
   Con el riel puesto se calla y deja sitio a la migaja. */
.t-miga-crm{display:none;}
body.t-con-riel .dc-head-row > div:first-child{display:none !important;}
body.t-con-riel .t-miga-crm{display:flex;}
body.t-con-riel .dc-head{padding:var(--e3) var(--e4);}
.t-riel-fijo .t-riel-pie{padding-bottom:var(--e3);}

@media (max-width: 980px){
  .t-shell{grid-template-columns:1fr;}
  .t-riel{position:static; height:auto; flex-direction:row; align-items:center;
    gap:var(--e3); overflow-x:auto; border-right:0; border-bottom:1px solid var(--t-line);
    padding:var(--e2) var(--e3);}
  .t-riel-marca{border-bottom:0; padding:0 var(--e2) 0 0; flex:none;}
  .t-riel-marca span{display:none;}
  .t-riel-grupo{flex-direction:row; gap:var(--e1);}
  .t-riel-tit, .t-riel-pie{display:none;}
  .t-riel-item{width:auto; white-space:nowrap; min-height:40px;}
  .t-barra{position:static;}

  /* «Cambiar de módulo» y «Cerrar sesión», siempre a la vista.   V7.100.0
     En columna, `.t-riel-grupo--abajo` los empuja al pie con `margin-top:auto`
     y ahí están. Pero bajo 980 px el riel se vuelve una tira horizontal, y
     `margin-top` no empuja nada en una fila: los dos botones quedaban al
     final de un carrusel que hay que arrastrar para llegar. En Flota, un
     despachador con dos módulos no encontraba cómo salir del que estaba.

     Se anclan al borde derecho, y ahí van SOLO LOS ICONOS. Con sus rótulos
     ocupaban 302 px de una tira de 412: dejaban 110 px para navegar cinco
     pantallas, que es cambiar un problema por otro peor. Sin rótulo son unos
     100 px y quedan más de 300 para lo demás.

     El texto se oculta con `font-size:0`, no con `display:none`: así sigue
     siendo el nombre accesible del botón para un lector de pantalla, y el
     `title` lo enseña al mantener pulsado. El icono de las dos flechas es el
     mismo que en el escritorio lleva el rótulo al lado, y el mismo del botón
     «Módulos» de la barra de abajo del celular. */
  .t-riel-grupo--abajo{position:sticky; margin-left:auto;
    background:var(--t-surface); padding-left:var(--e2);
    /* `right:0` ancla al borde INTERIOR del riel, así que el relleno derecho
       quedaba como una rendija por la que asomaba el botón de atrás. Se ancla
       12 px más allá y se rellena lo mismo por dentro: el bloque tapa hasta
       el borde de la pantalla. (Un margen negativo no sirve: mueve la caja en
       el flujo, no el punto donde se queda pegada.) */
    right:calc(-1 * var(--e3)); padding-right:var(--e3);
    box-shadow:-12px 0 12px -8px rgba(29,30,28,.18);}
  .t-riel-grupo--abajo .t-riel-item{font-size:0; gap:0; padding:8px 12px;
    justify-content:center;}
  .t-riel-grupo--abajo .t-riel-item .t-ico{width:20px; height:20px;}
}

/* ══════════════════════════════════════════════════════════════════════
   IMPRESIÓN                                                   F1C-V7.39.0
   ----------------------------------------------------------------------
   Una conciliación firmada y un acta de entrega terminan en papel o en PDF.
   Sin esto salían con los botones, el buscador y el menú encima, y la
   cabecera de la tabla no se repetía en la segunda hoja.
   ══════════════════════════════════════════════════════════════════════ */
@media print{
  @page{ margin:14mm 12mm; }
  html, body{ background:#fff !important; }
  body{ font-size:10pt; }

  /* fuera todo lo que solo sirve para operar en pantalla */
  .dc-head, .dc-tabs, .dc-filters, .mob-nav, .mv-nav, .mob-head, .mv-header,
  .dc-toast, .dc-modal-overlay, .t-acciones-abajo, .buscar,
  #concBuscar, #revisionBuscarGlobal, .dc-btn, .mob-btn, .mv-btn,
  input[type="file"], input[type="search"], .concPagina, .pie-tabla,
  .t-hueso, .dc-profile, #selectorModuloBox{ display:none !important; }

  /* nada de cajas flotando: en papel el marco solo gasta tinta */
  .dc-wrap, .t-panel, .t-tarjeta, .dc-kpi{
    box-shadow:none !important; border:1px solid #ccc !important; border-radius:0 !important;
  }
  .dc-body{ padding:0 !important; }

  /* la cabecera de la tabla se repite en cada hoja */
  thead{ display:table-header-group; }
  tfoot{ display:table-footer-group; }
  tr, .t-tarjeta, .aparcado{ break-inside:avoid; page-break-inside:avoid; }
  table{ width:100% !important; font-size:9pt; }
  th{ background:#f2f2f2 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  /* los fondos de color se cambian por borde: la tinta de color cuesta */
  .t-pastilla{ background:none !important; border:1px solid #999 !important; color:#000 !important; }
  .t-pastilla::before{ display:none; }
  .aviso, .t-error{ background:none !important; border:1px solid #999 !important; }

  /* que se vea a dónde lleva cada enlace */
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8pt; color:#555; }

  /* el pie es lo que convierte una impresión en un documento archivable */
  .t-pie-impresion{ display:block !important; margin-top:10mm; padding-top:4mm;
    border-top:1px solid #999; font-size:8pt; color:#333; }
  .t-firmas{ display:flex !important; gap:16mm; margin-top:14mm; }
  .t-firmas div{ flex:1; border-top:1px solid #333; padding-top:2mm; font-size:8pt; text-align:center; }
}
/* En pantalla, el pie y las firmas de la impresión no existen. */
.t-pie-impresion, .t-firmas{ display:none; }

/* ===== APP MÓVIL ===== */
.mob-app{display:none;}
@media (max-width: 760px){
  .dc-wrap{display:none !important;}
  .mob-app{display:block; padding-bottom:calc(76px + env(safe-area-inset-bottom));}
}
.mob-head{position:sticky; top:0; z-index:50; background:var(--t-surface); color:var(--t-ink);
  border-bottom:1px solid var(--t-line);
  padding:14px 16px calc(12px + env(safe-area-inset-top)) 16px;
  padding-top:calc(14px + env(safe-area-inset-top));}
.mob-head h1{font-size:15px; margin:0; font-weight:600;}
.mob-head p{font-size:var(--f-dato); margin:2px 0 0; color:var(--t-ink-3);}
.mob-content{padding:14px 14px 20px;}
.mob-seccion{margin-bottom:20px;}
.mob-seccion h3{font-size:13px; margin:0 0 8px; color:var(--ink-1);}
.mob-card{background:#fff; border:0.5px solid var(--gr-line); border-radius:12px; padding:14px; margin-bottom:10px;}
.mob-card-cliente{font-size:15px; font-weight:600; margin:0 0 4px;}
.mob-card-desc{font-size:13px; color:var(--ink-2); margin:0 0 10px;}
.mob-card-meta{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
.mob-btn{display:block; width:100%; border:none; border-radius:10px; padding:13px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;}
.mob-btn.primary{background:var(--ink); color:#fff;}
.mob-btn.ghost{background:var(--gr-2); color:var(--ink-1); border:0.5px solid var(--gr-line);}
.mob-nav{position:fixed; bottom:0; left:0; right:0; display:flex; background:#fff; border-top:0.5px solid var(--gr-line); z-index:60; padding-bottom:env(safe-area-inset-bottom);}
.mob-nav button{flex:1; border:none; background:none; padding:11px 4px 13px; font-size:11px; color:var(--ink-3); cursor:pointer; font-family:inherit;}
.mob-nav button .mob-nav-ico{display:flex; align-items:center; justify-content:center;
  height:22px; margin-bottom:3px;}
.mob-nav button .mob-nav-ico .t-ico{width:20px; height:20px;}
.mob-nav button.active{color:var(--ink); font-weight:600;}
.mob-vacio{font-size:13px; color:var(--ink-3); padding:6px 0;}
.mob-buscar{width:100%; border:0.5px solid var(--gr-line); border-radius:10px; padding:11px 12px; font-size:15px; font-family:inherit; margin-bottom:12px;}
/* Pantalla de registro rápido */
.mob-reg{position:fixed; inset:0; background:var(--gr-2); z-index:200; overflow-y:auto; display:none;}
.mob-reg.show{display:block;}
.mob-reg-head{position:sticky; top:0; background:var(--t-surface); color:var(--t-ink);
  border-bottom:1px solid var(--t-line);
  padding:calc(14px + env(safe-area-inset-top)) 16px 12px; display:flex; align-items:center; gap:12px;}
.mob-reg-head button{background:none; border:none; color:var(--t-ink); font-size:22px;
  cursor:pointer; line-height:1; padding:0;}
.mob-reg-head div{flex:1; min-width:0;}
.mob-reg-head h2{font-size:15px; margin:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mob-reg-body{padding:16px 14px 100px;}
.mob-label{font-size:13px; font-weight:600; color:var(--ink-1); margin:0 0 8px;}
.mob-chips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px;}
.mob-chip{border:0.5px solid var(--gr-line); background:#fff; border-radius:20px; padding:8px 13px; font-size:12.5px; cursor:pointer; font-family:inherit; color:var(--ink-1);}
.mob-chip.sel{background:var(--ink); color:#fff; border-color:var(--ink);}
.mob-textarea{width:100%; border:0.5px solid var(--gr-line); border-radius:10px; padding:12px; font-size:15px; font-family:inherit; min-height:100px; resize:vertical; margin-bottom:18px;}
.mob-input{width:100%; border:0.5px solid var(--gr-line); border-radius:10px; padding:11px 12px; font-size:15px; font-family:inherit;}
.mob-reg-guardar{position:fixed; bottom:0; left:0; right:0; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); background:#fff; border-top:0.5px solid var(--gr-line);}
.mob-hist{background:#fff; border:0.5px solid var(--gr-line); border-radius:10px; padding:10px 12px; margin-bottom:8px;}
.mob-hist-head{font-size:11.5px; color:var(--ink-2); margin-bottom:3px;}
.mob-hist-txt{font-size:13px; color:var(--ink-1);}

/* ── MÓDULO FLOTA ──────────────────────────────────────────────────────
   El tablero imita el tablero físico de llaves de recepción: una ranura
   por placa, y la llave está o no está. Si la pantalla y la pared no se
   parecen, la gente confía en la pared.                        V7.49.0 */
.flota-tablero{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:var(--e3);}
.flota-ranura{background:var(--t-surface); border:1px solid var(--t-line);
  border-top:3px solid var(--t-ink-3); border-radius:var(--r2); padding:var(--e3) var(--e4);
  display:flex; flex-direction:column; gap:6px; box-shadow:var(--s1);}
.flota-ranura--disponible{border-top-color:var(--t-ok);}
.flota-ranura--en-uso{border-top-color:var(--t-info);}
.flota-ranura--taller{border-top-color:var(--t-aviso);}
.flota-ranura--fuera-de-servicio{border-top-color:var(--t-mal); opacity:.72;}
.flota-ranura-cab{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.flota-placa{font-size:var(--f-alto); font-weight:700; letter-spacing:.05em;}
.flota-modelo{margin:0; font-size:var(--f-micro); color:var(--t-ink-3);
  text-transform:uppercase; letter-spacing:.05em;}
.flota-encargado{margin:0; font-size:var(--f-dato); color:var(--t-ink-2);}
.flota-uso{font-size:var(--f-dato); color:var(--t-ink-2); background:var(--t-info-bg);
  border:1px solid var(--t-info-line); border-radius:var(--r1); padding:8px 10px;}
.flota-hueco{font-size:var(--f-dato); color:var(--t-ink-2); background:var(--t-mal-bg);
  border:1px solid var(--t-mal-line); border-radius:var(--r1); padding:8px 10px;}
.flota-hueco .t-ico{width:14px; height:14px; color:var(--t-mal); vertical-align:-2px;}
.flota-hueco .t-ayuda{display:block; margin-top:3px;}
.flota-ranura-pie{margin-top:auto; padding-top:6px;}
.flota-ranura-pie .dc-btn{width:100%; justify-content:center;}

/* El formulario de salida y retorno. Una sola pantalla, a propósito. */
.flota-nota{border:1px solid var(--t-line); border-left-width:3px; border-radius:var(--r1);
  padding:10px 13px; font-size:var(--f-dato); line-height:1.5; color:var(--t-ink-2);
  background:var(--t-surface-2);}
.flota-nota b{color:var(--t-ink);}
.flota-nota .t-ico{width:15px; height:15px; vertical-align:-3px; margin-right:3px;}
.flota-nota--info{background:var(--t-info-bg); border-color:var(--t-info-line); border-left-color:var(--t-info);}
.flota-nota--mal{background:var(--t-mal-bg); border-color:var(--t-mal-line); border-left-color:var(--t-mal);}
.flota-nota--mal .t-ico{color:var(--t-mal);}

/* V8.32.0 — El odómetro: la lectura anterior a la vista y el eco con
   separador de miles, que es lo que hace saltar el dígito de más. */
.flota-odo-ayuda{margin:4px 0 0; font-size:var(--f-micro); color:var(--t-ink-3); line-height:1.4;}
.flota-odo-ayuda b{color:var(--t-ink);}
.flota-odo-eco{margin:2px 0 0; min-height:1.1em; font-family:'IBM Plex Mono',monospace;
  font-size:var(--f-dato); color:var(--t-ink-2); font-variant-numeric:tabular-nums;}
/* La corrección, con la foto del tablero al lado: sin la foto delante esto
   sería teclear un número por encima de otro, que es lo que había que evitar. */
.flota-odo-modal{max-width:880px; width:min(94vw,880px); max-height:92vh; overflow-y:auto;}
.flota-odo-cuerpo{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--e4);}
.flota-odo-foto{margin:0;}
.flota-odo-foto img{width:100%; border-radius:var(--r2); border:1px solid var(--t-line); display:block;}
.flota-odo-foto figcaption{font-size:var(--f-micro); color:var(--t-ink-3); margin-top:4px; text-align:center;}
.flota-odo-sinfoto{aspect-ratio:4/3; border:1px dashed var(--t-line); border-radius:var(--r2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:var(--t-ink-3); background:var(--t-surface-2); text-align:center; padding:var(--e3);}
.flota-odo-anotado{margin:0 0 var(--e3); font-size:var(--f-base);}

/* V8.33.0 — Las dos lecturas en la fila de la bitácora. Es el único sitio
   donde se encuentra «la camioneta 70 del martes», así que es donde tiene
   que estar el acceso a corregirla. */
.flota-odo-chips{display:flex; gap:4px; justify-content:flex-end; flex-wrap:wrap; margin-top:3px;}
.flota-odo-chip{font-family:'IBM Plex Mono',monospace; font-size:var(--f-micro);
  border:1px solid var(--t-line); background:var(--t-surface); color:var(--t-ink-3);
  border-radius:var(--r3); padding:2px 7px; line-height:1.5; cursor:pointer;
  font-variant-numeric:tabular-nums;}
button.flota-odo-chip:hover{border-color:var(--t-ink-3); color:var(--t-ink);}
.flota-odo-chip.es-corregido{border-color:var(--t-ok-line); background:var(--t-ok-bg); color:var(--t-ok);}
.flota-odo-chip.es-duda{border-color:var(--t-mal-line); background:var(--t-mal-bg); color:var(--t-mal);}
@media (pointer: coarse){ .flota-odo-chip{min-height:30px; padding:5px 9px;} }

.flota-odo-campos .t-campo{margin-bottom:var(--e3);}
@media (max-width:760px){
  .flota-odo-cuerpo{grid-template-columns:1fr;}
}

/* V8.28.0 — el aviso de «dejaste algo a medio llenar» en el tablero. */
.flota-nota--aviso{background:var(--t-aviso-bg); border-color:var(--t-aviso-line); border-left-color:var(--t-aviso);}
.flota-nota--aviso .t-ico{color:var(--t-aviso);}
.flota-reanudar-pie{display:flex; gap:var(--e2); flex-wrap:wrap; margin-top:7px;}
.flota-modal{max-width:940px; width:min(94vw,940px); max-height:92vh; overflow-y:auto;}
.flota-fotos{display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr));
  gap:var(--e3); margin-bottom:var(--e4);}
.flota-casilla{border:1px solid var(--t-line); border-radius:var(--r2);
  padding:10px 11px; display:flex; flex-direction:column; gap:7px; background:var(--t-surface-2);}
.flota-casilla--lista{border-color:var(--t-ok-line); background:var(--t-ok-bg);}
.flota-casilla-cab{display:flex; align-items:center; gap:7px; font-size:var(--f-dato);}
.flota-casilla-n{width:19px; height:19px; border-radius:50%; background:var(--t-ink);
  color:var(--t-surface); display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; flex:none;}
.flota-casilla--lista .flota-casilla-n{background:var(--t-ok);}
.flota-casilla-vistas{display:flex; gap:6px;}
.flota-vista{margin:0; flex:1; min-width:0;}
/* `contain`, no `cover`: la miniatura tiene que mostrar LO QUE SE CAPTURÓ.
   Recortarla hacía creer que la foto salió mal encuadrada cuando no era así. */
.flota-vista img{width:100%; aspect-ratio:4/3; object-fit:contain; border-radius:var(--r1);
  border:1px solid var(--t-line); display:block; background:var(--t-line-2);}
.flota-vista-vacia{width:100%; aspect-ratio:4/3; border-radius:var(--r1);
  border:1px dashed var(--t-line); display:flex; align-items:center; justify-content:center;
  color:var(--t-ink-3); background:var(--t-line-2);}
.flota-vista-vacia .t-ico{width:22px; height:22px;}
.flota-vista figcaption{font-size:var(--f-micro); text-transform:uppercase; letter-spacing:.06em;
  color:var(--t-ink-3); margin-top:3px; text-align:center;}
.flota-pista{margin:0; line-height:1.4;}
/* V8.28.0 — el estado de ESTA foto, dentro de su casilla: «Subiendo… 40 %»,
   «Falló. Reintentando (2 de 3)…» o el motivo del fallo. Antes había una sola
   línea compartida al final del formulario, que en el celular queda fuera de
   la pantalla justo cuando hace falta leerla. */
.flota-casilla-estado{margin:0; min-height:1em; font-size:var(--f-micro); line-height:1.4;
  color:var(--t-ink-3); font-family:'IBM Plex Mono',monospace;}
.flota-casilla-estado--mal{color:var(--t-mal); font-weight:600; font-family:inherit;}
.flota-casilla--fallo{border-color:var(--t-mal-line); background:var(--t-mal-bg);}
.flota-casilla--fallo .flota-casilla-n{background:var(--t-mal);}
.flota-casilla-pie{display:flex; gap:6px;}
.flota-casilla-pie .dc-btn{flex:1; justify-content:center; font-size:var(--f-micro); padding:6px 8px;}
.flota-archivo{cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:5px;}
.flota-campos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--e3);}
/* V8.14.0 — la barra de filtros de la bitácora. El buscador se lleva el
   espacio que sobra; el mes y el botón se quedan en su ancho. En teléfono
   los tres se apilan solos. */
.flota-filtros{display:flex; gap:var(--e3); align-items:flex-end; flex-wrap:wrap;}
.flota-filtros .t-campo{margin:0;}
.flota-filtros .t-campo:first-child{flex:1 1 260px; min-width:0;}
.flota-filtros .t-campo:nth-child(2){flex:0 1 230px; min-width:0;}
.flota-filtros input, .flota-filtros select{width:100%; box-sizing:border-box;
  border:1px solid var(--t-line); border-radius:var(--r1); padding:9px 11px;
  font-family:inherit; font-size:var(--f-dato);
  background:var(--t-surface); color:var(--t-ink);}
@media (max-width:560px){
  .flota-filtros{flex-direction:column; align-items:stretch;}
  .flota-filtros .t-campo{flex:1 1 auto;}
}
.flota-novedad{display:flex; gap:10px; align-items:flex-start; padding:11px 12px;
  border:1px solid var(--t-line); border-radius:var(--r1); background:var(--t-surface-2);
  margin-bottom:var(--e3); cursor:pointer;}
.flota-novedad input{margin-top:3px; flex:none;}
.flota-novedad > span{display:flex; flex-direction:column; gap:2px; font-size:var(--f-dato);}
#flotaNovedadTxt{width:100%; border:1px solid var(--t-line); border-radius:var(--r1);
  padding:9px 11px; font-family:inherit; font-size:var(--f-dato); margin-bottom:var(--e3);
  background:var(--t-surface); color:var(--t-ink);}
/* La barra de «hay versión nueva». Va abajo, ancla a la derecha y NO tapa
   nada de lo que la persona esté usando.                          V7.52.0 */
.t-barra-version{position:fixed; z-index:10000; right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom)); max-width:min(92vw,460px);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--t-ink); color:#fff; border-radius:var(--r2);
  padding:12px 14px; box-shadow:0 8px 30px rgba(0,0,0,.28);
  font-size:var(--f-dato); line-height:1.4;}
.t-barra-version-txt{flex:1; min-width:180px;}
.t-barra-version-sub{display:block; color:rgba(255,255,255,.62); font-size:var(--f-micro);}
.t-barra-version-sub b{color:#fff; font-variant-numeric:tabular-nums;}
.t-barra-version .dc-btn{background:rgba(255,255,255,.12); color:#fff;
  border-color:rgba(255,255,255,.22); padding:6px 12px; font-size:var(--f-micro);}
.t-barra-version .dc-btn.primary{background:#fff; color:var(--t-ink); border-color:#fff;}
@media (max-width:520px){
  .t-barra-version{left:12px; right:12px; max-width:none;}
}

/* Supervisión: las seis cifras de arriba. Grandes a propósito — se leen de
   pie, con el celular en la mano, antes de sentarse.               V7.50.0 */
.flota-alarmas{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:var(--e3); margin-bottom:var(--e4);}
.flota-alarma{border:1px solid var(--t-line); border-left:3px solid var(--t-ink-3);
  border-radius:var(--r2); padding:13px 15px; background:var(--t-surface); box-shadow:var(--s1);}
.flota-alarma-cifra{margin:0; font-family:'Archivo',system-ui,sans-serif; font-size:31px;
  font-weight:700; line-height:1; letter-spacing:-.02em;}
.flota-alarma-rot{margin:7px 0 0; font-size:var(--f-dato); color:var(--t-ink-2); line-height:1.35;}
.flota-alarma-nota{margin:4px 0 0; font-size:var(--f-micro); color:var(--t-ink-3);}
.flota-alarma--ok{border-left-color:var(--t-ok);}
.flota-alarma--ok .flota-alarma-cifra{color:var(--t-ink-3);}
.flota-alarma--mal{border-left-color:var(--t-mal); background:var(--t-mal-bg); border-color:var(--t-mal-line);}
.flota-alarma--mal .flota-alarma-cifra{color:var(--t-mal);}
.flota-alarma--aviso{border-left-color:var(--t-aviso); background:var(--t-aviso-bg); border-color:var(--t-aviso-line);}
.flota-alarma--aviso .flota-alarma-cifra{color:var(--t-aviso);}
.flota-h3{font-size:var(--f-base); font-weight:600; letter-spacing:-.01em; margin:var(--e5) 0 var(--e2);}
.flota-barra{height:6px; border-radius:3px; background:var(--t-line-2); overflow:hidden;
  min-width:74px; max-width:130px;}
.flota-barra i{display:block; height:100%; background:var(--t-ink);}
.flota-barra i.flota-barra--mal{background:var(--t-mal);}
.flota-barra i.flota-barra--aviso{background:var(--t-aviso);}
.flota-modal--corto{max-width:620px; width:min(94vw,620px);}
/* La zona de «elige el archivo» de los pasos 01 y 02 del financiero. */
.fin-zona{border:1px dashed var(--t-line); border-radius:var(--r2); padding:34px 20px;
  text-align:center; background:var(--t-surface);}
.fin-zona-ico{display:inline-flex; width:34px; height:34px; color:var(--t-ink-3); margin-bottom:10px;}
.fin-zona-ico svg{width:100%; height:100%;}
.fin-zona-tit{font-size:14px; font-weight:600; margin:0 0 6px;}
.fin-zona-ayuda{font-size:12px; color:var(--t-ink-3); margin:0 0 14px; max-width:460px;
  margin-left:auto; margin-right:auto; line-height:1.5;}
.t-fila-activa{background:var(--t-line-2);}
.flotaIntervalo{width:88px;}
.flotaDoc{width:150px;}
.flota-modal .flota-campos input, .flota-modal .flota-campos select{width:100%;
  border:1px solid var(--t-line); border-radius:var(--r1); padding:9px 11px;
  font-family:inherit; font-size:var(--f-dato); background:var(--t-surface); color:var(--t-ink);
  letter-spacing:normal; text-align:left; margin:0;}

/* Chofer, ocupantes y fotos de novedad.                          V7.53.0 */
.flota-agregar{display:flex; gap:6px; align-items:center;}
.flota-agregar input[type="text"]{flex:1; min-width:0;}
.flota-agregar .dc-btn{flex:none; white-space:nowrap;}
.flota-fichas{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px;}
.flota-ficha{display:inline-flex; align-items:center; gap:6px; font-size:var(--f-dato);
  background:var(--t-surface-2); border:1px solid var(--t-line); border-radius:var(--r3);
  padding:4px 6px 4px 11px;}
.flota-ficha button{border:0; background:none; cursor:pointer; color:var(--t-ink-3);
  font-size:15px; line-height:1; padding:0 3px;}
.flota-ficha button:hover{color:var(--t-mal);}
.flota-ficha img{width:34px; height:26px; object-fit:cover; border-radius:2px;
  border:1px solid var(--t-line); margin-left:-5px;}
.flota-extra{border:1px solid var(--t-line); border-radius:var(--r1);
  padding:11px 12px; margin-bottom:var(--e3); background:var(--t-surface-2);}
.flota-extra-cab{display:flex; flex-direction:column; gap:2px; margin-bottom:8px;
  font-size:var(--f-dato);}
.flota-extra .flota-agregar{margin-top:8px;}
.flota-extra .flota-agregar .dc-btn{flex:1; justify-content:center;}

/* `.dc-modal input` se escribió para el cuadro del PIN: ancho completo,
   centrado y con las letras separadas. Aquí dentro eso deforma la casilla de
   «reporto una novedad» y descentra el odómetro, así que se deshace. */
.flota-modal .flota-novedad input[type="checkbox"]{width:auto; margin:3px 0 0;
  letter-spacing:normal; text-align:left;}
.flota-modal .t-campo input{letter-spacing:normal; text-align:left; margin-bottom:0;}
/* `.dc-modal-error` nace en display:none. Quitarle `t-oculta` no bastaba: el
   mensaje de error del formulario NUNCA se veía. */
.flota-modal .dc-modal-error{display:block; font-size:var(--f-dato); line-height:1.45;
  margin:0 0 var(--e2);}
.flota-modal .dc-modal-error.t-oculta{display:none;}
.flota-casilla-pie{margin-top:auto;}

@media (max-width:640px){
  .flota-fotos{grid-template-columns:1fr 1fr;}
  .flota-casilla-pie{flex-direction:column;}
}


/* ══════════════════════════════════════════════════════════════════════
   OBJETIVOS DE TOQUE Y DE PUNTERO                          V7.89.0
   ----------------------------------------------------------------------
   Hasta aquí, todo lo táctil colgaba de `max-width: 760px`. El ancho no es
   lo que decide si alguien usa el dedo o el ratón: una tableta en
   horizontal mide 1024 px y recibía la interfaz de escritorio con botones
   de 31 px y casillas de 13 px. Medido en el propio sistema: en las siete
   pantallas del CRM había entre 8 y 16 controles por debajo de 44×44.

   La regla correcta pregunta por el puntero, no por el ancho:

     · `pointer: coarse`  → el dedo. 44×44, sin importar el ancho.
     · `pointer: fine`    → el ratón. 32 px de alto basta, y mantener la
       densidad es parte del trabajo: un tablero comercial con botones de
       44 px obliga a desplazarse por todo.

   Las casillas de filtro son el caso peor y se arreglan en los dos mundos:
   medían 13×13 px, por debajo incluso del mínimo de 24×24 que la norma
   pide para el ratón. Ahora la caja mide 18 px y la etiqueta entera —que
   es lo que se pulsa— nunca baja de 36 px.
   ══════════════════════════════════════════════════════════════════════ */

/* ── el dedo, a cualquier ancho ──────────────────────────────────────── */
@media (pointer: coarse){
  .dc-btn, .mob-btn, .mv-btn, .t-riel-item, .dc-tab,
  input[type="text"], input[type="search"], input[type="number"],
  input[type="date"], input[type="email"], input[type="password"],
  select, button{
    min-height:44px;
  }
  .dc-btn--chico{ min-height:36px; }        /* el botón de fila, aún alcanzable */
  input[type="checkbox"], input[type="radio"]{ width:22px; height:22px; }
  .dc-filters label.chk{ min-height:44px; }
  /* 8 px entre objetivos: sin esto, dos botones pegados son un solo error */
  .dc-cal-modos, .dc-filters, .t-acciones-abajo{ gap:var(--e2); }
}

/* ── el ratón: densidad sí, pero no miniaturas ───────────────────────── */
@media (min-width: 761px) and (pointer: fine){
  .dc-btn, input[type="text"], input[type="search"], input[type="number"],
  input[type="date"], input[type="email"], input[type="password"], select{
    min-height:32px;
  }
  .dc-btn--chico{ min-height:26px; }
  .t-riel-item{ min-height:36px; }
  /* La casilla de 13 px no la acierta nadie a la primera. */
  .dc-filters label.chk{ min-height:36px; }
  .dc-filters label.chk input[type="checkbox"]{ width:18px; height:18px; }
}

/* Las casillas de filtro llevan su propio tamaño en todos los casos: el
   navegador las dibuja a 13 px por defecto y eso no lo arregla el padding
   de la etiqueta. */
.dc-filters label.chk input[type="checkbox"]{
  width:18px; height:18px; flex:none; accent-color:var(--t-marca); cursor:pointer;
}
.dc-filters label.chk{ cursor:pointer; }

/* ══════════════════════════════════════════════════════════════════════
   EL BOTÓN QUE SOLO LLEVA ICONO                            V7.89.0
   ----------------------------------------------------------------------
   Un icono sin texto necesita dos cosas: un nombre para quien no ve el
   icono (eso va en el HTML, con aria-label) y un área cuadrada donde
   pulsar. Lo segundo se resuelve aquí, de una vez, para que el siguiente
   botón de icono nazca bien sin que nadie se acuerde.
   ══════════════════════════════════════════════════════════════════════ */
.dc-btn.t-btn-icono{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; padding-left:var(--e2); padding-right:var(--e2);
}
@media (pointer: coarse){ .dc-btn.t-btn-icono{ min-width:44px; } }

/* ══════════════════════════════════════════════════════════════════════
   LA ETIQUETA FLOTANTE DE VERSIÓN                          V7.89.0
   ----------------------------------------------------------------------
   Es útil —se mira después de cada publicación para comprobar que el
   despliegue llegó— pero estaba tapando contenido: en el celular se
   sentaba encima de la última tarjeta de la lista, y en escritorio encima
   del pie de la pantalla. Y en escritorio decía exactamente lo mismo que
   el pie del riel, tres centímetros más allá.

   La corrección: la etiqueta flotante se retira, y la versión se lee donde
   ya estaba o donde corresponde —el pie del riel en escritorio, la
   cabecera junto al nombre en el celular—. Se sigue comprobando de un
   vistazo después de publicar, que es para lo que está, sin taparle a
   nadie la última fila de su lista.
   ══════════════════════════════════════════════════════════════════════ */
#crmBuildF1A{ display:none; }



/* ══════════════════════════════════════════════════════════════════════
   EL MOTIVO DE UNA ELIMINACIÓN Y LA PANTALLA «ELIMINADOS»   V7.91.0
   ══════════════════════════════════════════════════════════════════════ */

/* El resumen de lo que se va a borrar, dentro del cuadro. Va con el fondo
   de aviso, no con el rojo de error: todavía no ha pasado nada malo — se
   está a tiempo de cancelar. */
.mme-resumen{background:var(--t-aviso-bg); border:1px solid var(--t-aviso-line);
  border-radius:var(--r1); padding:var(--e3); margin-bottom:var(--e3);
  font-size:var(--f-base); line-height:1.5; color:var(--t-ink);}
.mme-lista{margin:0; padding-left:18px;}
.mme-lista li{margin-bottom:2px;}

#modalMotivoEliminar textarea{width:100%; border:0.5px solid var(--t-line); border-radius:7px;
  padding:8px 10px; font-family:inherit; font-size:var(--f-base); color:var(--t-ink);
  background:var(--t-surface); resize:vertical; min-height:66px;}
#modalMotivoEliminar select{width:100%;}
/* Deshabilitado tiene que VERSE deshabilitado: si el botón de borrar se ve
   igual apagado que encendido, la gente lo pulsa y cree que la app falló. */
#modalMotivoEliminar .dc-btn[disabled]{opacity:.45; cursor:not-allowed;}

.elim-barra{display:flex; gap:var(--e3); align-items:flex-end; flex-wrap:wrap;
  margin:var(--e4) 0 var(--e3);}
.elim-barra .t-campo{margin:0;}
.elim-barra input{min-width:220px;}
.elim-tabla td{vertical-align:top;}

/* ══════════════════════════════════════════════════════════════════════
   CAPTURAS DE RECOLECTA                                        V7.92.0
   ══════════════════════════════════════════════════════════════════════ */
/* Se distinguen de las fotos de punto porque son otra cosa: una foto la
   toma el técnico con la cámara, una captura sale de la aplicación de
   monitoreo. Mezclarlas en la misma lista gris haría dudar de cuál es cuál
   justo cuando hay que revisar si falta alguna. */
.insp-foto--recolecta{ border-left:3px solid var(--t-info); }

/* ══════════════════════════════════════════════════════════════════════
   QUIEN RECIBE, Y SU FIRMA                                     V7.93.0
   ══════════════════════════════════════════════════════════════════════ */
.insp-recibido{ border-top:1px solid var(--t-line); margin-top:var(--e4); padding-top:var(--e3); }

/* El lienzo de firma. `touch-action:none` es lo que impide que el gesto de
   firmar mueva la página debajo del dedo — sin eso, en el celular no se
   puede trazar nada: el navegador se queda el gesto para hacer scroll. */
.insp-firma-lienzo{
  width:100%; height:180px; display:block;
  border:1px dashed var(--t-line); border-radius:var(--r1);
  background:#fff; touch-action:none; cursor:crosshair;
}
.insp-firma-modal{ max-width:520px; }

.insp-firma-hecha{ display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap; margin-top:var(--e2); }
.insp-firma-marco{
  flex:1; min-width:180px; min-height:64px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--t-line); border-radius:var(--r1); background:#fff; padding:var(--e2);
}
.insp-firma-marco img{ max-height:64px; max-width:100%; display:block; }

@media (pointer: coarse){
  /* Con el dedo hace falta sitio para firmar: 180 px es una raya, no una firma. */
  .insp-firma-lienzo{ height:230px; }
}

/* Texto en tono de aviso, sin pastilla. Existía `.t-ok-txt` y no su pareja:
   una advertencia dicha en el color del texto normal no se lee como
   advertencia. */
.t-aviso-txt{color:var(--t-aviso);}

/* ── Pestaña «En ruta» de Bodega ───────────────────────────────── V7.95.0 */
.enruta-cabecera{display:flex; gap:10px; align-items:flex-start; padding:11px 13px;
  border-radius:10px; margin-bottom:12px; font-size:12.5px; line-height:1.45;
  background:var(--t-info-bg); color:var(--t-info); border:1px solid var(--t-info-line);}
.enruta-cabecera .t-ico{width:18px; height:18px; flex:0 0 18px; margin-top:1px;}
/* El tiempo fuera se lee de un vistazo en la fila, sin abrir la tarjeta:
   es el dato por el que se entra a esta pestaña. */
.enruta-tiempo{color:var(--t-info); font-weight:600; white-space:nowrap;}
.enruta-tiempo .t-ico{width:13px; height:13px; vertical-align:-2px;}

/* ── Bodega · pestaña «Aprobado» ───────────────────────────────── V7.96.0
   Clases propias del panel de comprobación guía ↔ cotización. */
.aprob-carga{display:flex; gap:14px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; padding:14px 16px; margin-bottom:6px;}
.aprob-carga h3{margin:0 0 3px; font-size:14px;}
.aprob-carga .t-ayuda{max-width:62ch;}

.aprob-modo{display:flex; gap:10px; align-items:flex-start; padding:11px 13px;
  border-radius:10px; border:1px solid; font-size:12.5px; line-height:1.45; margin-bottom:14px;}
.aprob-modo .t-ico{width:18px; height:18px; flex:0 0 18px; margin-top:1px;}
.aprob-modo--aviso{background:var(--t-info-bg); color:var(--t-info); border-color:var(--t-info-line);}
/* La alarma de lo despachado sin facturar. Va en rojo y ARRIBA del aviso
   informativo: de todo lo que compara esta pantalla, es lo único que cuesta
   dinero si nadie lo mira. */
.aprob-modo--malo{background:var(--t-mal-bg); color:var(--t-mal); border-color:var(--t-mal-line);}

.aprob-barra{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:14px;}
.aprob-barra .t-campo{min-width:220px; flex:1 1 220px; margin:0;}
.aprob-chips{display:flex; flex-wrap:wrap; gap:6px;}
.aprob-chip{border:1px solid var(--t-line); background:var(--t-surface); color:var(--ink-2);
  border-radius:999px; padding:6px 12px; font-size:11.5px; cursor:pointer; line-height:1.2;
  min-height:32px;}
.aprob-chip b{font-variant-numeric:tabular-nums; margin-left:3px;}
.aprob-chip:hover{border-color:var(--ink-3);}
.aprob-chip.es-activo{background:var(--t-ink); color:#fff; border-color:var(--t-ink);}

/* V8.43.0 — La barra del filtro de fecha. Va por encima del buscador y de
   las pastillas porque manda sobre las dos: lo que filtra aquí es lo que
   cuentan ellas. Cuando está puesto se marca con un borde de color, para
   que nadie lea un número recortado creyendo que es el total. */
.aprob-filtro{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  margin-bottom:12px; padding:10px 12px; border:1px solid var(--t-line);
  border-radius:var(--r2, 10px); background:var(--t-surface);}
.aprob-filtro .t-campo{min-width:170px; flex:0 1 190px; margin:0;}
.aprob-filtro .t-ayuda{flex:1 1 240px; min-width:0;}
.aprob-filtro.es-activo{border-color:var(--t-aviso-linea, #e0a63a);
  box-shadow:inset 3px 0 0 var(--t-aviso-linea, #e0a63a);}

.aprob-tabla{font-size:12px;}

/* V8.44.0 — El expediente en el formato de la hoja: una fila por tramo del
   pedido, con el avance en tres marcas, y lo que cada fila esconde se abre
   al tocarla. La fila entera es el botón: en el celular hay que poder darle
   con el pulgar sin apuntar a un iconito. */
.ocexp-tramos th.ocexp-cab-estado{text-align:center; letter-spacing:.06em;
  border-bottom:0.5px solid var(--t-line);}
.ocexp-fila{cursor:pointer;}
.ocexp-fila:hover{background:var(--t-hover, rgba(0,0,0,.03));}
.ocexp-fila:focus-visible{outline:2px solid var(--t-ink); outline-offset:-2px;}
.ocexp-fila.es-abierta{background:var(--t-hover, rgba(0,0,0,.04));}
.ocexp-marca{display:inline-block; min-width:1.4em; text-align:center; color:var(--ink-3);}
.ocexp-marca--si{color:var(--t-ok-ink, #1a7a4e); font-weight:700;}
.ocexp-marca--mal{color:var(--t-mal-ink, #b4232a); font-weight:700;}
.ocexp-fila-detalle > td{padding:0 !important; background:var(--t-surface);}
.ocexp-detalle{padding:12px 14px; border-left:3px solid var(--t-ink);}
.ocexp-bloque{margin-bottom:14px;}
.ocexp-bloque:last-child{margin-bottom:0;}
.ocexp-bloque h4{font-size:12px; margin:0 0 4px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-2);}
.ocexp-mini{font-size:11.5px; margin-top:6px;}
.ocexp-mini th{font-size:10.5px;}
.ocexp-contenido{font-size:11.5px;}
.ocexp-contenido tr.ocexp-dev td{color:var(--t-mal-ink, #b4232a);}
.ocexp-fotos{margin-top:8px;}
.ocexp-fotos-tit{font-size:11.5px; font-weight:600; margin:0 0 4px;
  display:flex; align-items:center; gap:5px;}
.ocexp-fotos-tira{display:flex; gap:8px; flex-wrap:wrap;}
.ocexp-fotos-tira a{display:block; width:104px; text-decoration:none;}
.ocexp-fotos-tira img{width:104px; height:78px; object-fit:cover; display:block;
  border:1px solid var(--t-line); border-radius:7px; background:var(--t-hover, #f3f3f1);}
.ocexp-fotos-tira a:hover img{border-color:var(--ink-3);}
.ocexp-fotos-tira span{display:block; font-size:10px; color:var(--ink-3); margin-top:2px;
  text-align:center;}
.ocexp-cuadre{margin-top:16px; border-top:0.5px solid var(--t-line); padding-top:10px;}
.ocexp-cuadre > summary{font-size:12.5px; font-weight:600; cursor:pointer; color:var(--ink-2);}
@media (max-width:760px){
  .ocexp-fotos-tira a, .ocexp-fotos-tira img{width:84px;}
  .ocexp-fotos-tira img{height:64px;}
  .ocexp-fila-detalle > td{display:block;}
  .ocexp-detalle{border-left:none; border-top:3px solid var(--t-ink);}
}

/* V8.29.0 — El desglose de «¿por qué hay 899?». Es un informe de lectura, no
   una lista de trabajo: por eso va dentro de un marco propio y cerrado por
   defecto, para no competir con la tabla que de verdad se usa a diario. */
.aprob-diag-barra{display:flex; gap:var(--e3); align-items:center; flex-wrap:wrap; margin-bottom:var(--e3);}
.aprob-diag-barra .t-ayuda{flex:1 1 240px; min-width:0;}
.aprob-diag{border:1px solid var(--t-line); border-radius:var(--r2); padding:var(--e3);
  background:var(--t-surface-2); margin-bottom:var(--e4);}
.aprob-diag-cajon{border-top:1px solid var(--t-line); padding-top:var(--e3); margin-top:var(--e3);}
.aprob-diag-cajon--queda{border-left:3px solid var(--t-aviso); padding-left:var(--e3);}
.aprob-diag-cab{display:flex; gap:var(--e2); align-items:baseline; flex-wrap:wrap; margin-bottom:6px;}
.aprob-diag-cab b{font-size:var(--f-alto); font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.aprob-diag-cab span:nth-child(2){font-weight:600; flex:1 1 auto;}
.aprob-diag-tabla{font-size:11.5px; width:100%;}
.aprob-diag-tabla td, .aprob-diag-tabla th{padding:4px 6px;}
@media (max-width:700px){
  /* En el teléfono la tabla se desplaza sola en vez de desbordar la pantalla. */
  .aprob-diag-cajon{overflow-x:auto;}
  .aprob-diag-tabla{min-width:540px;}
}

/* Con el dedo, 44 px: la regla que la V7.89.0 puso para toda la aplicación. */
@media (pointer: coarse){
  .aprob-chip{min-height:44px; padding:11px 14px;}
}
@media (max-width: 640px){
  .aprob-carga{flex-direction:column; align-items:stretch;}
  .aprob-carga .dc-btn{width:100%; justify-content:center;}
}

/* ── El traspaso bodega → despachador ──────────────────────────── V7.99.0 */
.entrega-recepcion{display:flex; gap:9px; align-items:flex-start; margin-top:12px;
  padding:10px 12px; border-radius:9px; border:1px solid; font-size:12.5px; line-height:1.45;}
.entrega-recepcion .t-ico{width:17px; height:17px; flex:0 0 17px; margin-top:1px;}
.entrega-recepcion--ok{background:var(--t-ok-bg); color:var(--t-ok); border-color:var(--t-ok-line);}
.entrega-recepcion--falta{background:var(--t-aviso-bg); color:var(--t-aviso); border-color:var(--t-aviso-line);}
.entrega-recepcion .dc-btn{min-height:44px;}

/* ── «Recepción del despachador», su propia bandeja ────────────── V7.102.0
   Una tarjeta para contar cajas, no un expediente. Todo lo que se ve aquí
   tiene que servir para responder «¿está completo?» de pie, junto a la
   camioneta: qué cliente, qué guía, qué ítems, y el botón. */
.recep-ayuda{display:flex; gap:8px; align-items:flex-start; margin:0 0 var(--e3);
  padding:9px 11px; border-radius:9px; font-size:12.5px; line-height:1.45;
  background:var(--t-surface-2); border:1px solid var(--t-line); color:var(--ink-2);}
.recep-ayuda .t-ico{width:16px; height:16px; flex:0 0 16px; margin-top:2px;}

.recep-card{padding:var(--e3); margin-bottom:var(--e2);}
.recep-cab{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:6px;}
.recep-cab b{font-size:13.5px;}
.recep-quien{font-size:11.5px; color:var(--ink-3); margin:0 0 8px;}

.recep-items{border:1px solid var(--gr-line); border-radius:8px;
  padding:8px 10px; max-height:190px; overflow-y:auto; background:var(--t-surface-2);}
/* La lista para LEER cabe en 190px. La de TILDAR no, y recortarla es lo peor
   que puede pasarle a una lista de chequeo: el producto que queda debajo del
   corte es justo el que nadie mira. Va después de la regla de arriba a
   propósito — misma especificidad, gana la última. */
.recep-items.recep-items--tildable{max-height:none; overflow:visible;}
.recep-items p{font-size:12px; margin:0 0 4px; line-height:1.4;
  display:flex; gap:8px; align-items:baseline;}
.recep-items p:last-child{margin-bottom:0;}
.recep-items-cab{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-3); border-bottom:1px solid var(--gr-line); padding-bottom:5px; margin-bottom:6px;}
.recep-cant-cab{margin-left:auto;}
/* El código del producto es lo que se compara con la caja: no se parte. */
.recep-items p b{white-space:nowrap;}
/* La cantidad es el dato que se compara con la caja: no puede ir suelta al
   final de una frase larga, tiene que quedar en su propia columna. */
.recep-cant{margin-left:auto; flex:0 0 auto; font-weight:600; font-variant-numeric:tabular-nums;
  background:var(--gr-3); border:1px solid var(--gr-line); border-radius:6px; padding:1px 7px;}
.recep-sin-lista{display:flex; gap:8px; align-items:flex-start; font-size:12px;
  color:var(--t-aviso); background:var(--t-aviso-bg); border:1px solid var(--t-aviso-line);
  border-radius:8px; padding:8px 10px; margin:0;}
.recep-sin-lista .t-ico{width:16px; height:16px; flex:0 0 16px; margin-top:1px;}
.recep-fotos{font-size:11.5px; color:var(--ink-2); margin:8px 0 0;}
.recep-fotos .t-ico{width:15px; height:15px; vertical-align:-2px;}

.recep-pie{display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center;
  justify-content:space-between; margin-top:10px;}
.recep-desp{font-size:12px; color:var(--ink-2);}
.recep-desp .t-ico{width:15px; height:15px; vertical-align:-2px; margin-right:3px;}
.recep-desp--falta{color:var(--t-aviso);}
.recep-espera{font-size:11.5px; color:var(--ink-3);}
.recep-asignar{font-size:11.5px; color:var(--ink-2); display:flex;
  gap:6px; align-items:center; flex-wrap:wrap;}
.recep-asignar select{min-height:38px;}
.recep-pie .dc-btn{min-height:44px;}

/* ── Recibir de una, y el escape a «Falta algo» ───────────  V7.116.0
   El botón manda y el enlace no compite con él: es el camino raro. Pero es
   un <button> de verdad, no un texto con onclick — se llega con Tab y con
   un área de toque de dedo, porque en el patio se pulsa con guantes. */
.recep-acciones{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.recep-falta-link{background:none; border:0; padding:8px 4px; font:inherit;
  font-size:12px; color:var(--ink-3); text-decoration:underline;
  text-underline-offset:2px; cursor:pointer; min-height:38px;}
.recep-falta-link:hover, .recep-falta-link:focus-visible{color:var(--t-aviso);}

/* Quien se la lleva es vendedor: se marca porque cambia quién firma. */
.recep-vend-tag{display:inline-block; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; padding:1px 6px;
  border-radius:999px; background:var(--t-info-bg); color:var(--t-info);
  border:1px solid var(--t-info-line); vertical-align:1px;}
/* El aviso de a nombre de quién se va a firmar. Va ANTES de pulsar, no
   después en el historial: quien firma tiene que saber qué está firmando. */
.recep-nota-vend{margin:8px 0 0; font-size:11.5px; line-height:1.5;
  color:var(--ink-2); background:var(--t-info-bg);
  border:1px solid var(--t-info-line); border-radius:8px; padding:8px 10px;}
.recep-nota-vend .t-ico{width:14px; height:14px; vertical-align:-2px; margin-right:4px;}

/* ── El nombre de quien vino a retirar ────────────────────  V7.118.0
   Va pegado al desplegable, no en otra fila: es la continuación de la misma
   decisión («lo retira el cliente» → «¿quién?»), y separarlos hace que se
   guarde el tipo y se olvide el nombre. */
.recep-cliente-caja{display:flex; gap:6px; align-items:center; flex-wrap:wrap;
  margin-left:6px;}
.recep-cliente-caja input{min-height:38px; min-width:190px; flex:1 1 190px;
  border:0.5px solid var(--gr-line); border-radius:8px; padding:7px 10px;
  font-size:12.5px; box-sizing:border-box;}
.recep-cliente-caja .dc-btn{min-height:38px;}

@media (max-width: 760px){
  /* En el celular el botón es lo que se viene a pulsar: fila propia y ancho
     completo, no encajado al lado del nombre del despachador. */
  .recep-pie{flex-direction:column; align-items:stretch;}
  .recep-cliente-caja{margin-left:0; width:100%;}
  .recep-cliente-caja input{width:100%;}
  .recep-pie .dc-btn{width:100%; justify-content:center;}
  .recep-asignar select{width:100%;}
  .recep-acciones{flex-direction:column; align-items:stretch; width:100%;}
  .recep-falta-link{text-align:center;}
}

/* ── La barra de abajo, también en Flota/Inspección/Talento/Financiero ─ V7.103.0
   Reutiliza `.mob-nav`, la misma barra que CRM-Bodega ya tiene en el
   teléfono: mismo sitio, mismo alto, mismos iconos. Que se vea igual no es
   estética — es que sea el mismo gesto en toda la aplicación. */
#barraModulosMovil{display:none;}
@media (max-width: 760px){
  /* z-index 950 y no el 60 de `.mob-nav`: los cuatro módulos con riel se
     montan como una capa a pantalla completa con `z-index:900`, así que una
     barra en 60 se dibuja DEBAJO de ellos. Se veía —el navegador la pinta
     igual— pero el toque se lo comía la tarjeta de arriba, que es la peor
     versión del fallo: un botón que está a la vista y no responde.
     Por debajo del aviso de versión (10000), del selector de módulos (9999)
     y de los toasts (1000): esos tres tienen que poder taparla. */
  #barraModulosMovil{display:flex; z-index:950;}
  /* El contenido no puede quedar debajo de la barra: el último renglón de
     una lista larga era justo lo que tapaba. */
  /* V8.15.0 — el 84px era la altura de la barra sin contar el indicador del
     sistema. La barra SÍ reserva su safe area (.mob-nav), así que en un
     teléfono con indicador ocupa 84+34 y el contenido solo apartaba 84: los
     últimos 30px quedaban debajo, y no se llegaba a ellos porque el scroll ya
     estaba al final. Afectaba a Flota, Inspección, Talento y Financiero —
     los cuatro que se usan de pie. Se suma la misma inserción que la barra. */
  body.t-con-barra-modulos .t-cuerpo{padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px));}
  /* Y los dos iconos anclados al borde derecho de la tira ya no hacen
     falta: estarían diciendo lo mismo dos veces, y con menos claridad.
     Al quitarlos, la tira recupera unos 100 px para navegar. */
  body.t-con-barra-modulos .t-riel-grupo--abajo{display:none;}
  /* Talento y Financiero no marcan su grupo de sesión con `--abajo`, así que
     se nombran uno a uno. Es feo, pero lo alternativo —tocar los cuatro
     rieles para que usen la misma clase— es más riesgo por menos: aquí solo
     se está escondiendo lo que ahora se dice mejor abajo. */
  body.t-con-barra-modulos #finCambiarModulo,
  body.t-con-barra-modulos #finSalir,
  body.t-con-barra-modulos #talentoCambiarModulo,
  body.t-con-barra-modulos #talentoSalir{display:none;}
}

/* V7.115.0 — Lo que la columna dejó fuera por el tope. Ya no va pegado al
   título (antes decía «+27 de días anteriores»): ahora va AL PIE de las
   tarjetas, que es donde se acaba de leer la lista y donde la frase
   significa «y todavía hay más, menos urgentes que estas». */
.tablero-col-antes{display:block; margin:10px 0 0; padding-top:8px;
  border-top:1px dashed var(--t-line-2); font-size:11.5px; font-weight:500;
  color:var(--t-ink-3); text-transform:none; letter-spacing:0;}

/* ── El contador de días parado ───────────────────────────  V7.115.0
   Va pegado a la fecha de registro y no en una línea propia: la tarjeta del
   TV ya tiene cinco líneas y una sexta deja menos pedidos en pantalla, que
   es justo lo contrario de lo que se pide. El color refuerza, nunca es lo
   único que lo distingue — el número de días está escrito. */
.tablero-dias{display:inline-block; margin-left:7px; padding:1px 7px;
  border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.01em;
  background:var(--t-quieto-bg); color:var(--t-ink-2); border:1px solid var(--t-line);}
.tablero-dias--aviso{background:var(--t-aviso-bg); color:var(--t-aviso);
  border-color:var(--t-aviso-line);}
.tablero-dias--malo{background:var(--t-mal-bg); color:var(--t-mal);
  border-color:var(--t-mal-line);}

/* La franja de «sin conexión» del TV.                          V8.02.0
   Va arriba del todo y en ámbar, no en rojo: los datos que se ven siguen
   siendo buenos, solo que de hace un rato. Rojo diría «esto está mal», y lo
   que está mal es la red, no el tablero. */
.tablero-corte{display:flex; align-items:center; gap:8px; margin:0 0 14px;
  padding:9px 13px; border-radius:9px; font-size:13px; line-height:1.45;
  background:var(--t-aviso-bg); color:var(--t-aviso);
  border:1px solid var(--t-aviso-line);}
.tablero-corte .t-ico{width:17px; height:17px; flex:0 0 17px;}

/* ── Los dos relojes ──────────────────────────────────────  V7.117.0
   El del cliente lleva la pastilla con color; el de la columna va suelto y
   apagado al lado. La jerarquía tiene que verse de lejos: si los dos
   pesaran igual, el TV enseñaría dos números y ninguna respuesta. */
.tablero-dias-col{font-size:10.5px; color:var(--t-ink-3); white-space:nowrap;}
/* Sin cruce con una cotización: el número que hay mide otra cosa, y decirlo
   es lo que impide leerlo como si fuera el del cliente. */
.tablero-sincruce{font-size:10px; color:var(--t-ink-3);
  font-style:italic; white-space:nowrap;}

/* La orden de compra del cliente en la tarjeta de «Pendiente de atender»:
   es el dato por el que ese pedido está en esa columna, así que se lee
   entero — nunca cortado con puntos suspensivos, porque es el número que el
   cliente va a citar por teléfono. */
.tablero-pedido-oc{font-size:11.5px; color:var(--t-ink-2); margin:0 0 5px;
  word-break:break-word; line-height:1.35;}

/* Cuando el despachador no ve nada, decirle a nombre de quién se busca. */
.recep-anombre{display:block; margin-top:8px; font-size:12.5px; line-height:1.5;
  color:var(--ink-2); background:var(--gray-bg); border:1px solid var(--gr-line);
  border-radius:8px; padding:9px 11px; text-align:left;}

/* La referencia de compra del cliente (campo ADICIONAL del ERP, columna REF
   del reporte). Va como pastilla y no como texto suelto: es un dato del
   cliente metido entre datos nuestros, y conviene que se distinga. */
.aprob-ref{display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; letter-spacing:.01em; background:var(--t-aviso-bg); color:var(--t-aviso);
  border:1px solid var(--t-aviso-line); border-radius:5px; padding:1px 6px;
  vertical-align:1px;}
/* La referencia del cliente NO se corta: es el número con el que él va a
   reclamar, y media referencia («requisición 1888-QA-MI…») no sirve para
   nada. Cuando es larga, la pastilla parte de línea dentro de su celda. */
.aprob-tabla td .aprob-ref{max-width:100%; white-space:normal;
  overflow-wrap:anywhere; word-break:break-word; line-height:1.35;}
/* Al lado del número de cotización sí va en línea, que ahí es un adorno. */
.aprob-tabla td b + .aprob-ref{max-width:24ch;}
.aprob-modo--pedido{background:var(--t-aviso-bg); color:var(--t-aviso); border-color:var(--t-aviso-line);}

/* ── Contador de días ─────────────────────────────────────  V7.111.0
   El color sale de la antigüedad, no de un umbral por columna: una tabla de
   números todos iguales no dice cuál urge, que es para lo que se pidió. */
/* ── Eliminados del CRM ───────────────────────────────────  V7.113.0 */
.crmelim-cab{display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap; margin-bottom:10px;}
.crmelim-cab h3{margin:0; font-size:15px;}
.crmelim-cab input{width:280px; max-width:100%; border:0.5px solid var(--gr-line);
  border-radius:8px; padding:6px 10px; font-size:12.5px;}
.crmelim-motivos{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px;}
.crmelim-chip{font-size:11.5px; background:var(--t-surface-2); border:1px solid var(--t-line);
  border-radius:999px; padding:3px 10px; color:var(--t-ink-2);}
.crmelim-chip b{color:var(--t-ink); margin-right:2px;}

.aprob-dias{display:inline-block; font-variant-numeric:tabular-nums; font-size:11.5px;
  font-weight:600; padding:2px 7px; border-radius:999px; white-space:nowrap;
  background:var(--t-ok-bg); color:var(--t-ok); border:1px solid var(--t-ok-line);}
.aprob-dias--aviso{background:var(--t-aviso-bg); color:var(--t-aviso); border-color:var(--t-aviso-line);}
.aprob-dias--malo{background:var(--t-mal-bg, #fdecea); color:var(--t-mal, #b3261e);
  border-color:var(--t-mal-line, #f5c6c0);}

/* ── El match de fechas de una entrega confirmada ─────────  V7.111.0
   Tres fechas sueltas obligan a restar mentalmente y nadie lo hace, así que
   los días entre una y otra van escritos al lado. */
.ematch{border:1px solid var(--gr-line); border-radius:8px; padding:9px 11px;
  margin-top:12px; background:var(--t-surface-2);}
.ematch-tit{font-size:11px; text-transform:uppercase; letter-spacing:.03em;
  color:var(--t-ink-3); margin:0 0 7px; display:flex; align-items:center; gap:5px;}
.ematch-fila{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;
  font-size:12.5px; margin:0 0 4px;}
.ematch-fila:last-child{margin-bottom:0;}
.ematch-rot{flex:0 0 auto; min-width:9.5rem; color:var(--t-ink-3);}
.ematch-extra{font-size:11.5px; color:var(--t-ink-3);}
.ematch-falta{color:var(--t-aviso); align-items:center;}

/* «Cargado el»: el día arriba y cuánto lleva debajo, en pequeño. La
   antigüedad va escrita y no en un tooltip porque en el celular no hay
   dónde posar el dedo, y «hace 8 días» es el dato que hace actuar. */
.aprob-cargado{white-space:nowrap; line-height:1.25;}
.aprob-carga-dia{display:block; font-variant-numeric:tabular-nums;}
.aprob-carga-hace{display:block; font-size:10.5px; color:var(--ink-2); font-weight:400;}

/* ── Reagendar con motivo ─────────────────────────────────  V7.108.0
   El historial va dentro de la tarjeta roja de «no entregada», así que se
   pinta sobre fondo neutro: si fuera rojo también, las tres cosas —el
   fallo, el cierre del despachador y el historial— competirían por la
   misma alarma y no se leería ninguna. */
.reagenda-caja{text-align:left; background:var(--gray-bg); border-radius:6px;
  padding:7px 9px; margin:0 0 8px;}
.reagenda-titulo{font-size:11.5px; font-weight:600; color:var(--ink-2); margin:0 0 5px;}
.reagenda-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.reagenda-item{display:flex; flex-direction:column; gap:1px; font-size:11.5px;
  padding-left:8px; border-left:2px solid var(--t-line, rgba(0,0,0,.12));}
.reagenda-fecha{font-weight:600; font-variant-numeric:tabular-nums;}
.reagenda-motivo{color:var(--ink-2);}
.reagenda-detalle{color:var(--ink-2); overflow-wrap:anywhere;}
/* V8.17.0 — sin el opacity queda en 5,22:1 y se sigue leyendo como secundario. */
.reagenda-quien{font-size:11px; color:var(--t-ink-2);}
/* Que ya se haya caído varias veces es lo primero que hay que leer en el
   cuadro, no una nota al pie. */
.reagenda-repetida{background:var(--t-aviso-bg); color:var(--t-aviso);
  border:1px solid var(--t-aviso-line); border-radius:6px; padding:6px 9px;}

/* Los dos caminos de una foto de inspección: tomarla o subirla del carrete.  V8.22.0 */
.insp-fotos-botones{display:flex; gap:var(--e2); flex-wrap:wrap;}
.insp-fotos-botones .dc-btn{flex:1 1 auto; min-height:44px; justify-content:center;}

/* ── Módulo Seguimiento (WhatsApp de confiabilidad) ──────────────── V8.20.0 */
.seg-rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--e3);}
.seg-rejilla > .t-panel{margin:0;}
.seg-item{display:flex; gap:var(--e2); align-items:center; flex-wrap:wrap;}
.seg-item .t-ayuda{line-height:1.6;}
.seg-vacio{padding:var(--e2) var(--e4) var(--e3);}
.seg-pad{padding:var(--e3) var(--e4);}
.seg-pad > p{margin:0 0 var(--e2);}
.seg-item a.dc-btn{text-decoration:none;}
.seg-buscar{max-width:420px;}
.seg-campos{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--e3);}
.seg-campos select, .seg-modal select, #segCuerpo textarea, .seg-modal textarea, .seg-campos input[type="date"]{
  width:100%; border:1px solid var(--t-line); border-radius:var(--r1); padding:10px 11px;
  font-family:inherit; font-size:16px; background:var(--t-surface); color:var(--t-ink); margin:0;}
.seg-check label{display:flex; gap:8px; align-items:center; text-transform:none; letter-spacing:normal;
  font-size:var(--f-dato); color:var(--t-ink); font-weight:600;}
.seg-check input{width:auto;}
.seg-recibe{border:1px solid var(--t-line); border-radius:var(--r1); padding:var(--e2) var(--e3); margin:var(--e2) 0 0;}
.seg-recibe legend{font-size:var(--f-micro); font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--t-ink-3); padding:0 4px;}
.seg-recibe label{display:flex; gap:8px; align-items:flex-start; padding:6px 0; font-size:var(--f-dato);}
.seg-recibe input{margin-top:3px;}
.seg-modal{max-width:640px; width:100%;}
.seg-actividad{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--e3);}
.seg-act-caja{border:1px solid var(--t-line); border-radius:var(--r1); padding:var(--e3);}
.seg-act-tit{margin:0; font-size:var(--f-micro); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--t-ink-3);}
.seg-act-num{margin:4px 0; font-size:26px; font-weight:700; color:var(--t-ink);}
@media (max-width:760px){
  .seg-rejilla{grid-template-columns:1fr;}
  .seg-item .dc-btn{min-height:44px;}
  .seg-item > .t-flex1{flex-basis:100%;}
}

/* ── Caso cerrado de una entrega ─────────────────────────────────── V8.25.0
   Gris a propósito: no es un error (rojo) ni un logro (verde), es un asunto
   apagado a mano por supervisión, con nombre y motivo a la vista. */
.entrega-caso-cerrado{border:1px solid var(--t-line); background:var(--t-surface-2);
  border-left-width:3px; border-radius:var(--r1); padding:10px 12px; margin:10px 0 0;}
.entrega-caso-cerrado .ecc-tit{margin:0 0 4px; font-size:var(--f-dato); font-weight:600; color:var(--t-ink);}
.entrega-caso-cerrado .ecc-motivo{margin:0 0 2px; font-size:var(--f-dato); color:var(--t-ink);}
.entrega-caso-cerrado .ecc-com{margin:0 0 6px; font-size:var(--f-dato); color:var(--t-ink-2); line-height:1.5;}
.entrega-cerrar-caso{border-top:0.5px solid var(--gr-line); margin-top:12px; padding-top:10px;}
.entrega-cerrar-caso .dc-btn{min-height:44px;}
.entrega-cerrar-caso .t-ayuda{margin-top:5px;}

/* ── Cuadre de bodega ─────────────────────────────────────────────── V8.27.0 */
.cuadre-item{display:flex; gap:var(--e2); align-items:center; flex-wrap:wrap;}
.cuadre-item .dc-btn{min-height:40px;}
.cuadre-ayuda{padding:0 var(--e4) var(--e3); line-height:1.5;}
.cuadre-ok{color:var(--t-ink-3);}
@media (max-width:760px){ .cuadre-item > .t-flex1{flex-basis:100%;} }

/* ── Módulo Ventas ─────────────────────────────────────────────── V8.34.0
   Clases propias, como hicieron Flota e Inspección. Reutilizar las de otro
   módulo para algo que no es lo mismo acaba en un cambio de estilo allá que
   rompe una pantalla aquí. */
.t-oculto-visual{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

.ventas-form{max-width:760px; display:flex; flex-direction:column; gap:var(--e3);}
.ventas-bloque{border:1px solid var(--t-line); border-radius:var(--r2);
  padding:var(--e4); background:var(--t-surface);}
.ventas-tit{margin:0 0 var(--e3); font-size:14px; font-weight:600; color:var(--t-ink);
  display:flex; align-items:center; gap:6px;}
.ventas-sub{margin:var(--e4) 0 var(--e2); font-size:12.5px; font-weight:600; color:var(--t-ink-2);}
.ventas-ayuda{font-size:11.5px; line-height:1.5; color:var(--t-ink-3); margin:var(--e2) 0 0;}
.ventas-ayuda--ojo{color:var(--amber-dark);}
.ventas-pista{display:block; font-size:11px; color:var(--t-ink-3); margin-top:3px; min-height:14px;}
.ventas-pista--mal{color:var(--red-dark);}
.ventas-ok{color:var(--teal-dark); font-size:12px;}
.ventas-falta{color:var(--red-dark); font-size:12px;}

.ventas-rejilla{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--e3);}
.ventas-rejilla label, .ventas-form > label, .ventas-bloque > label{display:block;
  font-size:12px; color:var(--t-ink-2); font-weight:500;}

.ventas-resultados{display:flex; flex-direction:column; gap:4px; margin-top:var(--e2);}
.ventas-resultado{display:block; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--t-line); border-radius:var(--r1); padding:8px 10px;
  background:var(--t-surface); font-size:13px; color:var(--t-ink);}
.ventas-resultado:hover{background:var(--t-surface-2); border-color:var(--teal);}
.ventas-resultado small{display:block; color:var(--t-ink-3); font-size:11px; margin-top:2px;}
.ventas-elegido{display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--e3); border:1px solid var(--teal); border-radius:var(--r1);
  padding:10px 12px; background:var(--teal-bg); font-size:13px;}

.ventas-gps, .ventas-foto{display:flex; align-items:center; gap:var(--e3);
  flex-wrap:wrap; margin-bottom:var(--e2);}
.ventas-previa{display:block; max-width:220px; width:100%; border-radius:var(--r1);
  border:1px solid var(--t-line); margin-top:var(--e2);}
.ventas-sinfoto{display:block; margin-top:var(--e2); font-size:12px; color:var(--t-ink-2);}

.ventas-si-no{display:flex; gap:var(--e2); flex-wrap:wrap;}
.ventas-opcion{cursor:pointer; border:1px solid var(--t-line); border-radius:var(--r1);
  padding:9px 14px; background:var(--t-surface); font-size:13px; color:var(--t-ink);}
.ventas-opcion.puesta{border-color:var(--teal); background:var(--teal-bg);
  color:var(--teal-dark); font-weight:600;}

.ventas-casillas{display:flex; flex-wrap:wrap; gap:6px;}
.ventas-casilla{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--t-line); border-radius:var(--r3); padding:5px 11px;
  font-size:12px; color:var(--t-ink-2); background:var(--t-surface);}
.ventas-casilla.puesta{border-color:var(--teal); background:var(--teal-bg);
  color:var(--teal-dark); font-weight:600;}
.ventas-casilla input{margin:0;}

.ventas-acciones{display:flex; gap:var(--e3); align-items:center; flex-wrap:wrap;}

.ventas-resumen{display:flex; flex-wrap:wrap; gap:var(--e3); margin-bottom:var(--e4);}
.ventas-tarjeta{border:1px solid var(--t-line); border-radius:var(--r2);
  padding:10px 16px; background:var(--t-surface); min-width:104px;}
.ventas-tarjeta b{display:block; font-size:19px; color:var(--t-ink); line-height:1.2;}
.ventas-tarjeta span{font-size:11px; color:var(--t-ink-3);}
.ventas-tarjeta--ojo{border-color:var(--amber); background:var(--amber-bg);}
.ventas-tarjeta--mal{border-color:var(--red); background:var(--red-bg);}

.ventas-filtros{display:flex; flex-wrap:wrap; gap:var(--e3); align-items:flex-end;
  margin-bottom:var(--e4); padding:var(--e3); border:1px solid var(--t-line);
  border-radius:var(--r2); background:var(--t-surface-2);}
.ventas-filtros label{font-size:11.5px; color:var(--t-ink-2);}

.ventas-lista{display:flex; flex-direction:column; gap:var(--e3);}
.ventas-fila{border:1px solid var(--t-line); border-left-width:3px; border-radius:var(--r2);
  padding:var(--e3) var(--e4); background:var(--t-surface); font-size:13px;}
.ventas-fila--vencida{border-left-color:var(--red);}
.ventas-fila-cab{display:flex; justify-content:space-between; gap:var(--e3);
  align-items:flex-start; flex-wrap:wrap;}
.ventas-fila-fecha{font-size:11.5px; color:var(--t-ink-3); text-align:right; white-space:nowrap;}
.ventas-fila-fecha small{display:block; color:var(--t-ink-3);}
.ventas-fila-meta{margin:6px 0 0; font-size:11.5px; color:var(--t-ink-2);}
.ventas-fila-lineas{margin:6px 0 0; display:flex; flex-wrap:wrap; gap:4px;}
.ventas-fila-com{margin:7px 0 0; font-size:12.5px; color:var(--t-ink); line-height:1.5;}
.ventas-fila-prox{margin:7px 0 0; font-size:12px; color:var(--t-ink-2);}
.ventas-fila-valor{margin:6px 0 0; font-size:12.5px; font-weight:600; color:var(--t-ink);}
.ventas-fila-revisar{margin:7px 0 0; font-size:11.5px; color:var(--amber-dark);}
.ventas-fila-pie{display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--e3);}

.ventas-chip{display:inline-block; border:1px solid var(--t-line); border-radius:var(--r3);
  padding:1px 8px; font-size:10.5px; color:var(--t-ink-2); background:var(--t-surface-2);
  margin-left:5px; vertical-align:middle;}
.ventas-fila-lineas .ventas-chip{margin-left:0;}
.ventas-chip--si{border-color:var(--teal); background:var(--teal-bg); color:var(--teal-dark);}
.ventas-chip--ok{border-color:var(--teal); background:var(--teal-bg); color:var(--teal-dark);}
.ventas-chip--nuevo{border-color:var(--amber); background:var(--amber-bg); color:var(--amber-dark);}
.ventas-chip--espera{border-color:var(--amber); background:var(--amber-bg); color:var(--amber-dark);}
.ventas-chip--linea{border-color:var(--gr-0); background:var(--t-surface-2); color:var(--t-ink);}
.ventas-aviso{border-color:var(--amber) !important; color:var(--amber-dark) !important;}

@media (max-width:640px){
  .ventas-bloque{padding:var(--e3);}
  .ventas-rejilla{grid-template-columns:1fr;}
  .ventas-fila-fecha{text-align:left;}
}

/* Ventas V8.35.0 — pendientes de subir y diagnóstico */
.ventas-chip--mal{border-color:var(--red); background:var(--red-bg); color:var(--red-dark);}
.ventas-diag{margin:8px 0 0; padding-left:18px; font-size:12px; line-height:1.7;}
.ventas-diag li{margin:0;}
.t-mb3{margin-bottom:var(--e3);}

/* Ventas V8.36.0 — conteo de visitas para comisiones */
.ventas-veredicto{margin:7px 0 0; font-size:12px; line-height:1.55; padding:6px 10px;
  border-radius:var(--r1); border:1px solid var(--t-line); background:var(--t-surface-2);}
.ventas-veredicto.es-cuenta{border-color:var(--teal); background:var(--teal-bg); color:var(--teal-dark);}
.ventas-veredicto.es-no-cuenta{border-color:var(--t-line); color:var(--t-ink-2);}
.ventas-clasificar{margin-top:var(--e3); padding-top:var(--e3); border-top:1px dashed var(--t-line);}
.ventas-clasificar-fila{display:flex; gap:var(--e2); align-items:center; flex-wrap:wrap;}
.ventas-clasificar-fila select{max-width:260px;}
.ventas-debil{margin-top:var(--e3); padding:var(--e3); border-radius:var(--r1);
  border:1px solid var(--amber); background:var(--amber-bg);}
.ventas-debil p{margin:0 0 var(--e2); font-size:12px; color:var(--amber-dark); line-height:1.5;}
.ventas-conteo-tabla{margin-top:var(--e3);}
.ventas-conteo-tabla th{font-size:11px;}
.ventas-config{margin-top:var(--e4); border:1px solid var(--t-line); border-radius:var(--r2);
  padding:var(--e3) var(--e4); background:var(--t-surface);}
.ventas-config summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--t-ink);}
.t-mt3{margin-top:var(--e3);}
.ventas-conteo-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.ventas-conteo-scroll .t-tabla{min-width:760px;}

/* Ventas V8.37.0 — listado de marcas con jefe de línea */
.ventas-marcas{display:flex; flex-direction:column; gap:6px;}
.ventas-marca{border:1px solid var(--t-line); border-radius:var(--r1); background:var(--t-surface);
  overflow:hidden;}
.ventas-marca.puesta{border-color:var(--teal); background:var(--teal-bg);}
.ventas-marca-btn{display:flex; align-items:center; gap:10px; width:100%; cursor:pointer;
  border:0; background:transparent; padding:10px 12px; text-align:left; font-size:13.5px;
  color:var(--t-ink); min-height:44px;}
.ventas-marca-check{display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border:1.5px solid var(--t-line); border-radius:4px; flex:0 0 auto;
  background:var(--t-surface);}
.ventas-marca.puesta .ventas-marca-check{border-color:var(--teal); color:var(--teal-dark);}
.ventas-marca-nombre{font-weight:600; flex:1 1 auto;}
.ventas-marca-jefe{font-size:11.5px; color:var(--t-ink-3); flex:0 0 auto; text-align:right;}
.ventas-marca.puesta .ventas-marca-jefe{color:var(--teal-dark);}
.ventas-marca-apoyo{display:flex; align-items:flex-start; gap:8px; cursor:pointer;
  padding:9px 12px 11px; font-size:12px; line-height:1.45; color:var(--t-ink-2);
  border-top:1px dashed var(--t-line);}
.ventas-marca-apoyo.puesta{background:var(--amber-bg); color:var(--amber-dark);}
.ventas-marca-apoyo input{margin:2px 0 0;}
.ventas-marca-sinjefe{margin:0; padding:8px 12px 10px; font-size:11.5px; color:var(--t-ink-3);
  border-top:1px dashed var(--t-line);}
.ventas-chip--apoyo{border-color:var(--amber); background:var(--amber-bg); color:var(--amber-dark);}
.ventas-marcas-tabla td{padding:5px 6px;}
.ventas-marcas-tabla .mob-input{min-width:120px;}

/* ── Aviso de licencia ─────────────────────────────────────────── V8.39.0
   Un banner informativo en el selector de módulos. No tapa nada, no bloquea
   nada y solo lo ve Dirección. */
.lic-banner{display:flex; align-items:center; justify-content:center; gap:12px;
  flex-wrap:wrap; margin-top:22px; padding:10px 16px; border-radius:var(--r3);
  border:1px solid var(--t-line); background:var(--t-surface);
  font-size:12.5px; color:var(--t-ink-2); max-width:560px;}
.lic-banner--ok{border-color:var(--teal); background:var(--teal-bg); color:var(--teal-dark);}
.lic-banner--pronto{border-color:var(--amber); background:var(--amber-bg); color:var(--amber-dark);}
.lic-banner--vencida{border-color:var(--red); background:var(--red-bg); color:var(--red-dark);}
.lic-banner--neutro{color:var(--t-ink-3);}
.lic-fondo{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:10000;
  display:flex; align-items:flex-start; justify-content:center; padding:24px 16px;
  overflow-y:auto;}
.lic-caja{background:var(--t-surface); border-radius:var(--r2); padding:var(--e4);
  max-width:640px; width:100%; margin:auto; border:1px solid var(--t-line);}
.lic-cab{display:flex; align-items:center; justify-content:space-between;
  gap:var(--e3); margin-bottom:var(--e3);}
.lic-cab h3{margin:0; font-size:17px;}
.lic-caja label{display:block; font-size:12px; color:var(--t-ink-2); font-weight:500;}
.lic-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:var(--e2);}
.lic-scroll .t-tabla{min-width:420px;}

/* V8.46.0 — «Qué cubre esta factura». Va con marco propio porque no es un
   dato del mismo rango que los de arriba: las líneas son del documento que
   la factura cita, y el veredicto del importe es lo que convierte ese
   enlace en algo comprobado o en algo que hay que mirar. */
.ocexp-cubre{margin-top:10px; padding:10px 12px; border:1px solid var(--t-line);
  border-radius:var(--r2, 10px); background:var(--t-hover, rgba(0,0,0,.02));}
.ocexp-cubre-tit{font-size:11.5px; font-weight:600; margin:0 0 4px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;}

/* V8.47.0 — Los botones de la limpieza de recorridos GPS. */
.gps-mant-botones{display:flex; gap:8px; flex-wrap:wrap;}

/* V8.48.0 — La trazabilidad por ítem. La crónica («de qué guía salió cada
   parte y qué día») va debajo de la descripción y no en una columna propia:
   es texto corrido, y en una celda estrecha se parte en pedazos ilegibles. */
.ocexp-traza th{font-size:10px;}
.ocexp-cronica{display:inline-flex; flex-wrap:wrap; gap:4px; margin-top:2px;}
.ocexp-salida{font-size:10px; color:var(--ink-3); background:var(--t-hover, rgba(0,0,0,.04));
  border-radius:4px; padding:1px 5px; white-space:nowrap;}
.ocexp-salida--dev{color:var(--t-mal-ink, #b4232a);}
.ocexp-dev-num{color:var(--t-mal-ink, #b4232a);}