/* =====================================================================
   ERP Mely — LAS PIEZAS DEL MUEBLE (2026-08-01)
   =====================================================================
   Por qué existe este archivo
   ---------------------------
   Las 163 pantallas del ERP se construyeron UNA POR UNA, a mano. No había
   ni una sola pieza compartida para lo más repetido: el encabezado de una
   pantalla, un campo de captura, «vas en el paso 2 de 3». Resultado: cinco
   maneras distintas de maquetar un formulario conviviendo, cinco líneas del
   tiempo inventadas por separado, y 12,818 palabras de instrucciones sueltas
   entre los campos.

   Aquí viven LAS PIEZAS. Se construyen una vez; las pantallas las usan.

   Reglas de esta hoja (las «diez leyes», aprobadas por Pablo el 2026-08-01):
     01 · Una pantalla, una pregunta.
     02 · Se MUESTRA, no se explica — la regla se vuelve comportamiento
          (un campo apagado, un tope a la vista) en vez de un párrafo.
     03 · Lo que se repite se dice UNA vez, no renglón por renglón.
     04 · El color significa una sola cosa. Rojo = algo está mal y hay que
          actuar. Naranja = es tu turno. Gris = ya pasó o no te toca.
          JAMÁS rojo para «todavía no llegas».
     05 · Lo accionable pesa más que lo que no pide nada.
     06 · Uniforme va en TABLA; distinto va en TARJETA.
     07 · Siempre sabes dónde vas (una sola línea del tiempo).
     08 · El ancho se usa completo: dos columnas, no una tira.
     09 · Nada en mayúsculas salvo folios y claves.
     10 · El vacío se ve vacío; el error vive junto a su campo.

   Se carga DESPUÉS de mely_erp.css a propósito: así estas reglas ganan sin
   necesidad de !important, y quitar una línea del <link> revierte TODO el
   rediseño sin tocar una sola plantilla.
   ===================================================================== */

:root {
  /* --- Escala de ESPACIO ---------------------------------------------
     Antes no existía: los gap y padding se escribían a mano (14px, 18px,
     16px 18px, 6px…) y ninguna pantalla espaciaba igual que otra. Cuatro
     medidas cubren todo el ERP; si algo necesita una quinta, casi siempre
     es que el bloque está mal armado. */
  --e-1:  6px;   /* pegado: etiqueta ↔ su campo */
  --e-2: 12px;   /* junto: campos hermanos */
  --e-3: 20px;   /* aparte: bloques distintos dentro de una tarjeta */
  --e-4: 32px;   /* lejos: secciones de la pantalla */

  /* --- Escala de TEXTO ------------------------------------------------
     Antes: 10.5, 11.5, 12.5, 13, 13.5, 14.5px… dispersos por plantilla.
     Cinco tamaños. El nombre dice el PAPEL, no el tamaño, para que
     cambiarlo un día no obligue a renombrar nada. */
  --t-titulo:  19px;   /* título de un bloque */
  --t-cuerpo:  14px;   /* el dato, el texto normal */
  --t-dato:  13.5px;   /* celda de tabla */
  --t-apoyo: 12.5px;   /* ayuda, subtítulo, meta */
  --t-rotulo:  11px;   /* etiqueta de campo, encabezado de columna */
}

/* =====================================================================
   PIEZA 1 · LA LÍNEA DEL TIEMPO  ({% pasos %})
   =====================================================================
   Reemplaza las CINCO invenciones que había (una timeline con CSS local en
   requisicion_detalle, burbujas naranjas en pedir, tarjetas por GET en
   salida_crear, prosa «Paso 1 de 2» en recibir, y emoji+h2 en
   embarque_detalle). Ley 07.

   Tres estados y nada más: hecho · actual · (pendiente, el default).
   El color obedece la ley 04 — el naranja marca lo ANDADO y dónde estás;
   lo que falta es gris. Nunca rojo: no llegar todavía no es un error.
   ===================================================================== */
.pasos {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0 0 var(--e-3);
  padding: 0;
}
.pasos .paso {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  position: relative;
}
/* La línea que une un paso con el anterior. Va DETRÁS de las bolitas
   (z-index) y nace en el paso 2 (el primero no tiene de dónde venir). */
.pasos .paso::before {
  content: "";
  position: absolute;
  top: 13px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--hairline);
}
.pasos .paso:first-child::before { display: none; }
.pasos .paso.hecho::before,
.pasos .paso.actual::before { background: var(--orange); }

.pasos .bola {
  position: relative;
  z-index: 1;
  width: 27px; height: 27px;
  margin: 0 auto var(--e-1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--card);
  border: 2px solid var(--hairline);
  color: var(--ink-2);
}
.pasos .paso.hecho .bola {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
/* El paso ACTUAL no se rellena: se ANILLA. Relleno = terminado; anillo =
   «aquí estás parado». Si los dos se rellenaran, el andado y el presente
   se verían igual. */
.pasos .paso.actual .bola {
  border-color: var(--orange);
  color: var(--orange-ink);
  box-shadow: 0 0 0 4px var(--orange-soft);
}
.pasos .txt {
  display: block;
  font-size: var(--t-apoyo);
  color: var(--ink-2);
  line-height: 1.3;
  padding: 0 var(--e-1);
}
.pasos .paso.actual .txt { color: var(--ink); font-weight: 600; }

/* En teléfono la tira de tres o cuatro pasos se aprieta hasta ser ilegible.
   Ahí se cambia por una sola frase honesta: «Paso 2 de 3 · Recibir». El
   texto lo escribe el servidor en .pasos-movil; aquí solo se intercambian. */
.pasos-movil { display: none; }
@media (max-width: 560px) {
  .pasos { display: none; }
  .pasos-movil {
    display: flex; align-items: baseline; gap: var(--e-1);
    font-size: var(--t-apoyo); color: var(--ink-2);
    margin: 0 0 var(--e-3);
  }
  .pasos-movil .cual { font-weight: 700; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
  .pasos-movil .qual { color: var(--ink); font-weight: 600; }
}

/* =====================================================================
   PIEZA 2 · LA CABECERA  ({% cabecera %})
   =====================================================================
   Migas + título + estado + la acción principal, SIEMPRE en el mismo sitio.
   Antes cada pantalla escribía su encabezado desde cero dentro de
   {% block contenido %} (la base solo define 'title' y 'contenido').
   ===================================================================== */
.cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-bottom: var(--e-3);
}
.cabecera .cab-txt { min-width: 0; flex: 1 1 320px; }
.cabecera h1 { margin: 0; }
/* El estado va PEGADO al título, en su misma línea: es un adjetivo del
   folio, no un dato aparte. */
.cabecera .cab-titulo { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
/* Una sola línea de contexto bajo el título — el resto es ruido (ley 01).
   Sin `max-width: 60ch` a propósito: esto NO es prosa, es una tira de
   datos separados por «·»; partirla a media tira se lee peor. */
.cabecera .cab-meta {
  font-size: var(--t-apoyo);
  color: var(--ink-2);
  margin: var(--e-1) 0 0;
}
.cabecera .cab-acciones { display: flex; gap: var(--e-2); align-items: center; flex-shrink: 0; flex-wrap: wrap; }
@media (max-width: 560px) {
  .cabecera { gap: var(--e-2); }
  /* En teléfono la acción principal ocupa el ancho: es el pulgar quien la toca. */
  .cabecera .cab-acciones { width: 100%; }
  .cabecera .cab-acciones .btn { flex: 1; justify-content: center; }
}

/* =====================================================================
   PIEZA 3 · EL BLOQUE DE CAPTURA y EL CAMPO  ({% campo %})
   =====================================================================
   Reemplaza las CINCO maneras que conviven hoy (.form-grid · .form-col ·
   .campo redefinido en 10 plantillas · .fila-op · .grid local en 8).
   Leyes 08 y 10.

   `.captura .campo` va scopeado a propósito: `.campo` a secas ya está
   declarado suelto en diez plantillas y una de esas declaraciones
   (`display:flex`) ya le ganó al atributo `hidden` del navegador y dejó
   asomar un bloque que debía estar oculto (cicatriz en ventas/pedido_form
   y compras/ocs). Scopeado, la pieza nueva no puede repetir ese accidente.
   ===================================================================== */
/* Las columnas son `auto-fill` con TOPE (no `1fr`) a propósito. Con `1fr`, dos
   campos cortos en una pantalla ancha se reparten TODO el ancho: el cuadro de
   «¿cuántas llegaron?» medía 474 px para recibir un número de tres cifras —
   absurdo y, peor, hace que el ojo no sepa qué tan largo se espera el dato. El
   ancho de un campo es una PISTA de cuánto cabe; estirarlo la borra. Lo que
   sobra se queda en blanco, que es lo correcto en un formulario.
   (Lo cazó la revisión en navegador del piloto, 2026-08-01.) */
.captura {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 260px));
  justify-content: start;
  gap: var(--e-3) var(--e-2);
  align-items: start;
}
/* UN CAMPO SUELTO, fuera de la rejilla (2026-08-02).

   El hueco: `.campo` y `.con-tope` solo tenían estilo DENTRO de `.captura`, así
   que un `{% campo %}` dentro de un `<td>`, de un `<details>` o de una fila de
   botones salía crudo — sin rótulo gris, sin borde, sin el error pegado. Por eso
   ninguna pantalla de captura se podía maquetar como tabla con las piezas.

   Se resuelve SIN tocar ninguno de los 28 selectores de abajo, y eso es
   deliberado: el 2026-08-02 se intentó abrirlos con un reemplazo por expresión
   regular y PARTIÓ 28 reglas, dejando todos los campos del ERP en rojo. En CSS
   los selectores se editan uno por uno, o no se editan.

   Aquí el truco es que el envoltorio SIGUE SIENDO `.captura` —así que las 28
   reglas lo alcanzan tal cual— y `display:contents` le quita la rejilla y hasta
   la caja, para que no estorbe dentro de una celda:

       <td><div class="captura suelta">{% campo "cantidad" "¿Cuántas?" %}</div></td>

   Y NO se desanida `.campo` a secas a propósito: diez plantillas lo tienen
   declarado suelto, y una de esas declaraciones (`display:flex`) ya le ganó al
   atributo `hidden` del navegador y dejó asomar un bloque que debía estar oculto. */
.captura.suelta { display: contents; }

/* Un campo que necesita todo el ancho (una dirección, un motivo largo). */
.captura .ancho { grid-column: 1 / -1; max-width: 640px; }
/* Un campo que necesita el doble (un nombre, una razón social). */
.captura .doble { grid-column: span 2; }

/* EL TRÍO DEL TELÉFONO DENTRO DE LA REJILLA (2026-08-18, cazado midiendo la pantalla).

   `.captura .campo select` son DOS clases y le gana a `.tel-fila select`, que es
   una: el selector de país se estiraba a todo lo ancho y dejaba el número en un
   cuadro de **31 px**. No truena, no se ve en la suite —el CSS no se ejecuta ahí— y
   quien captura simplemente no puede teclear.

   `comercial/lead_nuevo` ya lo había descubierto y se lo parchó en su propio
   `<style>`. Ese parche resolvía UNA pantalla; la pieza seguía saliendo rota a
   donde fuera. Aquí, en la casa de las piezas, la pieza se defiende sola (§4c: si
   una pieza no cubre lo que necesitas, se le AGREGA a la pieza). */
.captura .campo .tel-fila select { flex: 0 0 auto; width: auto; min-width: 130px; }
@media (max-width: 560px) {
  /* En teléfono, un campo por renglón y a todo lo ancho del pulgar. */
  .captura { grid-template-columns: 1fr; }
  .captura .doble, .captura .ancho { grid-column: 1 / -1; }
}
/* Dos campos que SON el mismo dato partido (cantidad + unidad). */
.captura .par { display: flex; gap: var(--e-2); align-items: flex-end; }

.captura .campo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.captura .campo > .rotulo {
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: baseline; gap: var(--e-1);
}
.captura .campo > .rotulo .req { color: var(--orange-ink); font-weight: 700; }
/* La ayuda va DEBAJO del campo, no dentro del placeholder: el placeholder
   se borra justo cuando escribes, que es cuando más falta hace (ley 02).
   Y pesa MENOS que su propia etiqueta, o la jerarquía queda al revés. */
.captura .campo > .ayuda {
  font-size: var(--t-apoyo);
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1.4;
  margin: 0;
}
/* Todos los controles del bloque miden lo mismo de alto: tres datos cortos
   son UN renglón, no tres pisos (era el defecto de la pantalla de Entradas). */
.captura .campo input,
.captura .campo select,
.captura .campo textarea { width: 100%; }
/* …menos el control ESCONDIDO de `{% subir %}` (25-sep-2026): con el 100 % de arriba
   la casilla invisible del archivo medía lo que la página y la empujaba a lo ancho
   (1,945 px a 1400, cazado en «Solicitar nota de crédito»). Escondido es de 1 px. */
.captura .campo input.sr-only { width: 1px; }

/* EL DESPLEGABLE QUE SE BUSCA (`buscable=`, R-313): la caja va pegada ARRIBA de su
   lista y mide lo mismo, para que se lean como un solo control. La escribe
   `mely_campos.js`; fuera de una `.captura` (un filtro suelto) también va a lo ancho
   de su campo. Sin lupa dibujada: este CSS no lleva imágenes (se copia entero dentro
   de las maquetas); el ejemplo «Busca por nombre…» ya dice qué es. */
.campo input.busca-en-lista { width: 100%; box-sizing: border-box; }
.campo .busca-cuenta { margin: 0; }

/* --- El campo con TOPE a la vista -----------------------------------
   Ley 02 en su forma más pura: en vez de un párrafo que diga «no puedes
   recibir de más», el número pendiente vive DENTRO del campo, junto al
   cursor. El <input> pierde su borde y lo pone la caja, para que el tope
   se lea como parte del mismo control y no como una etiqueta pegada. */
.captura .con-tope {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1);
  border: 1.5px solid var(--hairline);
  border-radius: 12px;
  background: #fff;
  padding-right: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.captura .con-tope input {
  border: none; background: transparent; box-shadow: none;
  /* ⚠️ EL NÚMERO GANA AL RÓTULO (2026-08-04). Tenía `min-width: 0` y el tope
     `flex-shrink: 0`, así que en una columna angosta el input se encogía hasta
     63 px y un monto de 875.50 se leía «87». El dato que se está CAPTURANDO no
     puede quedar cortado por un texto de apoyo: el que cede es el tope.
     8ch cabe un importe con centavos; más allá, el tope baja de renglón. */
  flex: 1; min-width: 8ch;
}
.captura .con-tope input:focus { outline: none; box-shadow: none; }
/* El anillo de foco lo pinta la CAJA, no el input: si lo pintara el input,
   el aro saldría por dentro del borde y se verían dos marcos. */
.captura .con-tope:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(253,107,0,.12);
}
.captura .con-tope .tope {
  font-size: var(--t-apoyo);
  color: var(--ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* Cede el ancho antes que el input, y si de plano no cabe se va al renglón de
     abajo (el `flex-wrap` de la caja) en vez de aplastar el número. */
  flex-shrink: 1;
}
/* Pasarse del tope NO es un error de captura todavía (quizá de verdad llegó
   de más y lo va a autorizar el gerente): ámbar de «cuidado», no rojo de
   «está mal». Ley 04. */
.captura .con-tope.pasado { border-color: var(--warning); }
.captura .con-tope.pasado .tope { color: #8a5a00; font-weight: 600; }

/* --- El error, junto a su campo (ley 10) -----------------------------
   Hoy el ERP tiene 338 `messages.error` y UNA sola marca de error por
   campo: todo error de captura sale como banner hasta arriba, lejos del
   campo que lo causó, y en 8 pantallas además se pierde lo tecleado. */
.captura .campo.malo input,
.captura .campo.malo select,
.captura .campo.malo textarea,
.captura .campo.malo .con-tope,
/* (6-oct-2026) Y fuera de `.captura`: la casilla que falló se pone en rojo en
   cualquier pantalla cuando el rebote dice cuál fue (`mely_campos.js`). */
.campo.malo input:not([type=checkbox]):not([type=radio]),
.campo.malo select,
.campo.malo textarea {
  border-color: var(--critical);
  box-shadow: 0 0 0 3px rgba(224,53,43,.14);
}
.captura .campo > .mal {
  display: flex; align-items: flex-start; gap: 5px;
  font-size: var(--t-apoyo);
  color: var(--critical-ink);
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

/* --- Campo APAGADO por dependencia ----------------------------------
   Ley 02: si «Almacén destino» necesita que antes elijas la empresa, el
   campo se APAGA — no te lo grita en mayúsculas dentro del placeholder
   («— PRIMERO ELIGE LA EMPRESA —», como hoy en Crear orden de compra). */
.captura .campo.esperando { opacity: .55; }
.captura .campo.esperando > .rotulo { color: var(--ink-3); }
.captura .campo.esperando input,
.captura .campo.esperando select,
.captura .campo.esperando textarea { background: var(--card-2); cursor: not-allowed; }

/* =====================================================================
   PIEZA 4 · EL PIE DE ACCIÓN  ({% acciones %})
   =====================================================================
   Ley 05 y el fin del empate: hoy hay 238 botones secundarios contra 174
   principales, y la única diferencia entre ambos es el color del borde.
   El botón que MANDA se rellena; el resto se queda de contorno.

   El pie va PEGADO a lo que guarda, con su línea de separación: un
   formulario repartido entre columnas ya perdió un cambio en silencio
   (lección de Tipos de gasto, 2026-07-28).
   ===================================================================== */
.acciones {
  display: flex; align-items: center; gap: var(--e-2);
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  padding-top: var(--e-3);
  margin-top: var(--e-3);
}
/* Lo que empuja a la derecha (un «Cancelar» o una nota) va tras esto. */
.acciones .a-der { margin-left: auto; }
/* ⚠️ `.acciones-pegadas` NO es `.acciones`: son dos clases distintas y el selector
   de arriba nunca le acertaba. La nota de la barra de guardar de la ficha del
   cliente llevaba desde el 2026-08-19 saliendo del tamaño del cuerpo, gritando
   junto a su botón (cazado el 2026-09-15 al ponerle su gemela a la ficha del
   proveedor). Sólo lo ve el navegador: el CSS no se ejecuta en la suite. */
.acciones .a-nota,
.acciones-pegadas .a-nota { font-size: var(--t-apoyo); color: var(--ink-3); }

/* El botón PRINCIPAL de un pie de acción: relleno, no contorno. Solo dentro
   de .acciones y .cabecera, para no repintar los ~174 `.btn` que ya existen
   en el ERP mientras dura la mudanza pantalla por pantalla. */
.acciones .btn-manda,
.cabecera .btn-manda {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.acciones .btn-manda:hover,
.cabecera .btn-manda:hover { filter: brightness(.94); background: var(--orange); color: #fff; }

@media (max-width: 560px) {
  /* En teléfono el principal ocupa el renglón completo y va PRIMERO en la
     lectura, aunque en pantalla ancha viva a la izquierda de los demás. */
  .acciones { gap: var(--e-1) var(--e-2); }
  .acciones .btn-manda { flex: 1 1 100%; justify-content: center; }
  .acciones .a-der { margin-left: 0; }
}

/* =====================================================================
   PIEZA 5 · LO ACCIONABLE PESA MÁS  (ley 05)
   =====================================================================
   En «Necesidades», de once renglones solo dos tenían botón — y pesaban lo
   mismo que los nueve que no piden nada. Estas dos clases invierten eso.
   ===================================================================== */
/* El renglón que SÍ pide algo de ti. */
/* EL RENGLÓN CHICO DENTRO DE UNA CELDA DE TABLA (el `sub=` del estándar, pero en
   una bandeja: «Quedan 6 días» bajo la fecha, «81,130 sin pedimento de salida»
   bajo la cifra).

   ⚠️ NACIÓ DE UN DEFECTO QUE SÓLO VIO LA FOTO (2026-09-12, Comercio exterior).
   `.tabla .sub` existía y sólo pintaba el color: el `<small>` seguía siendo
   EN LÍNEA, así que el dato de apoyo se montaba encima de la cifra y se leía
   «78,11078,110». Con la suite en verde, porque el CSS no se ejecuta ahí (§4).

   En una celda de número el renglón chico se alinea a la derecha, como su
   cifra; en una de texto, a la izquierda. */
.tabla tbody td small.sub {
  display: block; margin-top: 2px;
  font-size: var(--t-apoyo, 11.5px); font-weight: 500; line-height: 1.3;
  color: var(--ink-3); white-space: normal;
}
.tabla tbody td.num small.sub { text-align: right; }
/* El renglón chico que PIDE algo («Reclamar al proveedor · 3 días fuera de plazo») va en
   rojo y corto: lo que hay que revisar se lee; una leyenda gris y larga no (17-oct-2026). */
.tabla tbody td small.sub.reclamar { color: var(--critical-ink, #C0392B); font-weight: 600; }
@media (max-width: 640px) {
  /* La tabla es ficha: el rótulo lo pone `data-th` a la izquierda y el valor va
     a la derecha, así que el renglón chico se alinea con su valor.
     ⚠️ Y OCUPA EL RENGLÓN ENTERO (7-oct-2026, foto a 390 px de Comercio exterior).
     En la ficha la celda es un flex que se parte (`flex-wrap`); el renglón chico
     que bajaba solo medía lo que su texto, así que el corto se quedaba pegado a la
     IZQUIERDA y el largo —que sí llenaba el renglón— salía a la derecha: dos
     renglones iguales alineados distinto. Con el renglón entero, el `text-align`
     de aquí es el que manda siempre. */
  .tabla tbody td small.sub { text-align: right; flex: 1 1 100%; }
}

/* T8/F7 · LA EXCEPCIÓN EN UNA TABLA DE BANDEJA: una raya, NUNCA un relleno.
   `tr.pide` (abajo) es la forma VIEJA —pinta la fila entera— y se queda por las
   pantallas que ya la usan; toda tabla nueva usa `tr.aprieta`. Lo pidió Pablo
   con nombre y apellido: «el amarillo me hace pensar que es parte del diseño
   para no ver todas las filas de un solo color». Un relleno pinta media tabla y
   deja de señalar; una raya sigue señalando aunque haya varias.
   Es la gemela de `.tabla.pares tr.par-excepcion`, para tablas de columnas. */
.tabla tbody tr.aprieta td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
/* En teléfono la tabla se vuelve ficha y el «primer td» deja de ser una columna:
   la raya se muda al renglón entero para que no se pierda. */
@media (max-width: 640px) {
  .tabla tbody tr.aprieta td:first-child { box-shadow: none; }
  .tabla tbody tr.aprieta { box-shadow: inset 3px 0 0 var(--orange); }
}

.tabla tbody tr.pide td { background: var(--orange-soft); }
.tabla tbody tr.pide:hover td { background: #FFE9D6; }
.tabla tbody tr.pide td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
/* Lo mismo, para una TARJETA (ley 06: lo distinto va en tarjeta, lo uniforme en
   tabla — así que la mitad de lo accionable del ERP no vive en una fila). Faltaba,
   y cada pantalla con tarjetas se tallaba su propio filo de color: tres lo hicieron
   con tres naranjas distintos antes del 2026-08-02, que es como el color deja de
   significar una sola cosa (ley 04). */
.tarjeta.pide { background: var(--orange-soft); box-shadow: inset 3px 0 0 var(--orange); }

/* El renglón ANULADO: sigue ahí —una fila que desaparece deja a quien la capturó
   sin saber si la registró o la soñó— pero tachado y apagado, porque ya no cuenta.
   Legible a propósito: es historia, no basura (ley 04, gris = ya pasó).
   Nació con las notas de crédito anuladas (2026-08-02); `finanzas/anticipos.html`
   hace lo mismo con un `style=` propio y puede mudarse aquí cuando se toque —hoy
   no, porque su prueba fija la cadena «line-through» dentro del HTML. */
/* ==========================================================================
   PIEZA 14 · PESTAÑAS  ({% pestanas %})
   ==========================================================================
   Nació de una queja de Pablo (2026-08-04): navegar y filtrar se veían IGUAL
   —la misma pastilla naranja, apiladas, hasta once juntas— y no se sabía qué
   hacía cada una. La regla que sale de ahí, para todo el ERP:

       · PESTAÑA · cambia de pantalla · va arriba, bajo el título · SUBRAYADA
       · FILTRO   · recorta lo que ya ves · pegado a su tabla · EN PASTILLA

   Por eso aquí NO hay border-radius ni fondo: la diferencia tiene que verse de
   reojo, sin leer. La línea de abajo es la que hace de riel: la pestaña activa
   la pinta de naranja y el resto se apoya en ella.
   ========================================================================== */
.pestanas {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 0;
  border-bottom: 1px solid var(--linea, #E5E1DA);
}
.pestanas .pestana {
  display: inline-flex; align-items: center; gap: 8px;
  /* 44 px de blanco del dedo (§2.9) sin que el texto crezca: el relleno manda. */
  min-height: 44px; padding: 10px 16px;
  text-decoration: none; color: var(--ink-2, #6B6862);
  font-size: 14px; font-weight: 500;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;   /* se monta sobre el riel para que el subrayado lo tape */
}
.pestanas .pestana:hover { color: var(--ink, #23211E); background: var(--gris-suave, #FAF9F7); }
.pestanas .pestana.activa {
  color: var(--orange-ink, #A24B10);
  border-bottom-color: var(--orange, #F2711C);
}
/* La burbuja de «te toca» sigue las mismas reglas de color que en los chips. */
.pestanas .cuenta {
  display: inline-block; min-width: 20px; padding: 1px 7px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--amber-soft, #FDF0D5); color: var(--amber-ink, #8A5A00);
}
.pestanas .pestana.activa .cuenta { background: var(--orange-soft, #FDEBDC); color: var(--orange-ink, #A24B10); }
/* En teléfono las pestañas BAJAN de renglón (6-oct-2026). Hasta hoy rodaban de
   lado y un guion arrastraba la activa a la vista — y al hacerlo cortaba a la
   primera: en Tarjetas corporativas se leía «imientos y pagos | Cargos en
   reclamación». Una pestaña cortada no se puede tocar ni leer. Ninguna pantalla
   del ERP pasa de tres pestañas (Comercio exterior y la cartera tienen tres), así
   que a lo más son dos renglones de 44 px, y todas se ven enteras. */
@media (max-width: 640px) {
  .pestanas { flex-wrap: wrap; }
  .pestanas .pestana { white-space: nowrap; }
}

/* La fila de SUMA de una tabla: cierra la columna, no compite con los datos.
   Se agregó como pieza (§2.9) porque la pidieron DOS pantallas — el estado de
   cuenta de Pago a proveedores y los totales por moneda del calendario de pagos,
   que la tenía tallada a mano. Sin fondo fuerte: es un cierre, no una alarma. */
.tabla tbody tr.suma td { border-top: 2px solid var(--linea, #E5E1DA); background: var(--gris-suave, #FAF9F7); }

/* T2/F3 · LA SECCIÓN DENTRO DE UNA TABLA DE COLUMNAS  ({% tabla_seccion %})
   Gemela de `.tabla.pares tr.par-seccion`. Existe para que «una tabla, no
   varias» se pueda cumplir en una bandeja partida por moneda o por empresa:
   antes eso eran DOS tablas con los mismos encabezados, que es la manera más
   común de romper la regla sin darse cuenta.
   Sin fondo: es una raya con nombre, no una alarma (T8). */
.tabla tbody tr.tab-seccion td {
  border-top: 1px solid var(--linea, #E5E1DA);
  padding: 16px 12px 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2); background: transparent; white-space: nowrap;
}
.tabla tbody tr:first-child.tab-seccion td { border-top: 0; padding-top: 2px; }
/* La casilla de grupo (19-sep-2026) vive DENTRO de la raya y se viste como ella:
   la etiqueta global de los formularios le quitaba las mayúsculas y el peso. */
.tabla tbody tr.tab-seccion td label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;
  font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit;
}
.tabla tbody tr.tab-seccion td label input { width: auto; max-width: none; margin: 0; }
/* `{% tabla_seccion … liga= %}` (29-sep-2026): el «Abrir» de la sección, a la derecha
   y con la letra de un botón, no la de la raya en mayúsculas. */
.tabla tbody tr.tab-seccion td .sec-liga {
  float: right; margin: -4px 0 0 12px; text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 600;
}
.tabla tbody tr.tab-seccion td .sub {
  margin-left: 10px; font-size: 11.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--ink-3);
}
/* En teléfono la tabla se vuelve ficha (`td { display: flex }` con el rótulo en
   un `::before`): una sección no es un par rótulo-valor, así que recupera su
   renglón entero y se queda sin `::before` — si no, sale con una viñeta vacía
   y alineada a la derecha como si fuera un dato. */
@media (max-width: 640px) {
  .tabla tbody tr.tab-seccion { display: block; border-bottom: 0; padding: 0; }
  .tabla tbody tr.tab-seccion td { display: block; text-align: left; white-space: normal; }
  .tabla tbody tr.tab-seccion td::before { content: none; }
  /* El renglón chico de una sección se alinea con su título, no con la columna de
     números: en modo ficha la regla general manda los `small.sub` a la derecha, y
     un «4» suelto del lado contrario al «DÓLARES» no se lee como su pareja. */
  .tabla tbody tr.tab-seccion td .sub { display: block; margin: 2px 0 0; text-align: left; }
  .tabla tbody tr.tab-seccion td .sec-liga { float: none; display: inline-flex; margin: 8px 0 0; }
}
.tabla tbody tr.anulada td { opacity: .55; text-decoration: line-through; }
.tabla tbody tr.anulada td .badge { text-decoration: none; }
/* Lo repetido que NO aporta (un «—», un «sin fecha aún» en las once filas)
   se apaga en vez de gritar. Ley 03.

   La regla va SUELTA, no anidada bajo `.tabla`, y ésa es la corrección de un
   defecto real: nació como `.tabla .callado` porque el caso que la inspiró
   («Necesidades») era una tabla. Fuera de una tabla la pieza se pintaba negro
   pleno — o sea, el tag CORRÍA, no marcaba error, y no hacía nada. Un fallo en
   silencio, justo lo que el §4.7 del ERP prohíbe: quien la usara en una ficha o
   en un párrafo juraría haber apagado un dato que seguía gritando igual.
   Lo cazó el agente de `comercial/autorizaciones.html` el 2026-08-02, leyendo el
   CSS antes de confiar en la pieza. */
.callado { color: var(--ink-3); font-weight: 400; }

/* =====================================================================
   PIEZA 6 · EL SEGMENTADO DE OPCIONES  ({% opciones %})
   =====================================================================
   Para elegir UNA de dos, tres o cuatro cosas cortas y excluyentes (la
   revisión de calidad: pasa · en revisión · rechazar). Reemplaza la fila de
   radios con emoji y la explicación colgando de cada uno.

   Distinto de `.seg` (que ya existe para los niveles del RBAC y vive sobre
   fondo gris): éste va sobre la tarjeta, con el elegido en naranja de marca.
   ===================================================================== */
/* ⚠️ EL FONDO ES DEL GRUPO Y LA RAYA ES UN HUECO (2026-09-19). Las rayas entre
   opciones eran un `border-right` por opción, y eso sólo sabe dibujar la raya de
   la DERECHA: cuando una opción se pasa al renglón de abajo —que es justo lo que
   pasa en el teléfono— las dos quedaban pegadas sin nada en medio. Ahora el
   hueco de 1 px deja ver el fondo del grupo, y la raya sale sola entre columnas
   Y entre renglones, sin que el CSS tenga que adivinar dónde corta la línea. */
.opciones { display: inline-flex; flex-wrap: wrap; gap: 1px; border: 1.5px solid var(--hairline); border-radius: 12px; overflow: hidden; background: var(--hairline); }
.opciones .op {
  position: relative;
  display: flex; align-items: center;
  padding: 9px 16px;
  font-size: var(--t-cuerpo);
  color: var(--ink-2);
  background: #fff;
  cursor: pointer;
  /* ⚠️⚠️ NUNCA `white-space: nowrap` AQUÍ: se traga la etiqueta ENTERA Y EN
     SILENCIO (2026-09-19, cazado a 390 px en la ficha del cliente, paso «Vender
     sin IVA»). Con nowrap una etiqueta larga —«El agente de Mely (hoy: ninguna
     ficha está marcada como el nuestro…)»— medía 755 px dentro de un grupo de
     324 px; el `overflow: hidden` de arriba, que está para redondear las
     esquinas, la cortaba a media palabra. Y no es un desbordamiento: NO hay
     barra, NO hay puntos suspensivos, NO se puede deslizar. Quien elige desde el
     teléfono decide con media frase (§4.7, nada se esconde en silencio).
     `min-width: 0` + el ajuste de línea hacen que ninguna opción pueda ser más
     ancha que su grupo, así que la pieza aguanta la etiqueta que le pongan. */
  min-width: 0;
  overflow-wrap: break-word;
  /* Cuando el grupo no cabe y parte en dos renglones, las opciones del renglón
     de abajo se estiran hasta la orilla: sin esto quedaba un hueco gris (el
     fondo del grupo) junto a la última (23-sep-2026, «¿Con qué agente
     aduanal?» a 1400 px). En un solo renglón no cambia nada: el grupo mide lo
     que miden sus opciones y no sobra espacio que repartir. */
  flex: 1 1 auto;
  transition: background .15s, color .15s;
}
.opciones .op input { position: absolute; opacity: 0; pointer-events: none; }
/* Apiladas (`vertical=True`): una respuesta por renglón, cada una del ancho del
   grupo. Para etiquetas que son frases cortas dentro de una celda de tabla. */
.opciones.vertical { display: flex; flex-direction: column; }
.opciones .op:hover { background: var(--card-2); }
.opciones .op:has(input:checked) { background: var(--orange); color: #fff; font-weight: 600; }
.opciones .op:focus-within { outline: 2px solid var(--orange); outline-offset: -2px; }
/* La opción destructiva elegida (rechazar) sí se pinta de rojo: ahí el rojo
   SÍ significa lo que dice — algo se va a detener. Ley 04. */
.opciones .op.corta:has(input:checked) { background: var(--critical); }
/* Qué significa cada opción: UNA línea bajo el segmentado, no un párrafo
   colgando de cada radio (ley 03 — se dice una vez, no tres). */
.opciones-que { font-size: var(--t-apoyo); color: var(--ink-3); margin: var(--e-1) 0 0; }
/* Con `rotulo=`, el grupo va en un <fieldset> para que su <legend> lo nombre ante
   un lector de pantalla. El navegador le pone borde y relleno propios a todo
   fieldset: aquí se los quitamos, porque el marco ya lo dibuja `.opciones`. */
.opciones-grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.opciones-grupo > .rotulo { padding: 0; margin-bottom: var(--e-1); }
/* En el teléfono el segmentado ocupa el ancho completo. ⚠️ `flex: 1 1 auto` y no
   `flex: 1`: con `flex: 1` (base 0) las opciones se reparten el renglón A LA
   FUERZA, así que una etiqueta larga quedaba metida en una columna de 108 px y
   bajaba diez renglones. Con base `auto`, la que no cabe se pasa ella sola al
   renglón de abajo, ocupa todo el ancho y ahí sí acomoda su texto — las cortas
   («Pasa · En revisión · Rechazar») siguen cabiendo las tres en su renglón. */
@media (max-width: 460px) {
  .opciones { display: flex; width: 100%; }
  .opciones .op { flex: 1 1 auto; justify-content: center; text-align: center; padding: 10px 8px; }
}

/* =====================================================================
   PIEZA 7 · EL BLOQUE QUE APARECE SOLO  (ley 02)
   =====================================================================
   La casilla «pedir autorización del gerente» no tiene por qué estar a la
   vista mientras no la necesites: aparece cuando la cantidad se pasa del
   tope, y se explica ELLA MISMA en ese momento (ley 02).

   El bloque nace VISIBLE y el JS lo ESCONDE — nunca al revés. Si se escribiera
   `display:none` por defecto y el JS lo revelara, bastaría con que el script no
   cargara (tablet vieja, red mala, un error más arriba en la página) para que la
   casilla desapareciera PARA SIEMPRE y el almacenista no pudiera declarar que
   llegó de más. Es el mismo patrón progresivo que ya usa `.calidad-recepcion`
   con su clase `js-activo`: primero funciona sin JS, luego el JS afina.
   ===================================================================== */
.si-hace-falta {
  margin-top: var(--e-3);
  padding: var(--e-2) 15px;
  border-radius: 12px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.35);
  font-size: var(--t-apoyo);
  color: #8a5a00;
  line-height: 1.5;
}
.si-hace-falta label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.si-hace-falta input { width: auto; flex-shrink: 0; margin-top: 2px; }
/* Con JS: se pliega hasta que de verdad haga falta. La clase la pone el script,
   así que sin script nunca se pliega. */
.si-hace-falta.js-puede-plegar:not(.hace-falta) { display: none; }

/* =====================================================================
   PIEZA 8 · LOS DATOS DE UN EXPEDIENTE  ({% ficha %})
   =====================================================================
   ⭐⭐ Desde el 26-sep-2026 se dibuja como LOS CUADROS DEL ESTADO DE CUENTA
   (`.ec-bloque`): renglones apretados, rótulo a la izquierda y dato a la derecha,
   en cuadros angostos. Pablo: «no soporto ese formato que usas siempre… cámbialo
   de donde lo saques, no quiero que me lo propongas más». Hablaba de la forma
   anterior de esta pieza —rótulo gris en mayúsculas ARRIBA y el dato abajo,
   repartidos a lo ancho de la tarjeta—; la había rechazado ya el 21-sep al elegir
   «Papeles del camión». Se cambió AQUÍ, en la pieza, para que las 135 pantallas
   que la usan cambien solas y ninguna nueva pueda volver a la forma vieja.

   UNA sola columna angosta (460 px), aunque traiga muchos datos: el río de blanco
   entre rótulo y dato es su queja vieja —«mis ojos tienen que ir hasta la
   izquierda para ver qué es y hasta la derecha para ver cuánto»—, y el primer
   ensayo en tres columnas se volvió a leer como rejilla (foto del 26-sep).
   ===================================================================== */
dl.ficha {
  display: block;
  max-width: 460px;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--card, #fff);
  overflow: hidden;
}
dl.ficha > h3 {
  margin: 0; background: var(--acc, #FD6B00); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; padding: 6px 11px; text-transform: uppercase;
}
dl.ficha > div {
  min-width: 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 5px 11px;
  border-bottom: 1px solid var(--hairline);
}
dl.ficha dt {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
  margin: 0;
}
dl.ficha dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}
dl.ficha dd.vacia { color: var(--ink-3); font-weight: 400; }   /* ley 10: el hueco se ve hueco */
/* R-321 (8-oct-2026) · el dato de apoyo DEBAJO de la cifra (T5b) y el total con su
   peso (T10), para los cuadros que lo piden: la cuenta clara del préstamo. */
dl.ficha dd .ficha-sub {
  display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3);
  margin-top: 1px; white-space: normal;
}
/* `marcas=` (13-oct-2026) · el cuadro que dice si cuadra: la ✓ o la ✕ junto al dato
   —con su lugar reservado, para que las cifras de arriba y de abajo sigan alineadas—
   y la raya de la excepción a la izquierda del renglón (T8: raya, no relleno). */
/* La marca va FUERA del renglón del texto (en su propio carril a la derecha): con un
   nombre largo —el exportador de un pedimento— se iba sola al renglón de abajo y
   dejaba un hueco. Así el dato parte en dos renglones y la marca no se mueve. */
dl.ficha.con-marcas dd { position: relative; padding-right: 22px; }
dl.ficha .ficha-marca { position: absolute; right: 0; top: 0; width: 16px; text-align: center; font-weight: 700; }
dl.ficha .ficha-marca.ok { color: var(--success-ink, #1D6F42); }
dl.ficha .ficha-marca.mal { color: var(--critical-ink, #C0392B); }
dl.ficha > div.ficha-mal { box-shadow: inset 3px 0 0 var(--critical-ink, #C0392B); }
dl.ficha > div.ficha-mal .ficha-sub { color: var(--critical-ink, #C0392B); }
dl.ficha > div.ficha-falta { box-shadow: inset 3px 0 0 var(--warning, #F5A623); }
dl.ficha > div.ficha-total { border-top: 1px solid var(--ink-3); }
dl.ficha > div.ficha-total dt { font-weight: 700; color: var(--ink); }
dl.ficha > div.ficha-total dd { font-weight: 700; font-size: 14px; }
/* Varios cuadros de ficha lado a lado (la cuenta clara de cada expediente del
   préstamo, R-321): se acomodan solos y en el teléfono bajan uno por renglón. */
.fichas-en-fila { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 var(--e-3, 16px); align-items: flex-start; }
.fichas-en-fila > dl.ficha { flex: 1 1 340px; }
/* Una ficha que sigue a una rejilla de captura (el dato que el ERP llena solo,
   debajo de los que la persona teclea — el régimen fiscal del proveedor,
   2026-09-11) toma el mismo aire que un renglón más de la rejilla. Sin esto
   salía pegada al último campo, como si fuera su ayuda. Lo vio la foto. */
.captura + .ficha { margin-top: var(--e-3); }

/* =====================================================================
   ARREGLO · LA BARRA SUPERIOR SE SALÍA DEL TELÉFONO (2026-08-01)
   =====================================================================
   Hallazgo de la revisión en navegador del piloto. En una pantalla de 390 px
   (iPhone 14/15) la barra de arriba medía 560: se salía 170 px. Y como el
   `body` lleva `overflow-x: clip`, no aparece barra de scroll — el pedazo que
   sobra simplemente SE RECORTA. O sea que en un teléfono el botón «Cerrar
   sesión» quedaba fuera de alcance, sin ninguna señal de que estaba ahí.

   No lo trajo el rediseño: se midió también en Consulta y en Mi día, dos
   pantallas que nadie ha tocado, y las dos daban los mismos 560 px. Llevaba
   ahí desde que la barra creció con el lente de empresa. Las medias existentes
   se detienen en 1240 y 1080 px; abajo de eso nadie siguió apretando.

   La cura respeta lo que Pablo ya decidió: el lente de empresa SE QUEDA en
   todas las pantallas (decisión suya, comentada en mely_erp.css). Lo que cede
   es lo demás — el logo encoge, las pastillas se aprietan, y «Cerrar sesión»
   se vuelve un ícono con su etiqueta para lector de pantalla.
   ===================================================================== */
@media (max-width: 620px) {
  header.topbar { padding: 0 10px; gap: 8px; }
  .topbar .logo { height: 22px; }
  .topbar-right { gap: 7px; min-width: 0; }
  /* El lente puede apretarse, pero nunca desaparecer. */
  .lente-empresa { gap: 4px; min-width: 0; }
  /* ⚠️ EL BLANCO DEL DEDO: 44 px (§2.9). Medido en el ensayo del 2026-08-15 con
     un iframe de 390 px: las dos pastillas salían de 27 px de alto — y son el
     control que decide QUÉ EMPRESA estás viendo, en TODAS las pantallas. Un
     dedo que falla ahí cambia lo que se lee sin que nadie lo note. El alto se
     da con `min-height`, no con más `padding`, para que el texto no crezca ni
     el lente empuje al resto de la barra.
     ⚠️ EL `min-height` SE MUDÓ (revisión de UX §6, 2026-08-15): aquí solo cubría
     hasta 620 px y la tablet se quedaba con pastillas de 27 px. Ahora vive junto
     a los otros controles del riel, en el bloque de 900 px de `mely_erp.css`, que
     es todo el rango en que el menú está colapsado. Lo que se queda aquí es lo
     que de verdad es del teléfono chico: apretar el relleno y la letra. */
  .lente-pill { padding: 4px 8px; font-size: 11.5px; }
  .nav-user { gap: 7px; padding-left: 7px; }
  .nav-avatar { width: 26px; height: 26px; font-size: 12px; }
  /* «Cerrar sesión» pasa a ícono. El texto se va del ojo, NO del lector de
     pantalla: el `aria-label` del botón lo sigue diciendo. */
  .nav-logout { font-size: 0; padding: 6px 9px; line-height: 1; }
  .nav-logout::after { content: "⏻"; font-size: 15px; }
}
@media (max-width: 400px) {
  /* Teléfono chico: el logo se va (el ☰ y el título de la pantalla ya ubican). */
  .topbar .logo { display: none; }
}
/* La campana de «Avisos al teléfono» (23-sep-2026) es un ícono más a la derecha: a
   390 px la barra se salía 19 px y el botón de salir quedaba cortado. Abajo de 430 px
   se aprietan los huecos y las pastillas; nada se esconde. */
@media (max-width: 430px) {
  header.topbar { padding: 0 6px; }
  .topbar-right { gap: 3px; }
  .nav-user { gap: 3px; padding-left: 4px; }
  .lente-pill { padding: 4px 5px; }
  .nav-toggle { padding: 4px 5px; }
  /* 18-oct-2026: llegó «Mi rúbrica» (✍️) y con Avisos + Mi seguridad la barra volvió a
     salirse (396 px a 390, 371 a 360; botón de salir cortado). Apretar huecos otra vez
     sólo aplaza el próximo ícono, así que esta vez cede algo de verdad:
     — la bolita con la inicial se va: es adorno (no abre nada; el nombre ya se fue a
       1240 px), y se lleva 30 px;
     — y la RED para el siguiente ícono: la barra puede encoger y lo que encoge son las
       pastillas del lente, con «…» («Mely Mé…»), nunca los íconos ni el botón de salir. */
  .nav-avatar { display: none; }
  .topbar-right, .lente-empresa { flex-shrink: 1; min-width: 0; }
  .lente-pill { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .nav-user { flex-shrink: 0; }
}
@media (max-width: 380px) {
  /* Un Android chico (360 px): todavía 23 px de más. La letra de las pastillas baja
     un punto y los huecos se cierran; el blanco del dedo (44 px de alto) no se toca. */
  .topbar-right { gap: 2px; }
  .nav-user { gap: 2px; padding-left: 3px; }
  .lente-empresa { gap: 3px; }
  .lente-pill { padding: 4px 4px; font-size: 10.5px; }
  .nav-toggle { padding: 4px 3px; }
  .nav-avatar { width: 24px; height: 24px; }
}

/* =====================================================================
   IMPRESIÓN
   =====================================================================
   Los papeles que salen al cliente tienen su propia hoja (documentos/
   papel.html). Esto es solo para cuando alguien imprime una PANTALLA: la
   línea del tiempo y los pies de acción no significan nada en papel. */
@media print {
  .pasos, .pasos-movil, .acciones, .cabecera .cab-acciones { display: none !important; }
}

/* =====================================================================
   PIEZA 8 · LA BARRA DE CHIPS  ({% chips %})
   =====================================================================
   Diecisiete pantallas escribían sus chips a mano y el color no decía nada:
   todo lo no-activo era del mismo gris, así que «Esperan mi firma · 3» se veía
   idéntico a «Todas», que no pide nada. Ley 04.

   La estructura (`.filtros-chips`, `.badge`) ya vivía en mely_erp.css; aquí
   solo va lo que la pieza AGREGA: el contador y su lectura.
   ===================================================================== */
.filtros-chips .cuenta {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 980px;
  background: rgba(0, 0, 0, .10);
  font-variant-numeric: tabular-nums;
}
/* Sobre el naranja sólido del chip activo, el gris translúcido desaparece. */
.filtros-chips .activo .cuenta { background: rgba(255, 255, 255, .28); }

/* PIEZA 8, forma SELECTOR (2026-09-23): la misma barra de chips como un
   interruptor en una cápsula — UNA opción puesta, en blanco y en relieve. Para
   elegir cómo LEER la pantalla (pesos/dólares, con/sin estimados), no para
   cambiar de lista. Aprobada por Pablo en la maqueta de El margen. */
.selector { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #E9E9EC; max-width: 100%; }
.selector a, .selector button { border: 0; background: transparent; font-family: inherit; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 7px 14px;
              border-radius: 999px; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.selector a:hover, .selector button:hover { color: var(--ink); }
.selector a[aria-current="true"], .selector button[aria-current="true"] { background: var(--card); color: var(--ink);
                                   box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06); }
.selector a:focus-visible, .selector button:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 1px; }
.selectores { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }

/* =====================================================================
   UTILIDAD · CUÁNTO LLEVA ESPERANDO  ({% desde %})
   =====================================================================
   Tres pantallas se lo tallaron por separado con frases distintas. Una fecha
   suelta obliga a restar mentalmente contra hoy; el dato que de verdad se usa
   para decidir es cuánto lleva parado. Ley 03: la fecha exacta se queda, pero
   apagada.
   ===================================================================== */
.desde { display: inline-block; line-height: 1.35; }
.desde .callado { font-size: var(--t-apoyo); }

/* =====================================================================
   PIEZA 7 · EL ESTADO VACÍO  ({% vacio %}) — dos correcciones
   =====================================================================
   1 · SU TÍTULO ERA MÁS GRANDE QUE EL DE LA SECCIÓN QUE LO CONTIENE.
       `mely_erp.css` le da 22 px al h2 del vacío, y el título de un bloque
       son 19 px (--t-titulo). O sea: «no hay nada» gritaba más fuerte que
       el nombre de la tabla — exactamente al revés de la ley 05, y en el
       ERP entero, no en una pantalla. Lo cazó el agente de
       `comercial/mediciones.html` el 2026-08-02 comparando los dos tamaños
       en la misma pantalla.
   2 · NO TENÍA MODO COMPACTO. Una pantalla con cinco bloques vacíos se
       volvía un muro de cinco cajas de 60 px de alto. `{% ficha %}` ya
       tenía `compacta=`; ésta no. Tres pantallas lo resolvieron con CSS
       local antes de que existiera esta regla.
   ===================================================================== */
.estado-vacio h2 { font-size: var(--t-titulo); }

/* El vacío que vive DENTRO de una tarjeta ya está enmarcado por ella: no
   necesita 60 px de aire propio. Se activa con {% vacio … compacto=True %}. */
.estado-vacio.compacto { padding: var(--e-3) var(--e-2); }
.estado-vacio.compacto .emoji { font-size: 28px; }
.estado-vacio.compacto h2 { font-size: var(--t-cuerpo); margin: var(--e-1) 0 2px; }
.estado-vacio.compacto p { font-size: var(--t-apoyo); max-width: 40ch; margin-bottom: var(--e-2); }

/* =====================================================================
   LOS TRES HUECOS QUE PIDIERON VARIOS AGENTES A LA VEZ (2026-08-02)
   =====================================================================
   No son ocurrencias sueltas: cada uno lo reportó, por su cuenta, más de una
   pantalla de la misma tanda. Esa coincidencia es la señal de que el hueco es
   real y no el gusto de quien maqueta.
   ===================================================================== */

/* 1 · EL RÓTULO SUELTO.
   `.rotulo` solo existía anidado bajo `.captura .campo`, así que una etiqueta
   fuera de un campo —«Otro precio», el encabezado de un grupo de radios— obliga
   a copiar seis estilos en línea. Ya pasó en `recibir.html:143` y en
   `comercial/cotizacion.html`. La regla anidada sigue mandando donde aplica;
   ésta solo cubre el caso suelto. */
.contenido .rotulo {
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* 2 · LA TARJETA QUE ENVUELVE UNA CAPTURA.
   `.tarjeta` NO trae relleno propio (mely_erp.css:189 solo le da fondo, radio y
   sombra), así que un `<form class="tarjeta">` deja los campos pegados al filo.
   NO se le pone relleno a `.tarjeta` a secas: 63 pantallas la usan y muchas ya
   ponen el suyo — dárselo a todas sumaría relleno sobre relleno. Se pide a
   propósito con `.tarjeta.acolchada`. */
.tarjeta.acolchada { padding: var(--e-3); }
@media (max-width: 560px) { .tarjeta.acolchada { padding: var(--e-2); } }

/* 3 · EL AVISO GRIS.
   La ley 04 tiene CUATRO significados y `{% aviso %}` solo servía tres: faltaba
   el «ya pasó / no te toca». Sin él, un veredicto que ya se dio se pintaba de
   naranja (como si pidiera algo) o se degradaba a un párrafo suelto — que es lo
   que hicieron dos pantallas de esta tanda. */
.aviso-callado {
  background: var(--card-2);
  color: var(--ink-2);
  border-color: var(--hairline);
}

/* La MONEDA dentro del campo de captura ({% campo moneda="US$" %}).
   Sin esto, la moneda solo se podía poner en el `tope=`, o sea DESPUÉS del
   número: «1000  US$», que se lee como si «US$» fuera parte de la cifra. En un
   papel contable el símbolo va antes, y el ERP ya lo hace así al MOSTRAR dinero
   ({% monto %} pinta el prefijo a la izquierda). Faltaba al CAPTURARLO — lo pidió
   `compras/configuracion.html`, donde se teclean los topes de autorización. */
.captura .con-moneda { padding-left: 12px; }
.captura .con-moneda .ci {
  font-size: var(--t-apoyo);
  color: var(--ink-3);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* La CASILLA de {% campo tipo="checkbox" %}: un cuadrito y su frase, en el mismo
   renglón y ambos clicables. El blanco de dedo lo da el <label> entero, no el
   cuadrito de 13 px.

   SUELTA de `.captura` a propósito (2026-08-12): anidada, una casilla usada en
   una lista fuera del bloque de captura —la de «Planear una ruta», que palomea
   clientes— se quedaba sin esta regla y medía 27 px de alto. El mismo defecto
   que ya tuvo `.callado`: una pieza escondida bajo un contenedor no es pieza.
   Y gana `min-height: 44px`: es un control que se pica con el DEDO (§2.9). */
.campo > .casilla {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  cursor: pointer;
  font-size: var(--t-cuerpo);
  line-height: 1.4;
  padding: var(--e-1) 0;
  min-height: 44px;
}
.campo > .casilla input { width: auto; flex-shrink: 0; }

/* Una pastilla que SÍ se puede partir en dos renglones ({% badge parte=True %}).
   La normal lleva `white-space: nowrap` y está bien: un estado corto no debe
   partirse. Pero cuando adentro va un nombre largo —el de una casilla de
   permisos, por ejemplo— el texto se sale de la caja. */
.badge.parte { white-space: normal; text-align: left; }

/* UN CHIP NUNCA EMPUJA LA PÁGINA DE LADO (ensayo del 2026-08-11, a 390 px).
   La pastilla normal lleva `white-space: nowrap`, y en el teléfono un rótulo
   largo —«Falta la factura · 2 ya no se pueden timbrar con su fecha»— medía
   386 px dentro de una barra de 362 y sacaba el CUERPO ENTERO 10 px a la
   derecha. Un chip feo partido en dos renglones es un chip feo; una página que
   se desliza de lado en el teléfono es la familia de defectos más cara que ha
   tenido este ERP (la barra superior fuera de alcance, la lada rota). Sólo
   dentro de la barra de chips, y sólo cuando NO cabe: en pantalla grande nada
   cambia, porque ahí siempre cabe. */
.filtros-chips .badge { max-width: 100%; white-space: normal; }

/* =====================================================================
   EL TÍTULO DE UN BLOQUE DE TABLA  (.tit-bloque)
   =====================================================================
   Pablo, 2026-08-11: «estiliza y estandariza eso — letras grandes, chicas,
   negritas, normales». El renglón mezclaba tres tratamientos sin criterio.
   La regla son TRES papeles, y ninguno se elige por gusto:

      ① EL TÍTULO    18 px · 700 · tinta principal   -> qué es este bloque
      ② EL DATO      13.5 px · 650 · tinta principal -> los NÚMEROS
      ③ LA ETIQUETA  13.5 px · 400 · tinta secundaria -> las PALABRAS que
                                                         nombran ese número

   O sea: **el número va oscuro y firme; la palabra que lo nombra, apagada.**
   Sirve igual para «5 clientes», «7 facturas» o «23,124.08 ya vencido», y por
   eso se puede poner en CUALQUIER bloque nuevo sin volver a decidir nada.
   ===================================================================== */
.tit-bloque { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
              padding: 18px 18px 0; }
.tit-bloque h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.tit-bloque .meta { font-size: 13.5px; font-weight: 400; color: var(--ink-2); line-height: 1.5; }
.tit-bloque .meta b { font-weight: 650; color: var(--ink); }
.tit-bloque .sep { color: var(--hairline); margin: 0 2px; }

/* =====================================================================
   LA BARRA DE FILTROS SE DECLARA FILTRO  (.barra-filtro)
   =====================================================================
   Pablo, 2026-08-11: «veo demasiados botones, que creo más bien son filtros».
   Cinco pastillas sueltas se leen como acciones. Un rótulo delante las nombra
   por lo que son, y cuesta una palabra.
   ===================================================================== */
.barra-filtro { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
.barra-filtro .filtros-chips { margin: 0; }
.rotulo-filtro { font-size: 12px; font-weight: 650; color: var(--ink-2);
                 letter-spacing: .02em; align-self: center; }

/* =====================================================================
   DE QUÉ EMPRESA DE MELY ES ESTA DEUDA  (.empresa)
   =====================================================================
   Un mismo cliente puede deber DÓLARES a Mely México y a Mely USA: son dos
   acreedores distintos, no un saldo. Pablo pidió el color el 2026-08-11 —«y
   sólo cuando haya dos, si es una sola no pintar»—, que además es lo correcto:
   un color que no distingue nada gasta atención. Quién decide si hay dos vive
   en la vista (`facturas.empresas > 1`), no aquí.

   ⚠️ NINGUNO de los dos tonos es del semáforo (ley 04). Naranja, rojo, verde y
   ámbar ya significan otra cosa, y un tercer sentido los rompería — que es
   exactamente el defecto que Pablo cazó preguntando «¿por qué unas están en
   naranja?». Estos dos hues no se usan en ningún otro lado del ERP: cuando se
   ven, sólo pueden querer decir «empresa». Contraste medido sobre blanco:
   7.8:1 y 10.4:1 (el mínimo para texto es 4.5).

   Y se imprimen: los papeles del ERP llevan `print-color-adjust: exact`, sin lo
   cual el navegador tira los fondos y el estado de cuenta saldría en blanco.
   ===================================================================== */
.empresa { display: inline-block; padding: 3px 9px; border-radius: 980px;
           font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.empresa.e-mely_mx  { background: rgba(13, 110, 139, .13); color: #0B5A70; }
.empresa.e-mely_usa { background: rgba(93, 63, 150, .13);  color: #4A3080; }

/* EL BLANCO DEL DEDO EN UN ENLACE DE TABLA  ({% comment %} .toque-comodo {% endcomment %})
   ===================================================================== 
   Regla de la casa: todo control que se toca en teléfono mide al menos
   44 × 44 px. Un <a> dentro de una celda mide lo que mide su renglón de
   texto — 18 px — y eso basta con un ratón, pero no con un pulgar.

   Nació el 2026-08-11 con la cartera por cliente, donde el nombre del
   cliente ES la única puerta al piso de abajo: fallar ese toque es no
   poder entrar. Sólo en teléfono/tableta: en pantalla grande el relleno
   engordaría todos los renglones sin que nadie lo necesite. */
@media (max-width: 900px) {
  .tabla a.toque-comodo {
    display: inline-block;
    min-height: 44px;
    padding: 13px 0;
    line-height: 1.35;
  }
}

/* =====================================================================
   AL IMPRIMIR — tres arreglos que valen para TODO el ERP (2026-08-02)
   =====================================================================
   Los reportes del ERP se imprimen y se llevan a una junta. Estas tres cosas
   solo se ven en el papel, así que ninguna prueba de Django las alcanza; las
   cazó el agente de los cinco reportes de Inventario mirando la vista previa.
   ===================================================================== */

/* 1 · EL AVISO NO PUEDE DESAPARECER DEL PAPEL.
      `mely_erp.css` esconde `.flash` al imprimir —razonable para un «guardado ✓»—
      pero por ahí salen también avisos que CAMBIAN lo que el papel significa:
      «mostrando 200 de 1,400» o «total parcial: falta el tipo de cambio de dos
      capas». Sin ellos, la hoja parece completa y no lo está: es una truncada
      silenciosa, justo lo que el ERP no debe hacer. Las cajas `.aviso` sí se
      imprimen; ésta es la regla que lo garantiza aunque alguien las anide. */
@media print {
  .aviso { display: flex !important; border: 1px solid #999; }

  /* 2 · UN RENGLÓN NO SE PARTE ENTRE DOS HOJAS, y el encabezado se repite arriba
        de cada una. Sin esto, la segunda hoja de un reporte largo llega sin
        títulos de columna y hay que adivinar qué es cada número. */
  .tabla tr { break-inside: avoid; page-break-inside: avoid; }
  .tabla thead { display: table-header-group; }
  .tabla tfoot { display: table-footer-group; }

  /* 3 · UNA TABLA ANCHA NO SE RECORTA. En pantalla `.tabla-scroll` recorta y deja
        recorrer de lado; en papel no hay de dónde recorrer, así que lo recortado
        sencillamente no existe. Antigüedad tiene ocho columnas. */
  .tabla-scroll { overflow: visible !important; }
}

/* ---------------------------------------------------------------------------
   LISTA DENTRO DE UNA CELDA — «Qué lleva» de Salidas y «Por lote» de Consulta
   (Pablo y Operaciones, 2026-08-03). Nació para una pantalla y la segunda la pidió
   el mismo día: por eso vive aquí y no suelta en cada plantilla (ley 03).

   Pablo pidió ver los productos de cada salida sin entrar al expediente, pero
   «que ocupe poco espacio, que no se vea amontonado y que no crezca tanto la
   tabla». Las tres cosas a la vez son el problema: una lista abierta crece, y
   apretarla amontona. La salida es que la lista viva DENTRO de la celda —cada
   producto una línea de bloque, con su propio interlineado apretado— en vez de
   volverse filas nuevas de la tabla. Un camión de cuatro productos sube unos
   milímetros; la tabla sigue teniendo una fila por salida.

   Va aquí y no suelto en la plantilla porque en cuanto una segunda pantalla
   necesite lo mismo (CxC lo necesita ya) tiene que verse IGUAL: si cada una lo
   escribe a mano, se separan sin que nada truene. Ley 03.
   --------------------------------------------------------------------------- */
.lleva { line-height: 1.35; }
.lleva-lista { display: block; min-width: 0; }
.lleva-linea { display: block; font-size: 13px; }

/* ⚠️ EN TELÉFONO la tabla se vuelve tarjeta y cada celda es `display:flex` (rótulo a
   la izquierda, valor a la derecha). Sin el envoltorio `.lleva-lista`, cada producto
   se volvía un HIJO FLEX de la celda y los tres salían LADO A LADO en columnas de
   cuatro letras, ilegibles. Cazado a 390 px el 2026-08-03 — con la suite en verde,
   porque el CSS no se ejecuta en las pruebas. Con el envoltorio la celda tiene dos
   hijos (su rótulo y la lista) y la lista apila los suyos. */
@media (max-width: 640px) {
  .lleva-lista { display: flex; flex-direction: column; align-items: flex-end; }
  /* En la tarjeta del teléfono el alto ya no estorba a nadie: el tope de scroll de
     escritorio aquí solo escondería producto detrás de un gesto que nadie adivina. */
  .lleva { max-height: none; overflow-y: visible; }
}
/* Un tope de altura con voz: pasadas ~6 líneas la celda deja recorrer por dentro
   en vez de estirar el renglón sin fin. No esconde nada —se alcanza todo con la
   rueda— y evita que un embarque de veinte productos aplaste el resto de la lista. */
.lleva { max-height: 8.5em; overflow-y: auto; }


/* ===========================================================================
   PIEZA 13 · LA ZONA DE SOLTAR — «arrastra aquí el archivo»
   ---------------------------------------------------------------------------
   El XML es EL CAMINO, no un atajo: por eso la zona es grande y es lo primero
   que se ve, y capturar a mano es la liga chiquita de abajo — con su motivo a la
   vista, para que nadie la tome por costumbre (ley 05).
   =========================================================================== */
.soltar {
  border: 2px dashed var(--linea, #E3E3E6); border-radius: 18px;
  padding: 40px 24px; text-align: center; background: #FAFAFA;
  transition: border-color .15s, background .15s;
  /* ⚠️⚠️ ESTO NO ES ADORNO: SIN ELLO LA PANTALLA SE DESBORDA EN EL TELÉFONO.
     El `<input type="file">` va con `.sr-only` —visible para el lector de
     pantalla, tapado para el ojo— y `.sr-only` es `position:absolute`. Sin un
     ancestro posicionado, se ancla al DOCUMENTO y se va hasta los 727 px en un
     viewport de 386: la página entera se recorre de lado. Medido en el
     navegador a 390 px el 2026-08-09; la suite estaba en verde, porque el CSS
     no se ejecuta en las pruebas. Es exactamente la familia del peor defecto de
     la historia del ERP (la barra superior fuera de alcance en el teléfono). */
  position: relative;
}
.soltar.encima { border-color: var(--marca, #FD6B00); background: #FFF3EA; }
.soltar-ic {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 15px;
  background: #FFF3EA; color: #B34E00;
  display: flex; align-items: center; justify-content: center;
}
.soltar-ic svg { width: 27px; height: 27px; }
.soltar-t { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: var(--ink, #1D1D1F); }
.soltar-s {
  margin: 0 auto 20px; font-size: 13.5px; color: var(--ink-2, #6E6E73);
  line-height: 1.55; max-width: 52ch;
}
/* El blanco del dedo: 44 px. Es un `<label>` que abre el selector de archivos, y
   en teléfono es LA puerta de esta pantalla. */
.soltar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; cursor: pointer;
}
.soltar-elegido:empty { display: none; }
.soltar-elegido {
  margin: 14px 0 0; font-size: 13.5px; font-weight: 600; color: #1D6F42;
}
/* ⭐ R-190 · LA ZONA CHICA. La de 40 px de aire nació siendo lo ÚNICO de su
   pantalla; al comprobar un cargo de la tarjeta lleva el cargo del banco arriba
   y dos caminos abajo, y a ese tamaño no queda pantalla. Pablo, 10-sep: «haz
   más chico el recuadro de subir el XML». */
.soltar.compacta { padding: 20px 18px; border-radius: 14px; }
.soltar.compacta .soltar-ic {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 10px;
}
.soltar.compacta .soltar-ic svg { width: 20px; height: 20px; }
.soltar.compacta .soltar-t { font-size: 15.5px; margin-bottom: 4px; }
.soltar.compacta .soltar-s { margin-bottom: 14px; font-size: 12.5px; max-width: 60ch; }
.soltar.compacta .soltar-elegido { margin-top: 10px; }

/* El otro camino: existe siempre, se ve chiquito, y dice POR QUÉ existe. */
.soltar-obien {
  margin: 22px 0 8px; text-align: center; font-size: 13px;
  color: var(--ink-3, #8a8a90);
}
/* ⭐⭐ R-190 · LOS OTROS CAMINOS, COMO BOTONES. Eran una liga subrayada de 13 px:
   sin blanco de dedo en el teléfono, y con el texto tan chico que la de la foto
   se leía como si sólo aceptara PDF (Pablo, 10-sep: «mejora los botones para
   subir un archivo»). Fantasma y no naranja a propósito: son la excepción, y la
   ley 05 dice que lo accionable pesa más, no que lo excepcional se esconda. */
.caminos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 10px; margin-top: 4px;
}
.cam {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left; height: auto; min-height: 64px; padding: 12px 14px;
  cursor: pointer; white-space: normal;
}
.cam-t { font-weight: 600; font-size: 13.5px; color: var(--ink, #1D1D1F); }
.cam-s {
  font-weight: 400; font-size: 12px; color: var(--ink-3, #8a8a90); line-height: 1.45;
}
@media (max-width: 560px) {
  .soltar { padding: 30px 16px; }
  .soltar.compacta { padding: 18px 14px; }
  .soltar-btn { width: 100%; }
}

/* ===========================================================================
   PIEZA 14 · EL COTEJO — «lo que el ERP ya comparó»
   ---------------------------------------------------------------------------
   ⭐ NARANJA, NO ROJO, y es a propósito (ley 04). «No coinciden» no quiere decir
   que esté mal: puede ser una excepción pactada o un dato viejo en la ficha.
   Rojo diría «está roto» y no lo está. El rojo se guarda para lo que FRENA.

   ⭐ Y ninguno se esconde cuando sale bien: el ojo aprende las posiciones y de
   ahí en adelante solo busca los que no traen palomita (ley 03).
   =========================================================================== */
.cotejo-t { margin: 0 0 4px; }
.cotejo-s {
  margin: 0 0 16px; font-size: 13.5px; color: var(--ink-2, #6E6E73);
  max-width: 70ch; line-height: 1.55;
}
.cotejo { list-style: none; margin: 0; padding: 0; }
.cotejo li {
  display: grid; grid-template-columns: 24px minmax(11ch, 20ch) 1fr;
  gap: 4px 12px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--linea-suave, #F0EFF2);
}
.cotejo li:last-child { border-bottom: 0; }
.ck-ic {
  grid-row: span 1; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.ck-bien .ck-ic { background: rgba(29,111,66,.10); color: #1D6F42; }
.ck-ojo  .ck-ic { background: rgba(245,158,11,.16); color: #8a5a00; }
.ck-frena .ck-ic { background: rgba(224,53,43,.10); color: #C0392B; }
.ck-q { font-size: 13.5px; font-weight: 600; color: var(--ink-2, #6E6E73); }
.ck-v { font-size: 14px; color: var(--ink, #1D1D1F); line-height: 1.5; }
.ck-ojo .ck-v b, .ck-ojo .ck-v { color: var(--ink, #1D1D1F); }
/* Qué hacer al respecto: señalar sin decir qué hacer es dejar a alguien parado. */
.ck-h {
  display: block; margin-top: 3px; font-size: 13px; font-style: normal;
  color: var(--ink-2, #6E6E73);
}

/* ⚠️ EN TELÉFONO la rejilla de tres columnas deja la pregunta en cuatro letras.
   Se apila: símbolo + pregunta arriba, el valor debajo a todo lo ancho. La
   posición fija se conserva —el símbolo sigue siendo lo primero de cada
   renglón— que es lo que hace que el ojo pueda barrer sin leer. */
@media (max-width: 640px) {
  .cotejo li { grid-template-columns: 24px 1fr; }
  .ck-v { grid-column: 2; }
}


/* ===========================================================================
   PIEZA 15 · LA PUERTA — el marcador fijo de una bandeja de pendientes
   ---------------------------------------------------------------------------
   ⭐ «Lo que se ve muchas veces se lee por su FORMA, no por su texto» (Pablo,
   2026-08-08). Dos huecos, siempre en el mismo sitio, con rótulos que nunca
   cambian. En cero se apagan a gris — el número NO desaparece, porque un hueco
   que se va rompe la forma que el ojo ya aprendió.

   Ley 04 al pie de la letra: rojo = algo está mal y hay que actuar · naranja =
   es tu turno · gris = ya pasó o no te toca. JAMÁS rojo para «todavía no
   llegas».
   =========================================================================== */
.puertas { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin: 0 0 20px; }
@media (max-width: 820px) { .puertas { grid-template-columns: 1fr; } }

.puerta {
  display: flex; flex-direction: column; background: #fff; border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
  padding: 24px; text-decoration: none; color: inherit;
  border: 1.5px solid transparent;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
a.puerta:hover {
  border-color: var(--marca, #FD6B00); transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0,0,0,.07), 0 14px 34px rgba(0,0,0,.08);
}
a.puerta:focus-visible { outline: 2px solid var(--marca, #FD6B00); outline-offset: 3px; }

.puerta-cab { display: flex; gap: 15px; align-items: flex-start; margin: 0 0 22px; }
.puerta-ic {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
  background: #FFF3EA; color: #B34E00; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.puerta h2 { margin: 2px 0 4px; font-size: 21px; letter-spacing: -.3px; }
.puerta-que { margin: 0; font-size: 13.5px; color: var(--ink-2, #6E6E73); line-height: 1.5; }

.marcador { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 10px; }
.mrc { border-radius: 14px; padding: 16px 14px; text-align: center; }
.mrc-n {
  display: block; font-size: 38px; font-weight: 700; line-height: 1;
  letter-spacing: -1.5px; font-variant-numeric: tabular-nums;
}
.mrc-t { display: block; margin-top: 7px; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.mrc-mal { background: rgba(224,53,43,.08); }
.mrc-mal .mrc-n, .mrc-mal .mrc-t { color: #C0392B; }
.mrc-turno { background: rgba(245,158,11,.13); }
.mrc-turno .mrc-n, .mrc-turno .mrc-t { color: #8a5a00; }
/* En cero: gris. Un día bueno se ve vacío sin leerse. */
.mrc.apagado { background: #F6F6F7; }
.mrc.apagado .mrc-n { color: #C4C4C9; }
.mrc.apagado .mrc-t { color: #9a9aa0; }

.mrc-pie { margin: 0 0 20px; font-size: 12.5px; color: var(--ink-3, #8a8a90); text-align: center; }
/* El blanco del dedo: 44 px. En teléfono es LA puerta de la pantalla. */
.puerta-btn { align-self: flex-start; min-height: 44px; pointer-events: none; margin-top: auto; }
@media (max-width: 560px) { .puerta-btn { align-self: stretch; justify-content: center; } }

/* --- LOS MOTIVOS: «te toca» no se explica, se enumera --- */
.motivos { list-style: none; margin: 0 0 6px; padding: 0; }
.motivos li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--linea-suave, #F0EFF2);
}
.motivos li:last-child { border-bottom: 0; }
.mot-n {
  min-width: 2.5ch; text-align: right; font-weight: 700; font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.mot-mal .mot-n { color: #C0392B; }
.mot-turno .mot-n { color: #8a5a00; }
.mot-q { font-size: 14px; color: var(--ink, #1D1D1F); line-height: 1.45; }

/* --- LA VUELTA: lo que YA entregaste. Rótulos fijos, números que cambian. --- */
.vuelta {
  display: flex; gap: 8px 26px; align-items: center; flex-wrap: wrap;
  background: #FAFAFA; border: 1px solid var(--linea, #EFEEF0);
  border-radius: 14px; padding: 13px 20px;
}
.vuelta .v-t {
  font-size: 12px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3, #8a8a90);
}
.v-d { font-size: 13.5px; color: var(--ink-2, #6E6E73); font-variant-numeric: tabular-nums; }
.v-d b { color: var(--ink, #1D1D1F); font-weight: 650; }
/* ⚠️ EL BLANCO DEL DEDO: 44 px. Medido en el navegador el 2026-08-09 y salía en
   32 — el mismo defecto que ya se cazó dos veces («Anular la nota» 26 px,
   «Corregir el adelanto» 37). El tamaño VISUAL no cambia: solo el área que se
   puede picar. Y se mide el control DE ESTA pantalla, no solo los del chrome:
   que la primera pasada no lo viera es justo el punto de la regla. */
.vuelta .btn-liga {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 4px;
}
/* ⚠️ SOLO LA ÚLTIMA empuja hacia la derecha. Con `margin-left:auto` en TODAS,
   una `.vuelta` con dos ligas —el control del mes de Conciliación: «mes
   anterior» y «mes siguiente»— se desbordaba y **la página entera se recorría
   64 px de lado** en el teléfono. Medido a 390 px el 2026-08-09; con una sola
   liga (el caso de la entrada de CxP) el defecto no aparecía, y por eso vivió
   escondido hasta que una segunda pantalla usó la misma pieza. */
.vuelta .btn-liga:last-child { margin-left: auto; }
@media (max-width: 560px) { .vuelta .btn-liga { margin-left: 0; } }


/* ===========================================================================
   UNA TABLA QUE **NO SE PARTE** EN TELÉFONO — la ley 06, dicha al revés
   ---------------------------------------------------------------------------
   Por omisión el ERP convierte toda `.tabla` en tarjetas a ≤640 px, y para casi
   todas está bien. Pero la ley 06 dice **lo uniforme va en TABLA**, y hay tablas
   donde partirla es perder justo lo que las hace legibles: la de Conciliación
   tiene tres columnas que se leen por su POSICIÓN —En el ERP · Su póliza · En el
   banco— y en tarjetas dejan de ser columnas y se vuelven tres renglones de
   texto por concepto.

   ⚠️ **Esto ya pasó, y solo se vio al angostar la ventana**: la maqueta del piso
   2 traía la regla de tarjetas y Pablo lo cazó — *«cada movimiento es un
   bloque»*. El diseño lo dejó escrito: en Conciliación la tabla **se recorre de
   lado**. Y también dejó escrito cómo se verifica: *«al construir, esto se MIDE,
   no se lee»*.

   Va con `.tabla-scroll` alrededor, que es quien da el recorrido lateral.
   =========================================================================== */
@media (max-width: 640px) {
  .tabla.no-se-parte { min-width: 34rem; }
  .tabla.no-se-parte thead { display: table-header-group; }
  .tabla.no-se-parte tbody tr { display: table-row; border-bottom: 0;
    padding-bottom: 0; margin-bottom: 0; }
  .tabla.no-se-parte tbody td { display: table-cell; text-align: left;
    justify-content: initial; padding: 8px 10px; }
  /* El rótulo del `::before` es la muleta de la tarjeta: aquí el encabezado
     vuelve a estar arriba, y repetirlo en cada celda sería decirlo dos veces. */
  .tabla.no-se-parte tbody td::before { content: none; }
  .tabla.no-se-parte tfoot td { display: table-cell; }
  .tabla.no-se-parte tbody td.num,
  .tabla.no-se-parte thead th.num { text-align: right; }
  /* La ANGOSTA (23-sep-2026, Avisos al teléfono): una tabla de dos columnas —qué
     aviso y su palomita— cabe entera en 390 px. Pedirle 34rem la obligaba a
     recorrerse de lado para llegar a la palomita. */
  .tabla.no-se-parte.angosta { min-width: 0; }
  /* La raya de sección también vuelve a ser renglón de tabla (la de tarjeta es bloque
     y se quedaba corta, sin cruzar la columna de la palomita). */
  .tabla.no-se-parte tbody tr.tab-seccion { display: table-row; }
  .tabla.no-se-parte tbody tr.tab-seccion td { display: table-cell; }
  /* Sin tarjeta, el renglón chico vuelve a ir bajo su texto, no a la derecha. */
  .tabla.no-se-parte tbody td:not(.num) small.sub { text-align: left; }
}
/* ===========================================================================
   FIRMAR AL ALCANCE DEL PULGAR (Pablo, 23-sep-2026) — `.acciones.al-pulgar`
   ---------------------------------------------------------------------------
   El aviso al teléfono deja a la persona en la pantalla de la firma; «Firmar» y
   «Rechazar» quedaban donde cayeran, a veces hasta abajo y chicos. En el teléfono
   la fila se queda FIJA abajo, con botones grandes. Cuando rechazar pide motivo,
   `.solo-pulgar` («Rechazar…») lleva al desplegable del motivo y lo abre. En la
   computadora no cambia nada.
   =========================================================================== */
.solo-pulgar { display: none; }
@media (max-width: 640px) {
  .acciones.al-pulgar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0;
    display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--hairline);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--card); box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
  }
  /* El que firma va solo y ancho en el primer renglón; los demás, abajo y más chicos
     (tres botones iguales partían «Rechazar (digo que no)» en tres renglones). */
  .acciones.al-pulgar .btn { flex: 1 1 0; min-width: 0; min-height: 44px; font-size: 13.5px; line-height: 1.2;
    justify-content: center; text-align: center; white-space: normal; padding: 6px 10px; }
  .acciones.al-pulgar .btn-manda { flex: 1 1 100%; min-height: 52px; font-size: 17px; }
  .acciones.al-pulgar .a-nota { display: none; }
  .acciones.al-pulgar .solo-pulgar { display: inline-flex; }
  /* Que la barra no tape lo último de la pantalla ni los botones flotantes. */
  body:has(.acciones.al-pulgar) main.contenido { padding-bottom: 170px; }
  body:has(.acciones.al-pulgar) .report-fab,
  body:has(.acciones.al-pulgar) .ayuda-fab { bottom: 160px; }
  /* Las burbujas (reportes e ideas) suben con su botón: se quedaban a 44 px, encima de
     «Firmar» y «Rechazar» (1-oct-2026). Misma distancia de siempre: 26 px sobre el botón. */
  body:has(.acciones.al-pulgar) .report-badge { bottom: 186px; }
}

/* UN CAMPO EN UNA COLUMNA DE CIFRAS (26-sep-2026, «Si le das lo que pide»): los
   litros se teclean DENTRO de la cuenta del tanque, alineados con las cifras de
   arriba y de abajo. Angosto y a la derecha: `.tabla td .campo` (mely_erp.css) le
   pide 13rem, que en una cuenta de dos columnas se come media tabla. */
.tabla td.num .campo { min-width: 0; width: 8rem; max-width: 100%; margin-left: auto; }
.tabla td.num .campo input { text-align: right; }

/* UNA CIFRA QUE SE CAPTURA EN SU CELDA, con la casilla escrita a mano (2-oct-2026,
   «Por apartar»: su `name` tiene que verse literal en la plantilla, así que no puede
   ser `{% campo %}`). La casilla mide lo que una cifra de hasta 9 dígitos con dos
   decimales y su punto —12 caracteres, 13ch con holgura— más su relleno y su borde
   (14 px + 1.5 px por lado, la regla global de mely_erp.css). Con los 110 px que tenía,
   «4000.25» se leía «4000.2».
   ⚠️ `min-width` y no `width`: la regla global de los controles (`input:not(...)`,
   mely_erp.css) pone `width: 100%` con más peso que cualquier clase, y en una celda de
   tabla ese 100 % es lo que mida el encabezado («Apartar») — por eso los 110 px de
   antes nunca se aplicaron (medido en el navegador: la casilla medía 64 px por dentro).
   El mínimo sí gana, y en teléfono, donde la celda es todo el renglón, el 100 % sigue
   mandando. */
input.casilla-cifra {
  min-width: calc(13ch + 31px);
  font-variant-numeric: tabular-nums;
}

/* La columna de la palomita en una tabla angosta: se centra y no crece. */
.tabla.angosta th.palomita-col, .tabla.angosta td.palomita-col { width: 90px; text-align: center; }


/* ===========================================================================
   LA TABLA DE CONCILIACIÓN — sus bandas y sus tres palomitas
   ---------------------------------------------------------------------------
   Ley 04 a rajatabla: rojo = algo está mal y hay que actuar · verde = ya está ·
   gris = no le toca. La banda del cajón rojo va arriba de todo, y su rótulo
   dice lo que es sin adornos: «todavía nadie sabe qué son».
   =========================================================================== */
.tabla tr.banda td {
  background: #FAFAFA; font-size: 11px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3, #8a8a90); padding: 9px 12px;
  border-bottom: 1px solid var(--linea, #EFEEF0);
}
/* Las tres columnas de palomita: angostas, centradas y con el color como único
   significado. Angostas a propósito — lo que se lee es el símbolo, no la celda. */
/* Sin `width` fijo: un ✓ no necesita 7 rem, y dárselos hacía que la tabla
   creciera 64 px más allá de su `min-width` — con lo que la PÁGINA entera se
   recorría de lado en el teléfono aunque el envoltorio recortara bien. El
   encabezado («En el ERP») ya da el ancho que hace falta. Medido a 390 px. */
.tabla td.ck-bien, .tabla td.ck-falta, .tabla td.ck-no_toca {
  text-align: center; font-weight: 700; white-space: nowrap;
}
.tabla td.ck-bien { color: #1D6F42; }
.tabla td.ck-falta { color: #C0392B; }
.tabla td.ck-no_toca { color: #C4C4C9; }

/* UN SOLO NÚMERO ABAJO. Apagado cuando es cero: un mes sano no debe gritar. */
.cierre-pie {
  margin: 16px 0 0; text-align: right; font-size: 14px;
  color: var(--ink-2, #6E6E73);
}
.cierre-pie b {
  font-size: 20px; color: #C0392B; font-variant-numeric: tabular-nums;
  margin-left: 6px;
}
.cierre-pie.apagado b { color: #C4C4C9; }


/* ===========================================================================
   PIEZA 16 · LA PALOMITA DE SELECCIÓN
   ---------------------------------------------------------------------------
   El blanco del dedo, aplicado a un control que de suyo mide 13 px: la etiqueta
   envuelve la casilla y le da un área de 44 × 44 que sí se puede atinar en el
   teléfono. El tamaño VISUAL de la casilla no cambia.
   =========================================================================== */
.palomita {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; cursor: pointer; margin: -10px 0;
}
.palomita input { width: 17px; height: 17px; cursor: pointer; }
/* Congelada, no escondida (B3): se ve gris y su razón (`data-porque`) sale en
   la burbuja de `.btn.congelado` al pasar el cursor o al tocarla —nunca en un
   `title=`, que en el teléfono no se ve—. «Como la vez pasada», 24-sep-2026. */
.palomita.congelada { cursor: not-allowed; position: relative; }
.palomita.congelada input { cursor: not-allowed; opacity: .45; }

/* «Como la vez pasada» · el aviso de lo recién registrado y su «Deshacer», juntos. */
.lote-hecho { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.lote-hecho .aviso { flex: 1 1 320px; margin: 0; }
/* «Como la vez pasada» · en computadora el «¿Qué es?» no puede empujar la tabla
   fuera de la pantalla: medido a 1400 px, el botón «Registrar» quedaba cortado. */
@media (min-width: 641px) {
  .tabla td[data-th="¿Qué es?"] .campo { min-width: 0; width: 130px; }
  .tabla td[data-th="¿Qué es?"] .campo select { max-width: 100%; }
}
/* «Como la vez pasada» · los renglones de un concepto abierto cuelgan de él. */
.tabla tbody tr.hijo td:nth-child(3) { padding-left: 22px; }


/* Que el envoltorio de una tabla ancha no crezca con su contenido. `min-width:
   0` rompe el `min-width: auto` que traen por omisión los hijos de un grid o un
   flex; sin él, una caja con `overflow` puede seguir empujando a su alrededor.
   ⚠️ NO alcanza para el piso 1 de Conciliación —ver el reporte del 2026-08-09,
   defecto abierto—: ahí la página todavía se recorre 67 px en el teléfono. */
.tabla-scroll { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.app-shell, .tarjeta { min-width: 0; }


/* ===========================================================================
   LOS TRES VEREDICTOS DEL CIERRE (§7.5)
   ---------------------------------------------------------------------------
   Ley 04, y aquí importa más que en ningún lado porque son TRES colores y cada
   uno significa una cosa distinta que hace otra persona:
     🔴 frena     — dinero sin clasificar. Lo resuelve Tesorería. No se negocia.
     🟠 se arregla — le falta su póliza. Un botón. Es tu turno.
     🔵 tú lo explicas — el banco no lo muestra. El contador, con palabras.

   El azul NO es una alarma: es trabajo legítimo del contador y por eso no usa
   ni rojo ni naranja. Un cierre con partidas en conciliación explicadas es un
   cierre bueno, no uno a medias.
   =========================================================================== */
.veredicto {
  border-left: 3px solid; border-radius: 0 12px 12px 0;
  padding: 14px 18px; margin: 0 0 14px;
}
/* ⚠️ CALIFICADO A PROPÓSITO. `.v-t` existía ya en `.vuelta` con
   `text-transform: uppercase`, y sin calificar los dos las reglas se fundían:
   los tres veredictos salían GRITADOS —«FRENA EL CIERRE»— contra la ley 09, y
   de paso el rótulo de la vuelta crecía de 12 a 15 px y competía con su dato.
   Se ve SOLO en el navegador; la suite no ejecuta CSS. */
.veredicto .v-t { margin: 0 0 4px; font-weight: 650; font-size: 15px; }
.veredicto .v-q { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2, #6E6E73);
       line-height: 1.55; max-width: 70ch; }
.veredicto .v-lista { list-style: none; margin: 0 0 10px; padding: 0; font-size: 14px; }
.veredicto .v-lista li { padding: 3px 0; }
    .veredicto .v-lista b { font-variant-numeric: tabular-nums; margin-right: 6px; }
/* Quien no puede entrar a Tesorería lee de quién es el siguiente movimiento. */
.v-quien { margin: 0; font-size: 13.5px; color: var(--ink-2, #6E6E73); }

.v-frena   { border-color: #C0392B; background: rgba(224,53,43,.05); }
.v-frena   .v-t, .v-frena .v-lista b { color: #C0392B; }
/* (Pablo, 30-sep-2026) El dinero sin clasificar AVISA y no frena: ámbar, no
   rojo. Más oscuro que «Se arregla aquí» para que los dos no se confundan. */
.v-avisa   { border-color: #B45309; background: rgba(217,119,6,.07); }
.v-avisa   .v-t, .v-avisa .v-lista b { color: #92400E; }
.v-arregla { border-color: #F59E0B; background: rgba(245,158,11,.07); }
.v-arregla .v-t, .v-arregla .v-lista b { color: #8a5a00; }
.v-explicas{ border-color: #2C6FB5; background: rgba(44,111,181,.05); }
.v-explicas .v-t, .v-explicas .v-lista b { color: #2C6FB5; }

/* El saldo que el ERP ya sabe: se MUESTRA, no se pregunta (ley 02). */
.saldo-leido { font-size: 13.5px; color: var(--ink-2, #6E6E73); margin: 0 0 10px; }


/* ===========================================================================
   EL PLEGABLE — una acción que no pide nada hasta que la piden
   ---------------------------------------------------------------------------
   **De dónde sale** *(Pablo, 2026-08-11, desde producción)*: la pantalla de un
   gasto gastaba TRES tarjetas a página completa —corregir el monto, anotar un
   adelanto, anularlo— en acciones que casi nunca se usan. Textual: *«ocupa toda
   la hoja para acciones que deberían de ser un simple botón o algo muy
   compacto»*.

   Es la ley 05 al revés: lo accionable pesa más que lo que no pide nada, y estos
   formularios NO piden nada — esperan por si acaso. Plegados, la pantalla vuelve
   a contestar su pregunta («¿de qué se compone este gasto?») y las acciones
   siguen a un clic, con su nombre a la vista.

   ⚠️ Plegado NO es escondido: el `<summary>` dice qué hay dentro con todas sus
   letras, y el navegador lo encuentra al buscar en la página. Lo que se esconde
   es el formulario, no la puerta.
   =========================================================================== */
.plegable { border-top: 1px solid var(--hairline, #EFEEF0); }
.plegable:first-of-type { border-top: 0; }
.plegable > summary {
  cursor: pointer; list-style: none;
  /* 44 px de blanco para el dedo (regla de la casa, 2026-08-02): el relleno da
     el alto sin agrandar el texto. */
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 2px; font-weight: 600; font-size: 14px;
  color: var(--orange-ink, #A24A00);
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before {
  content: "＋"; font-weight: 700; font-size: 15px; line-height: 1;
  color: var(--ink-3, #8a8a90);
}
.plegable[open] > summary::before { content: "−"; }
.plegable > summary:hover { text-decoration: underline; }
.plegable > summary .a-nota { font-weight: 400; color: var(--ink-3, #8a8a90); }
.plegable > .cuerpo { padding: 2px 0 14px; }

/* ===========================================================================
   LOS PAPELES DE UN EXPEDIENTE  (papeles/_papeles.html)
   Renglones simples, NO table.tabla: en teléfono la tabla de 4 columnas
   apilaba cada papel en un bloque de 4 renglones con celda vacía (se vio en
   la maqueta del 2026-08-12 a 390 px). Uniforme, pero angosto.
   =========================================================================== */
.papeles-lista { list-style: none; margin: 0 0 4px; padding: 0; }
.papeles-renglon {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 2px; border-bottom: 1px solid var(--hairline, #EFEEF0);
}
.papeles-renglon:last-child { border-bottom: 0; }
.papeles-nombre { display: block; font-weight: 600; font-size: 14px; }
.papeles-sub { display: block; font-size: 12.5px; color: var(--ink-3, #8a8a90); }
.papeles-acciones { display: flex; align-items: center; gap: 8px; }
.papeles-reemplazo { display: inline; }


/* ===========================================================================
   LA FICHA EN PASOS — pieza 18 (2026-08-19)
   ===========================================================================
   Pablo, viendo la ficha del proveedor: *«muchas cosas viven ahí y lo hace
   complejo su configuración y un poco abrumador»*. Eran 28 campos en una torre
   de tarjetas iguales, sin decir por dónde empezar ni qué faltaba.

   La forma la eligió él entre dos maquetas (§5). Dos partes:

   · el RIEL, que se queda quieto a la izquierda y contesta siempre las dos
     preguntas de quien llega —de quién es esta ficha, y qué le falta—;
   · el DOCUMENTO, que se lee de corrido, con líneas finas entre pasos en vez
     de una caja por bloque. Una tarjeta por tema convierte cualquier ficha en
     una torre donde todo pesa igual.

   ⚠️ SE USA EN TRES PANTALLAS (proveedor, producto y cliente). Es pieza, no
   copia: si una ficha se ve distinta de otra, es porque el diseño cambió — no
   porque una se quedó con la versión vieja (§2.9).
   =========================================================================== */
.ficha-b {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  gap: 40px; align-items: start;
}
/* ⚠️⚠️ `minmax(0, 1fr)` Y NO `1fr` — no es una manía, es un defecto medido.
   Un `1fr` pelón lleva de mínimo el ancho de su CONTENIDO sin cortar. Con el
   índice vuelto tira horizontal en teléfono, esa columna se plantaba en 751 px
   y arrastraba la página entera a 771 en una pantalla de 390. `minmax(0,1fr)`
   le dice a la columna que sí puede ser más angosta que lo que lleva dentro, y
   entonces el que se desliza es el índice, no la pantalla. Medido en el
   navegador el 2026-08-18; la suite estaba verde, porque el CSS no se ejecuta
   en las pruebas. */

.ficha-riel { position: sticky; top: 76px; min-width: 0; }
.ficha-riel h1 { font-size: 19px; line-height: 1.3; margin: 0 0 8px; }
.ficha-riel .pastillas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }

/* EL ÍNDICE: qué pasos hay, en cuál estás, y qué le falta a cada uno. Es lo
   único de la pantalla que contesta «¿ya acabé?» sin hacer scroll. */
.ficha-indice {
  list-style: none; margin: 0 0 20px; padding: 0;
  border-left: 2px solid var(--hairline);
}
.ficha-indice a {
  display: block; padding: 7px 0 7px 14px; margin-left: -2px;
  text-decoration: none; color: var(--ink-2); font-size: 14px;
  border-left: 2px solid transparent;
}
.ficha-indice a:hover { color: var(--orange-ink); }
.ficha-indice a.aqui {
  border-left-color: var(--orange); color: var(--orange-ink); font-weight: 600;
}
/* Ley 04: el color ES el significado. Verde lo que ya está, gris lo que puede
   quedarse vacío, rojo lo que de verdad falta o está mal. */
.ficha-indice .listo { float: right; color: var(--success-ink); font-size: 12px; }
.ficha-indice .pend  { float: right; color: var(--ink-3);  font-size: 12px; }
.ficha-indice .mal   { float: right; color: var(--critical-ink); font-weight: 600; font-size: 12px; }

/* ⚠️ NO lleva `>` (cazado en el navegador el 2026-08-19). Los pasos viven dentro
   del <form> de la pantalla, no colgando del `.ficha-doc`: con hijo directo el
   selector no acertaba a ninguno y el documento salía SIN sus líneas — todos los
   pasos pegados, que es exactamente la torre indistinguible que este rediseño
   venía a deshacer. Se veía bien en el HTML y mal en la pantalla. */
.ficha-doc .ficha-paso {
  padding: 0 0 34px; margin: 0 0 34px;
  border-bottom: 1px solid var(--hairline);
}
/* El último de CADA contenedor: el formulario cierra con su barra de guardar, y
   lo que va después (papeles, dar de baja) abre su propio bloque. */
.ficha-doc .ficha-paso:last-child { border-bottom: 0; }
/* ⚠️⚠️ EL NÚMERO DEL PASO NO SE TECLEA: SE CUENTA (2026-09-15, Pablo eligió la
   opción A de la maqueta). Estaba escrito a mano en las tres fichas y mentía en
   las tres, porque los pasos que se ven cambian con lo que es el proveedor, el
   cliente o el producto: el agente aduanal leía «1 2 3 4 7 … 6» (el paso «Cómo
   nos entrega» se esconde entero para quien no vende mercancía, y «Sus
   productos» vive en su propio <form>, después del botón de guardar); un insumo
   interno leía «1 2 3 _ 5 6 7»; y quien sólo puede VER un producto leía «1 … 5
   … 7».

   ⭐ EL CONTADOR VA EN EL `.ficha-num`, NO EN EL `.ficha-paso`. Dos razones, las
   dos medidas en el navegador:
   ① un `.ficha-paso` SIN número existe y es legítimo (la línea de crédito del
      cliente, `cliente_editar.html#credito`, es un bloque colgado de su opción,
      no un paso del documento): contando secciones se habría comido un número y
      todo lo de abajo saldría corrido;
   ② un elemento en `display:none` NO incrementa contadores —así lo manda el CSS,
      y es justo lo que se quiere: el paso que el JS esconde no gasta número, y
      la numeración se recorre SOLA en el mismo instante en que se despalomea
      «Productos». Sin una línea de JavaScript.

   Quien escriba un paso nuevo no tiene que acordarse de renumerar: deja el
   `.ficha-num` vacío y cae en su lugar. Lo vigila
   `administracion/tests_el_numero_del_paso_se_cuenta.py`. */
.ficha-doc { counter-reset: paso; }
.ficha-doc .ficha-num { counter-increment: paso; }
.ficha-doc .ficha-num::before { content: "Paso " counter(paso); }
/* La coletilla de un paso («opcional»). Va en su <span> para que el separador lo
   ponga el CSS: así el rótulo entero sigue siendo UNA sola verdad. */
.ficha-num .ficha-nota::before { content: " · "; }
.ficha-num {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 4px; font-weight: 700;
}
.ficha-titulo { font-size: 20px; font-weight: 650; margin: 0 0 18px; color: var(--ink); }
/* La frase que explica el paso entero, pegada bajo su título. */
.ficha-titulo + .ayuda { margin: -12px 0 18px; }

/* ⭐ UN DOCUMENTO DE PASOS DENTRO DE OTRO BLOQUE (2026-09-17, el elegidor de la
   pre-recepción: la caja → el precio → la orden). Los pasos no son de la PANTALLA
   sino de un bloque de ella —cada contenedor del embarque trae el suyo—, así que el
   título de 20 px se comía al `<h3>` del contenedor, que mide 15.5. La talla se
   AGREGA aquí, a la pieza, y no se escribe a mano en la plantilla que la necesitó:
   el día que otra pantalla anide sus pasos, ya está resuelto. */
.ficha-doc.elegir { margin-top: 16px; }
.ficha-doc.elegir .ficha-paso { padding: 0 0 20px; margin: 0 0 20px; }
.ficha-doc.elegir .ficha-titulo { font-size: 16.5px; margin: 0 0 6px; }
.ficha-doc.elegir .ficha-titulo + .ayuda { margin: 0 0 12px; }
.ficha-doc.elegir .captura { margin-bottom: 12px; }

/* Un subtítulo DENTRO de un paso (las medidas de la lámina, las de la caja).
   No es otro paso: agrupa campos hermanos sin partir el documento. */
.rotulo-paso {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin: 22px 0 8px;
}

/* ── LA ELECCIÓN: un renglón que se pica entero ──
   Contra la casilla chiquita: el blanco es toda la caja, cabe la explicación
   de qué hace esa opción, y lo elegido se ve de un vistazo por el color — no
   hay que buscar una palomita de 13 px. Es lo que vuelve contestable una
   pregunta que antes exigía saber la respuesta de antemano. */
.eleccion {
  display: block; border: 1.5px solid var(--hairline); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  transition: border-color .12s, background .12s;
  /* El blanco del dedo en teléfono: la caja entera ya lo da de sobra. */
  min-height: 44px;
}
.eleccion:hover { border-color: var(--stone); background: var(--paper); }
.eleccion.marcada { border-color: var(--orange); background: var(--orange-soft); }
.eleccion > input { margin-right: 10px; }
/* …y dentro de un campo de `.captura` NO se estira (R-337, 13-oct-2026): el 100 % de
   `.captura .campo input` dejaba la casilla sola y centrada ARRIBA de su título, en
   el alta rápida de Proveedores. El mismo defecto que ya tuvo `.campo > .casilla`. */
.captura .campo .eleccion > input { width: auto; }
.eleccion > b { font-size: 15px; }
.eleccion small {
  display: block; color: var(--ink-2); margin: 3px 0 0 26px; line-height: 1.45;
  text-transform: none;
}
/* Una palabra resaltada DENTRO de la explicación no puede pesar más que el
   título de la opción: `.eleccion > b` es el título; éste es otra cosa. */
.eleccion small b { font-size: inherit; font-weight: 650; color: var(--ink); }
.eleccion:focus-within { outline: 2px solid var(--orange); outline-offset: 2px; }
/* B3 · la opción que hoy no se puede elegir: en su lugar, gris, con su razón
   donde iba la explicación (R-260, 5-oct-2026). Nunca escondida. */
.eleccion.congelada { cursor: not-allowed; background: var(--paper); border-style: dashed; }
.eleccion.congelada:hover { border-color: var(--hairline); }
.eleccion.congelada > input, .eleccion.congelada > b { opacity: .5; }

/* Lo que CUELGA de una elección: se ve colgado, o se lee como un campo suelto
   que no es de nadie. */
.anidadas {
  margin: 10px 0 14px 26px; padding-left: 18px;
  border-left: 2px solid var(--orange-line);
}

/* El botón de guardar no se va al fondo de una ficha de siete pasos. */
.acciones-pegadas {
  position: sticky; bottom: 0; background: var(--card, #fff);
  border-top: 1px solid var(--hairline); padding: 14px 0; margin-top: 10px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

/* El paso donde se suspende o se borra. NO se esconde —esconderlo obliga a
   buscarlo, y quien busca acaba picando cualquier cosa— pero tampoco se pinta
   igual que capturar un nombre (ley 04). */
.zona-peligro .ficha-titulo { color: var(--critical-ink); }
.zona-peligro .acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .ficha-b { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* En teléfono el riel no puede quedarse pegado: se comería media pantalla. */
  .ficha-riel { position: static; }
  /* Y el índice se vuelve una tira que se desliza sola. */
  .ficha-indice {
    display: flex; overflow-x: auto; border-left: 0;
    border-bottom: 2px solid var(--hairline); margin-bottom: 16px;
  }
  .ficha-indice a {
    white-space: nowrap; border-left: 0; margin: 0;
    border-bottom: 2px solid transparent; padding: 10px 12px;
    min-height: 44px; display: flex; align-items: center;
  }
  .ficha-indice a.aqui { border-left: 0; border-bottom-color: var(--orange); }
  /* Las marcas de estado no caben en la tira sin volverla ilegible. */
  .ficha-indice .listo, .ficha-indice .pend, .ficha-indice .mal { display: none; }
}

/* ===================================================================
   LA TABLA DENSA — variante `.tabla.densa` (Pablo, 9-sep-2026)
   ===================================================================
   «Poca info, solo la que quiero ver, y las filas muy gordas… lo que cabe
   en mi pantalla es mucho más en el Excel». En su control de cartera caben
   15 clientes; en la primera maqueta cabían 4.

   Qué la hace densa, y ninguna de las tres es de gusto:
     · UN RENGLÓN ES UN RENGLÓN. Nada cuelga debajo del nombre (eso ya lo
       decía `por_cobrar.html` desde el 2026-08-11; aquí se vuelve regla).
     · EL COLOR VIVE EN LA CELDA, no en una pastilla. Una pastilla dentro de
       una celda numérica engorda la fila y dice lo mismo que el número que
       ya está escrito. En su Excel el color es el relleno de la celda: se
       lee de un vistazo y no cuesta un solo píxel de alto.
     · LOS CEROS SE APAGAN (.cero). En una cartera real la mayoría de los
       cajones de antigüedad están en cero: si compiten con el dato, hay que
       LEER la fila para encontrar lo que importa.

   ⚠️ Se usa donde la tabla es un TABLERO que se recorre con la vista
   (cartera, estado de cuenta). NO en las listas donde cada fila lleva
   botones y se opera de una en una: ahí la altura la pone el botón.
   ------------------------------------------------------------------- */
.tabla.densa thead th { padding: 7px 7px; line-height: 1.2; }
.tabla.densa tbody td { padding: 5px 7px; font-size: 12px; line-height: 1.3; white-space: nowrap; }
.tabla.densa tfoot td { padding: 8px 9px; font-size: 13px; }
/* El nombre es lo único que puede partirse en dos renglones, y con tope: sin
   esto una razón social larga se comía 436 px y empujaba las últimas columnas
   fuera de la pantalla (medido a 1400 px el 9-sep). */
.tabla.densa th.cli, .tabla.densa td.cli { white-space: normal; max-width: 255px; min-width: 155px; }
/* ⚠️ La columna de AVISOS también se parte, y con tope. Sin esto sus pastillas
   —«También nos debe en pesos», «Captúrale la razón social en su ficha»— no
   podían romperse (el `nowrap` de arriba) y se llevaban 374 px de 1,096: por su
   culpa se salían de la pantalla las DOS columnas de antigüedad más urgentes.
   Medido en el navegador el 9-sep-2026; ninguna prueba lo puede ver. */
.tabla.densa th.avisos, .tabla.densa td.avisos { white-space: normal; max-width: 140px; }
/* ⚠️ Y la celda de TEXTO LARGO (`td.largo`: una frase, un domicilio, una razón
   social) se parte cuando no cabe. 47 celdas ya traían la clase y ninguna regla la
   leía, así que el `nowrap` de arriba las dejaba de un renglón: en el expediente del
   viaje, «De dónde sale» empujaba Litros y MXN fuera de la tarjeta y la tabla se
   recorría de lado, cortando «DESTINO» y «LITROS» (R-312, foto de Pablo de
   VIA-00048, 8-oct-2026). Donde ya cabía no cambia nada: sólo se parte la que no
   cabe. Sin piso de ancho a propósito (revisión escéptica): un `min-width` ensanchaba
   también las celdas cortas («Factura») y hacía más anchas tablas que ya cabían. */
.tabla.densa td.largo { white-space: normal; }

/* ⚠️ AQUÍ VIVÍA UN ARREGLO DEL BLANCO DEL DEDO, y salió el 9-sep-2026: el PR #208
   lo resolvió PARA TODO EL ERP —`.tabla td a`, `.migas a` y los chips de filtro
   se mudaron a `@media (max-width: 640px), (pointer: coarse)`—, así que estas
   líneas eran el mismo arreglo dos veces. Regla de Pablo el mismo día: **ningún
   `min-height: 44px` nuevo se escribe suelto**; si una pieza necesita un blanco
   de dedo, va DENTRO de esa media query. El porqué completo:
   `docs/02-decisiones/2026-09-09-el-blanco-del-dedo-vive-donde-hay-dedo.md`. */

/* Los rellenos de celda. Son los mismos cortes del control de cartera de Pablo
   (vigente · 0-30 · 31-60 · +60) y por eso los tonos suben en ese orden. */
.tabla.densa td.cero { color: #B9B6B1; }
.tabla.densa td.v-vigente { background: rgba(26,127,55,.13); color: #146c2e; font-weight: 650; }
.tabla.densa td.v-0-30    { background: rgba(245,158,11,.20); color: #7a5000; font-weight: 650; }
.tabla.densa td.v-31-60   { background: rgba(253,107,0,.26); color: #8f3d00; font-weight: 650; }
.tabla.densa td.v-mas-60  { background: var(--critical, #E0352B); color: #fff; font-weight: 700; }
.tabla.densa td.sin-linea { background: rgba(224,53,43,.13); color: var(--critical-ink); font-weight: 650; }
.tabla.densa td.negativo  { color: var(--critical-ink); font-weight: 650; }
/* En teléfono la fila se vuelve ficha: los ceros y las columnas de crédito se
   apagan, y el rótulo de la celda roja se pinta claro o queda ilegible sobre el
   rojo (sólo la foto a 390 px lo enseña). */
@media (max-width: 640px) {
  .tabla.densa tbody td { white-space: normal; }
  .tabla.densa td.cero, .tabla.densa th.en-movil-no, .tabla.densa td.en-movil-no { display: none; }
  /* (revisión 390 px, 9-oct-2026) Y la celda del nombre también suelta su tope de 255 px:
     en ficha medía 255 de 362, así que su raya de abajo y su relleno se quedaban a dos
     tercios del ancho, y la fila parecía rota. En la tarjeta tiene el ancho entero. */
  .tabla.densa td.cli { min-width: 0; max-width: none; flex-direction: column; align-items: flex-start; text-align: left; gap: 0; }
  .tabla.densa td.cli::before { margin-bottom: 3px; }
  .tabla.densa td.v-mas-60::before { color: rgba(255,255,255,.9); }
  /* Y la columna de avisos suelta su tope de ancho: los 140 px que la mantienen
     angosta en la tabla de escritorio, en modo ficha exprimen cada pastilla en
     una tira de cinco renglones. Aquí tiene la tarjeta entera (12-sep-2026). */
  .tabla.densa td.avisos { max-width: none; }
}

/* La CINTA DE MONEDA: se dice UNA vez sobre el bloque, como el «Montos en DLS»
   de su archivo, para que las cantidades de adentro vayan sin símbolo (ley 03). */
.cinta-moneda {
  display: inline-block; background: var(--acc, #FD6B00); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 6px;
  letter-spacing: .03em; margin-bottom: 6px;
}

/* ===================================================================
   LOS TRES BLOQUES DEL ESTADO DE CUENTA (Pablo, 9-sep-2026)
   ===================================================================
   Su control de cartera abre cada cliente con tres cuadros pegados: quién es,
   cómo va su crédito, y sus notas. Renglones apretados de rótulo-a-la-izquierda
   y dato-a-la-derecha, que se recorren con la vista sin leer.

   Se copia la FORMA, no el color: en su Excel cada cabecera es una barra naranja
   y aquí también, porque es lo que separa un cuadro del otro de un vistazo —
   pero los datos van con la tipografía de siempre, no en negritas de hoja de
   cálculo.
   ------------------------------------------------------------------- */
/* (6-oct-2026) El cuadro del centro —«Lo que el ERP cree que es»— lleva una tabla de
   cuatro columnas con su botón: a 1.15fr medía ~400 px y el botón se salía cortado
   (caminado con las cargas de combustible). Se lleva el ancho que suelta el cuadro
   de «O dile tú qué es», que sólo trae un desplegable. */
.ec-tres {
  display: grid; grid-template-columns: minmax(230px, .9fr) minmax(400px, 1.75fr) minmax(200px, .75fr);
  gap: 12px; margin: 14px 0 0; align-items: start;
}
/* Con el centro más ancho, los tres ya no caben juntos abajo de ~1100 px de pantalla
   (a 1000 se salía 128 px): ahí se apilan, como en el teléfono. */
@media (max-width: 1100px) { .ec-tres { grid-template-columns: 1fr; } }
/* El cuadro del movimiento quedó más angosto: un dato largo («Banco del Bajío Conecta
   (MXN)») se partía con «…» a 1280 px. Aquí se deja bajar de renglón. */
.ec-tres .ec-fila > span:last-child { white-space: normal; overflow-wrap: anywhere; }
/* Lo mismo para UNA fila de dato largo fuera de ese cuadro: la clave del pedimento
   («BA — Importación temporal de envases y contenedores») se cortaba a 390 px
   (caminado el 13-oct-2026). */
.ec-fila.baja > span:last-child { white-space: normal; overflow-wrap: anywhere; }
.ec-bloque { border: 1px solid var(--hairline); border-radius: 12px; background: var(--card, #fff); overflow: hidden; }
.ec-bloque > h3 {
  margin: 0; background: var(--acc, #FD6B00); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; padding: 6px 11px; text-transform: uppercase;
}
.ec-fila {
  display: flex; justify-content: space-between; gap: 12px; padding: 4px 11px;
  font-size: 12.5px; border-bottom: 1px solid var(--hairline);
}
.ec-fila:last-child { border-bottom: 0; }
.ec-fila > span:first-child { color: var(--ink-2); }
.ec-fila > span:last-child { font-weight: 600; white-space: nowrap; text-align: right; }
.ec-fila.fuerte > span:last-child { font-size: 14px; }
/* Los cajones de antigüedad cuelgan de «Vencido total»: la sangría dice que son
   su desglose y no tres cifras más al mismo nivel. */
.ec-fila.sangria > span:first-child { padding-left: 12px; color: #8b8781; }
.ec-nota { padding: 9px 11px; font-size: 12.5px; line-height: 1.5; }

/* ===================================================================
   LOS MISMOS CUADROS, EN DOS Y EN TRES  (Conciliación, 21-sep-2026)
   ===================================================================
   Pablo eligió esta forma para los TRES bloques de «¿Qué es este movimiento?»
   señalando «Papeles del camión»: *«otro formato de tabla más compacto y
   estético, te adjunto un diseño que ya tenemos en varias partes del ERP»*.
   `.ec-tres` ya existía para su control de cartera; `.ec-dos` es el mismo
   reparto cuando el camino elegido pide un formulario y el cuadro de la
   derecha necesita el ancho.
   ------------------------------------------------------------------- */
.ec-dos {
  display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 12px; margin: 14px 0 0; align-items: start;
}
@media (max-width: 900px) { .ec-dos { grid-template-columns: 1fr; } }
/* Un cuadro DENTRO de otro (el lado del banco, dentro del camino elegido) no
   lleva sombra ni margen propio: es una nota, no una tarjeta más. */
.ec-bloque .ec-bloque { margin-bottom: 12px; }

/* ===================================================================
   LA CARPETA DE UNA CUENTA BANCARIA  (R-219, David · 21-sep-2026)
   ===================================================================
   *«poder tener la opción de contraer o desplegar los movimientos de las
   cuentas para poder visualizar solo los movimientos de la cuenta con la que
   estás trabajando»*. El renglón-título de la cuenta existía desde R-118 y era
   un renglón muerto de tabla; ahora es una carpeta que además dice cuántos
   movimientos trae y cuánto falta explicar — lo que hace falta para decidir si
   vale la pena abrirla sin abrirla.
   ------------------------------------------------------------------- */
.carpeta-cuenta {
  border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--card, #fff); margin-bottom: 14px; overflow: hidden;
}
.carpeta-cuenta > summary {
  list-style: none; cursor: pointer; padding: 11px 14px;
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
}
.carpeta-cuenta > summary::-webkit-details-marker { display: none; }
/* El triángulo lo pinta la hoja y no el navegador: el de Safari y el de Chrome
   no son el mismo, y una lista de cuentas con dos marcadores distintos se lee
   como dos cosas distintas. */
.carpeta-cuenta > summary::before {
  content: "\25B8"; color: var(--orange-ink); font-size: 12px; line-height: 1;
}
.carpeta-cuenta[open] > summary::before { content: "\25BE"; }
.carpeta-cuenta > summary:hover { background: var(--paper); }
.carpeta-cuenta .cc-nombre { font-weight: 700; font-size: 15px; }
.carpeta-cuenta .cc-cuantos { color: var(--ink-2); font-size: 13px; }
.carpeta-cuenta .cc-falta { margin-left: auto; color: var(--ink-2); font-size: 13px; }
@media (max-width: 560px) { .carpeta-cuenta .cc-falta { margin-left: 0; } }

/* ===================================================================
   EL CAJÓN: clasificar sin cambiar de pantalla  (Pablo · 21-sep-2026)
   ===================================================================
   *«lo ideal sería poderlo hacer desde la misma pantalla anterior y que se
   desplieguen los 3 bloques debajo del movimiento; en cuanto lo termino se
   vuelve a contraer»*.

   ⚠️ SIN RELLENO. La primera maqueta pintaba el renglón abierto y su cajón de
   durazno, y Pablo lo paró con su propia regla del 11-sep: *«el amarillo me
   hace pensar que es parte del diseño»*. Lo que dice que ese renglón está
   abierto es la raya naranja y su fecha en negritas, no un color de fondo.
   ------------------------------------------------------------------- */
.tabla tbody tr.fila-abierta td { font-weight: 600; }
.tabla tbody tr.cajon > td { padding: 0 0 18px; }
.cajon-cuerpo { border-top: 2px solid var(--orange); padding: 14px 12px 2px; }
/* El verbo del renglón no se parte en dos: «Decir / qué es» se lee como dos
   cosas. Medido en el navegador el 21-sep; ninguna prueba lo ve. */
.tabla td.der .btn { white-space: nowrap; }
/* Los controles de la tabla de captura ocupan su celda. Al pasar los montos de
   `<input>` a mano a `{% campo %}` (§4c) nacieron con el ancho de la pieza —80 px—
   y una cifra de seis dígitos no cabía. */
.tabla.desg td .campo,
.tabla.desg td .campo input,
.tabla.desg td .campo select { width: 100%; box-sizing: border-box; }
/* Y su columna mide lo que mide una cifra de verdad. Sin esto la columna la
   dictaba el ancho del encabezado («Cuánto · MX$») y «286,112.40» no cabía:
   medido en el navegador el 21-sep. */
.tabla.desg th:first-child,
.tabla.desg td:first-child { width: 9.5rem; min-width: 9.5rem; }
/* Un renglón de texto LARGO —la descripción del banco— no es un par
   rótulo-valor: apretado contra su valor, el rótulo se parte en tres renglones
   («Lo que / dice el / banco»). Se acuesta: rótulo arriba, texto abajo. */
.ec-fila.suelta { display: block; }
.ec-fila.suelta > span:last-child { display: block; text-align: left; margin-top: 2px; }
@media (max-width: 640px) {
  /* El renglón del cajón NO es un par rótulo-valor: recupera su renglón entero,
     como ya hace `tr.tab-seccion`. Sin esto el formulario sale centrado y con
     el rótulo de la columna pegado encima. */
  .tabla tbody tr.cajon { display: block; border-bottom: 0; padding: 0; }
  .tabla tbody tr.cajon > td { display: block; text-align: left; white-space: normal; }
  .tabla tbody tr.cajon > td::before { content: none; }
  /* Y la celda de dinero que NO APLICA a este renglón (entró/salió) no se pinta
     en modo ficha: un campo que no aplica no es un hueco — el hueco se enseña
     (ley 10), el que no aplica estorba en cada tarjeta. */
  .tabla tbody td.no-aplica { display: none; }
}

/* ===================================================================
   EL COTEJO DEL BANCO — «lo que dijo el banco» frente a «lo que el ERP cree»
   ===================================================================
   La misma forma que ya usa Tesorería en «¿Qué es este movimiento?», traída a
   Cuentas por cobrar (9-sep-2026). Dos columnas, el hecho externo a la izquierda
   y la interpretación a la derecha: quien conoce una pantalla entiende la otra
   sin que se lo expliquen.
   ------------------------------------------------------------------- */
.cotejo-banco {
  display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hairline);
  border-radius: 12px; overflow: hidden; background: var(--card, #fff); margin-bottom: 10px;
}
.cotejo-banco > div { padding: 12px 14px; font-size: 13px; }
.cotejo-banco .cb-banco { border-right: 1px solid var(--hairline); background: var(--paper-2, #FBFAF9); }
@media (max-width: 700px) {
  .cotejo-banco { grid-template-columns: 1fr; }
  .cotejo-banco .cb-banco { border-right: 0; border-bottom: 1px solid var(--hairline); }
}
.cb-opcion { border-top: 1px solid var(--hairline); padding-top: 9px; margin-top: 9px; }
.cb-opcion:first-of-type { border-top: 0; }
.cb-porque { margin-bottom: 7px; line-height: 1.45; }
.cb-a-mano { margin-top: 10px; border-top: 1px dashed var(--hairline); padding-top: 9px; }
.cb-a-mano > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
/* «No es de un cliente» (21-sep-2026): el último renglón del panel del ERP, con
   la misma raya punteada que «Dilo tú». Es cómo quien cobra depura su lista; la
   nota de al lado dice a dónde se va y que se puede regresar (B4). */
.cb-fuera { margin-top: 10px; border-top: 1px dashed var(--hairline); padding-top: 9px;
            display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cb-fuera .a-nota { font-size: 12.5px; color: var(--ink-3); }
.plegable-tesoreria .tabla.densa td.porque { white-space: normal; max-width: 220px; }
.plegable-tesoreria .tabla.densa td.accion-fila { text-align: right; }
.plegable-tesoreria .tabla.densa td .btn.chico { padding: 4px 10px; font-size: 12px; }

/* ⚰️ AQUÍ VIVÍAN LAS «TIRAS DE RESUMEN» (.resumen-tiras / .tira), los números de
   arriba en una línea. Nacieron el 9-sep-2026 para Depósitos y se fueron el
   12-sep: esa pantalla ahora abre con las SEIS CELDAS de la cabecera fija, que
   es lo mismo pero en el mismo lugar que las otras 277 pantallas. Ninguna otra
   las usaba, y un estilo sin pantalla es un estilo que nadie mantiene y que la
   próxima maqueta copia creyendo que se usa. */

/* La liga del XML al lado de un folio: se lee como lo que es —un archivo que se
   baja—, sin competir con el folio, que es el dato. Va en la pieza y no en la
   pantalla porque el mismo par folio+XML ya existe en Ventas (el embarque) y
   ahora también en Cuentas por cobrar: dos pantallas, una pieza (§4c). */
.xml-liga { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.xml-liga:hover { color: var(--acc, #FD6B00); text-decoration: underline; }

/* Lo que se cuenta pero no se pone enfrente: plegado, con su resumen a la vista.
   Nace en Depósitos del banco (9-sep-2026) para el dinero que entró y NO es
   cobranza — se dice cuánto hay y se puede abrir, pero no estorba el trabajo. */
.plegable-tesoreria > summary {
  padding: 11px 15px; cursor: pointer; font-size: 13px; color: var(--ink-2);
}
.plegable-tesoreria > summary:hover { color: var(--ink); }
.plegable-tesoreria[open] > summary { border-bottom: 1px solid var(--hairline); }
/* ═══════════════════════════════════════════════════════════════════════════
   TIMBRAR LA FACTURA DE UNA SALIDA QUE YA SALIÓ (9-sep-2026)
   ═══════════════════════════════════════════════════════════════════════════
   Tres cosas que ninguna pieza cubría, y las tres viven aquí porque las usan
   la cuenta por cobrar y el expediente del camión (§4c: dos pantallas). */

/* EL TIPO DE CAMBIO, COMPROBABLE. Pablo, 9-sep: «que lo pueda comprobar el
   contador y él, que sabe, poder decidir cuál es el correcto». Un número solo
   no se puede comprobar; con su procedencia pegada, sí. La barra naranja de la
   izquierda lo separa del bloque de cifras sin gritar. */
.tc-de {
  border-left: 3px solid var(--orange);
  background: var(--orange-soft);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  margin: 12px 0 0;
}
.tc-de-txt {
  font-size: 12.5px; color: var(--ink-2); margin: 0; line-height: 1.55;
  /* Un tc y una fecha pegados no pueden tirar el bloque: siempre hay dónde
     partir (la lección del valor largo sin dónde partirse, 4-sep). */
  overflow-wrap: anywhere;
}

/* LO QUE FALTA para poder timbrar. Cada renglón dice QUÉ y DE QUIÉN, así que
   respiran: apretados se leen como un párrafo y se dejan de leer. */
.falta-lista { margin: 6px 0 0; padding-left: 20px; line-height: 1.7; }

/* LA RESTA EN PESOS, dicha entera (ley 03: nada que sumar para creerle a la
   pantalla). Las cifras alineadas a la derecha y en cifras tabulares, o la
   columna no se puede comparar de un vistazo. */
/* ⚰️ AQUÍ VIVÍA .resta-tc, la tablita de «lo que cuesta facturarla tarde». Desde
   el 12-sep-2026 esa resta es una tabla de pares con su renglón de total: la
   misma resta, con la pieza del mueble en vez de una tabla tallada a mano (F4). */

/* LA EXCEPCIÓN, PLEGADA. Lo normal es que la factura la emita el ERP; que la
   haya hecho CONTPAQ es el caso raro y va abajo, cerrado (§7.8). */
.otra-via { margin-top: 16px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.otra-via > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }

/* EL RELOJ DE LAS 72 HORAS, renglón por renglón. Va pegado a su fila y nunca
   escondido en un `title`: es el dato que decide si esta factura todavía puede
   llevar la fecha de su salida. Los tonos son los de la ley 04 — y aquí el rojo
   sí se lo gana: pasado el plazo no es «te falta», es «ya se perdió algo». */
.reloj-timbre { display: block; font-size: 12px; margin-top: 3px; max-width: 44ch; }
.reloj-timbre.callado { color: var(--ink-2); }
.reloj-timbre.medio { color: #8A5200; font-weight: 600; }
.reloj-timbre.malo { color: #9B1C1C; font-weight: 600; }

/* ⚠️ EL RELOJ EN TELÉFONO. La celda apilada es un flex EN FILA que no envuelve,
   así que el reloj se quedaba con el ancho sobrante —una columna de diez
   caracteres, «Quedan 1 día / y 23 horas / para / timbrarla…» en diez
   renglones—. Sólo se ve a 390 px, y sólo en la foto (cazado en el ensayo del
   9-sep). Se le deja envolver y el reloj toma el renglón entero.
   El breakpoint es el MISMO en el que la tabla se vuelve tarjetas (640 px): con
   otro, la regla aplicaría cuando la celda ya no es flex y no haría nada. */
@media (max-width: 640px) {
  .tabla tbody td.celda-con-reloj { flex-wrap: wrap; }
  .tabla tbody td.celda-con-reloj .reloj-timbre {
    flex: 1 0 100%; max-width: none; text-align: right;
  }
}

/* Cuando el tipo de cambio con el que nació una cuenta venía arrastrado, la
   diferencia no es toda del retraso. Va debajo de la resta, en voz más baja
   que el aviso que la contiene: es un matiz, no una segunda alarma. */
.nota-provisional { margin-top: 6px; font-size: 12px; line-height: 1.5; }


/* ===================================================================
   EL EXPEDIENTE DEL CAMIÓN Y SUS HIJAS (11-sep-2026)
   ===================================================================
   Vivían dentro de recepcion_detalle.html. El día que la pantalla de un papel y
   la de «Ligar a banco» las necesitaron, se mudaron aquí (§4c: dos pantallas
   que necesitan lo mismo son la señal de que es una pieza).
   ------------------------------------------------------------------- */
/* Las acciones de un bloque viven junto a su título, juntas, como botones. */
.titulo-acciones { display: flex; align-items: center; justify-content: space-between;
                   gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-2); }
.titulo-acciones h2 { margin: 0; }
.titulo-acciones .juego { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
.titulo-acciones .juego form { display: inline; margin: 0; }
/* La fila de verbos (③) nace con aire arriba porque su lugar natural es DEBAJO de
   una tabla. Cuando vive junto al título de un bloque ese aire la desalinea del
   `<h2>`, así que aquí se le quita — y se le deja el margen de abajo que el
   `.titulo-acciones` ya pone, para que en el teléfono, donde los botones se
   bajan de renglón, no se peguen al contenido (11-sep-2026, B3). */
.titulo-acciones .verbos { margin-top: 0; }
/* ⚠️⚠️ DOS TRAMPAS QUE SÓLO VE EL NAVEGADOR, y las dos apagan la razón del botón
   congelado — o sea, justo lo que la regla B3 vino a poner (11-sep-2026).

   ① `mely_erp.css` le pone `overflow: hidden` a TODA `.tarjeta` (por las esquinas
      redondeadas). La razón se pinta con un `::after` que cuelga por DEBAJO del
      botón, así que dentro de una tarjeta se corta en el borde. Se abre la
      tarjeta que lleva botones en su título — es la única que los tiene arriba —
      con la misma receta que ya usa el desplegable de columnas.
   ② La fila de verbos de un título va pegada a la DERECHA (`space-between`), y la
      razón nace anclada a la izquierda del botón y crece 320 px hacia la derecha:
      se saldría de la pantalla. Aquí se ancla al revés, para que crezca hacia
      adentro de la tarjeta.

   Ninguna prueba de Django ve esto: el CSS no se ejecuta en la suite. */
.tarjeta:has(.titulo-acciones .verbos) { overflow: visible; }
/* En pantalla ancha los botones del título van pegados a la DERECHA, así que la
   razón se ancla por su derecha y crece hacia adentro de la tarjeta. */
@media (min-width: 641px) {
  .titulo-acciones .verbos .btn.congelado:hover::after,
  .titulo-acciones .verbos .btn.congelado:focus::after,
  .titulo-acciones .verbos .btn.congelado:focus-visible::after { left: auto; right: 0; }
}
/* ⚠️⚠️ Y EN EL TELÉFONO ES AL REVÉS, y anclarla por la derecha la CORTABA
   (12-sep-2026, medido a 390 px: cinco de seis razones mutiladas).

   Abajo de 640 px los botones se bajan de renglón y se quedan pegados a la
   IZQUIERDA, cada uno con el ancho de su texto. Una caja de ~300 px anclada a la
   derecha de un botón corto («Ligar a banco») arranca en x negativa —de −33 a
   −175 px—, y como el desbordamiento por la izquierda NO crece `scrollWidth`, lo
   cortado no se recupera ni haciendo scroll: se pierde y ya.

   El arreglo no es mover el ancla del botón sino colgarla de la FILA: con el
   botón en `position: static` la caja se posiciona contra `.verbos`, o sea
   contra el borde izquierdo del bloque, y baja debajo de la fila completa. Con
   el tope contra el ancho de la ventana no puede salirse por ningún lado, le
   toque el primer botón o el último. */
@media (max-width: 640px) {
  .titulo-acciones .verbos { position: relative; }
  .titulo-acciones .verbos .btn.congelado { position: static; }
  .titulo-acciones .verbos .btn.congelado:hover::after,
  .titulo-acciones .verbos .btn.congelado:focus::after,
  .titulo-acciones .verbos .btn.congelado:focus-visible::after {
    left: 0; right: auto; top: calc(100% + 6px);
    max-width: calc(100vw - 32px);
  }
}
/* Un renglón de ficha cuyo valor puede partirse (una lista de ligas, un nombre largo). */
.ec-fila.suelta > span:last-child { white-space: normal; }
.ec-fila.total > span:last-child { font-size: 14px; }
/* La tabla compacta de gastos: concepto y proveedor se parten, lo demás no. */
.tabla.densa.gastos-tabla tbody td[data-th="Concepto"],
.tabla.densa.gastos-tabla tbody td[data-th="Proveedor"] { white-space: normal; max-width: 220px; min-width: 120px; }


/* ===================================================================
   EL ESTÁNDAR VISUAL — las tres piezas  (docs/ESTANDAR-VISUAL.md, 11-sep-2026)
   ===================================================================
   ① .cab-fija    las seis celdas   · qué es, cómo va, qué hago
   ② .tabla.pares una tabla         · rótulo izquierda, valor derecha
   ③ .verbos      una fila de botones debajo de la tabla

   Toda la idea cabe en una frase de Pablo: «leo una frase en vez de verlo en un
   dato». Una frase no se estandariza; seis celdas en el mismo lugar, sí.
   ------------------------------------------------------------------- */

/* ① LA CABECERA FIJA -------------------------------------------------
   Seis columnas de anchos DISTINTOS y fijos, no seis iguales: «Quién» y «Qué
   es» son texto que se desborda y necesitan aire; «Folio» y «Cuándo» miden lo
   que mide un folio y una fecha. Con seis columnas iguales, el nombre del
   cliente se corta mientras el folio nada en blanco. Las proporciones salieron
   de la maqueta que Pablo aprobó (v3.2, 11-sep). */
.cab-fija {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.5fr 1.5fr 1.2fr 1.05fr;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  margin: var(--e-2) 0 var(--e-3);
}
.cab-fija .cf-celda {
  padding: 11px 14px;
  border-right: 1px solid var(--hairline-2);
  min-width: 0;   /* sin esto, un nombre largo estira su columna y rompe la rejilla */
}
.cab-fija .cf-celda:last-child { border-right: 0; }
.cab-fija .cf-rot {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 660; margin: 0 0 4px;
}
/* El valor se parte A LO MÁS en dos renglones, y después se corta con «…».
   Hasta el 6-oct-2026 no se partía nunca: «un dato partido deja de leerse de un
   vistazo». Pero en la firma de un cargo de tarjeta el dueño salía «Luis Reyes
   Hernán…» y el comercio «HOTEL MISION CE…» —justo los dos datos con que se decide
   a quién cobrarle— y Pablo lo reportó como defecto. Un número no lleva espacios,
   así que sigue en un solo renglón; un nombre o una razón social baja al segundo.
   El texto completo sigue a la mano en el `title` de la celda. */
.cab-fija .cf-val {
  font-size: 16.5px; font-weight: 640; color: var(--ink); line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis;
  margin: 0;
}
.cab-fija .cf-val .cf-txt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; white-space: normal;
}
/* El renglón chico SÍ se parte —es el segundo dato— pero a lo más en DOS
   renglones. Con una razón social de sesenta letras se iba a cuatro y estiraba
   la cabecera ENTERA al doble de alto, porque la fila mide lo que mida su celda
   más alta: seis celdas de un renglón y una de cuatro. El texto completo sigue
   a la mano en el `title` de la celda. */
.cab-fija .cf-val .cf-sub {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px; font-weight: 500; color: var(--ink-3);
  margin-top: 3px; white-space: normal;
}
/* Ley 04 · el color significa UNA cosa. Los tonos son los del semáforo del ERP,
   y aquí se pintan como LETRA (no como relleno): un relleno en la cabecera
   volvería a ser el «amarillo huevo» que Pablo rechazó. */
.cab-fija .cf-alto    { color: #A32020; }
.cab-fija .cf-medio   { color: #8A5A00; }
.cab-fija .cf-ok      { color: #1E7A3C; }
.cab-fija .cf-callado { color: var(--ink-3); font-weight: 500; }

/* LA CIFRA QUE SE FIRMA (`{% celda … destaca=True %}`, 25-sep-2026). Pablo: *«a la
   hora de la firma el monto es el que debe de sobresalir más»*. Es la ÚNICA celda
   con fondo (dos si se firman dólares y pesos, 28-sep-2026), y el fondo es el naranja suave (naranja sólo para fondos): no es el
   «amarillo huevo» de las filas, es la cifra que quien firma no puede no leer. */
.cab-fija .cf-celda.destaca { background: var(--orange-soft, #FDEBDC);
  /* La cifra que se firma NUNCA se recorta (28-sep-2026: una corrida con
     MX$ 1,234,567.50 se leía «1,234,56…»). Su columna mide al menos su número; las
     otras celdas ceden el espacio y se recortan ellas. min-content y no max-content:
     el renglón chico de abajo sí se parte en dos. */
  min-width: min-content; }
/* 30 px en la pantalla de escritorio; en una laptop chica baja hasta 22 para no dejar
   sin lugar a las otras cinco celdas (con dos cifras grandes, 28-sep-2026). */
.cab-fija .cf-celda.destaca .cf-val { font-size: clamp(22px, 2.15vw, 30px); line-height: 1.15; letter-spacing: -.5px; }
.cab-fija .cf-celda.destaca .cf-sub { font-size: 12.5px; color: var(--orange-ink, #A24B10); letter-spacing: 0; }

/* En el teléfono las seis no caben en una fila. Se parten en dos de tres, y
   NINGUNA se esconde: la posición se aprende, y una celda que desaparece en el
   teléfono obliga a aprenderla dos veces. */
@media (max-width: 900px) {
  .cab-fija { grid-template-columns: 1fr 1fr 1fr; }
  .cab-fija .cf-celda { border-bottom: 1px solid var(--hairline-2); }
  .cab-fija .cf-celda:nth-child(3n) { border-right: 0; }
  .cab-fija .cf-celda:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (max-width: 480px) {
  .cab-fija { grid-template-columns: 1fr 1fr; }
  .cab-fija .cf-celda:nth-child(3n) { border-right: 1px solid var(--hairline-2); }
  .cab-fija .cf-celda:nth-child(2n) { border-right: 0; }
  .cab-fija .cf-celda:nth-last-child(-n+2) { border-bottom: 0; }
  .cab-fija .cf-val { font-size: 15px; }
}
/* En el teléfono la cifra que se firma sube hasta arriba y ocupa todo el ancho. */
@media (max-width: 900px) {
  .cab-fija .cf-celda.destaca { grid-column: 1 / -1; order: -1; border-right: 0;
                                border-bottom: 1px solid var(--hairline-2); }
  .cab-fija .cf-celda.destaca .cf-val { font-size: 28px; }
}

/* ② LA TABLA DE PARES ------------------------------------------------
   T3 · «La tabla mide lo que mide su texto.» El marco es quien se estira; la
   tabla, no. Sin esto la tabla ocupa el ancho de la pantalla y deja el rótulo
   en un extremo y la cifra en el otro:
     «Mis ojos tienen que ir hasta la izquierda para ver qué es y hasta la
      derecha para ver cuánto.» */
.pares-marco { overflow-x: auto; margin-bottom: var(--e-3); }
.tabla.pares {
  width: auto; min-width: 0; max-width: 100%;
  border-collapse: collapse;
  background: var(--card);
  font-size: var(--t-dato);
}
.tabla.pares td { padding: 8px 0; border: 0; vertical-align: baseline; }
/* T4 · dos columnas: rótulo a la izquierda, valor a la derecha, un par por
   renglón. El aire entre las dos es un padding FIJO, no un ancho elástico: así
   los dos datos se quedan juntos por larga que sea la pantalla. */
/* El `padding-left` va en TODOS los rótulos, no sólo en el de la excepción: es
   el hueco donde cabe su raya. Puesto sólo en la excepción, ese renglón se
   recorría 12 px y se leía como si colgara del anterior — T5, una columna un
   significado, se rompe con una sangría igual que con un nombre distinto. */
.tabla.pares .par-rot {
  color: var(--ink-2); padding-left: 12px; padding-right: 36px;
  white-space: nowrap; text-align: left;
}
/* ⚠️⚠️ EL VALOR LARGO TIRABA LA TABLA ENTERA (2026-09-12, primer uso real de la
   pieza en Comercio exterior). Con `white-space: nowrap`, una NOTA de doscientos
   caracteres en un `{% par %}` volvía la tabla más ancha que la pantalla: el
   marco se ponía a rodar de lado y TODOS los valores —incluidas las cifras—
   quedaban cortados a la derecha. La tabla de pares existía desde el 11-sep sin
   una sola pantalla que la usara, así que nadie lo había visto.

   Se parte por espacios, que es lo único que tiene una frase: una cifra
   («1,110,470», «24/Ago/2025») no trae espacios y sigue cabiendo en un renglón,
   que era todo lo que el `nowrap` protegía. El tope en `ch` es del ANCHO DE
   TEXTO (T3): la tabla mide lo que mide su texto, no lo que mide la pantalla. */
.tabla.pares .par-val {
  text-align: right; white-space: normal;
  max-width: 52ch; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 560;
  /* (revisión 390 px, 9-oct-2026) El valor pega con el borde derecho de la caja blanca
     mientras el rótulo tiene sus 12 px a la izquierda: la tabla se veía recortada de un
     lado (e.firma, R-310…). Los mismos 12 px por el otro lado. */
  padding-right: 12px;
}
/* T5b · EL DATO DE APOYO VA DEBAJO, EN CUALQUIER TABLA — no sólo en la de pares.
   La regla vivía pegada a `.tabla.pares`, así que el mismo `.par-sub` en una
   tabla normal se quedaba EN LÍNEA y el nombre y su apoyo salían pegados:
   «Dulce María Hernández de la CruzHECD850101AB1» en la ficha del cliente
   (cazado en el ensayo de C2, 2026-09-19; el defecto entró con C1). Se arregla
   en la PIEZA y no con un estilo suelto en la pantalla: la siguiente tabla que
   lo use nace bien. */
.par-sub {
  display: block; font-size: var(--t-apoyo); font-weight: 500;
  color: var(--ink-3); white-space: normal; margin-top: 2px;
}
/* T7 · un hueco se ve hueco. Un CERO no pasa por aquí: un cero es un dato y se
   pinta como cualquier otro. */
.tabla.pares .par-val.vacia { color: var(--ink-3); font-weight: 500; }

/* T2 + T5 · las secciones viven DENTRO de la misma tabla, separadas por una
   línea. El título va a la izquierda, como el rótulo del que manda. */
.tabla.pares tr.par-seccion td {
  border-top: 2px solid var(--hairline);
  padding: 18px 0 6px 12px; text-align: left;
  font-size: var(--t-rotulo); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 660;
}
.tabla.pares tr:first-child.par-seccion td { border-top: 0; padding-top: 0; }

/* T10 · el total al pie, con su línea y más peso: es el renglón que se busca. */
.tabla.pares tr.par-total td {
  border-top: 1px solid var(--hairline); padding-top: 12px; font-weight: 700;
}
.tabla.pares tr.par-total .par-val { font-size: 15px; }
/* Un valor que es TEXTO LARGO (`{% par … texto=True %}`): a la izquierda y sin
   negritas, para que se lea como lo que es — una explicación, no una cifra. */
.tabla.pares td.par-val.texto { text-align: left; font-weight: 400; white-space: normal; }

/* T8 · «El renglón normal no lleva color.» La excepción lleva una RAYA delgada
   a la izquierda, nunca un relleno. Lo pidió Pablo con nombre y apellido:
     «El amarillo… me hace pensar que es parte del diseño para no ver todas las
      filas de un solo color.»
   Un relleno pinta media tabla y deja de señalar; una raya sigue señalando
   aunque haya varias. */
.tabla.pares tr.par-excepcion .par-rot { box-shadow: inset 3px 0 0 var(--orange); }
.tabla.pares tr.par-excepcion .par-porque { color: var(--orange-ink); }

/* ⚠️⚠️ EL SEGUNDO DEFECTO QUE SÓLO VIO EL TELÉFONO (11-sep-2026).
   `mely_erp.css` convierte TODA `.tabla` en ficha a 640 px —`thead` escondido y
   `td { display: flex }` con el rótulo en un `::before` de `data-th`—, que es lo
   correcto para una tabla de siete columnas. Aplicado a la de pares hacía el
   ridículo: cada par se partía en DOS renglones (rótulo arriba, valor abajo), la
   tabla crecía al doble de alto y el ancho de la página se disparaba.

   La tabla de pares NO necesita volverse ficha: **ya es** lo que esa
   transformación produce —rótulo a la izquierda, valor a la derecha—. Así que
   se queda como tabla, y lo único que cambia en el teléfono es que un valor
   largo (el nombre de un cliente) puede partirse; las cifras no traen espacios,
   así que ninguna se parte. */
@media (max-width: 640px) {
  .tabla.pares { width: 100%; }
  /* Son CUATRO cosas las que hay que devolverle, no una. La transformación no
     sólo cambia la celda: vuelve `<tr>` un bloque para que cada renglón se lea
     como tarjeta. Con el `<tr>` en bloque, las dos celdas arman una tablita
     aparte por renglón —cada una del ancho de SU texto—, así que las columnas
     dejan de alinearse entre renglones, el `colspan` de las secciones no abarca
     nada y la línea del total sale de cinco centímetros. Se veía en la foto de
     390 px y en ninguna otra parte. */
  .tabla.pares tbody tr { display: table-row; border-bottom: 0; padding: 0; margin: 0; }
  .tabla.pares tbody td { display: table-cell; padding: 8px 0; }
  .tabla.pares tbody td::before { content: none; }
  .tabla.pares .par-rot { padding-left: 12px; padding-right: 16px; white-space: normal; text-align: left; }
  .tabla.pares .par-val { text-align: right; white-space: normal; }
  .tabla.pares tr.par-seccion td { padding: 18px 0 6px 12px; }
  .tabla.pares tr.par-total td { padding-top: 12px; }
}

/* ③ LA FILA DE VERBOS ------------------------------------------------
   Juntos, debajo de la tabla. El diagnóstico original del ERP fue que los
   botones estaban en cinco lugares distintos. */
.verbos {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  margin-top: var(--e-3);
}
.verbos .verbo-form { display: inline; margin: 0; }
/* La raya que separa lo que HACE de lo que sólo mira (ver, imprimir, estado de
   cuenta). En el teléfono los botones se apilan, así que la raya se acuesta. */
.verbos .verbos-raya {
  width: 1px; align-self: stretch; min-height: 22px;
  background: var(--hairline); margin: 0 var(--e-1);
}
/* (revisión 390 px, 9-oct-2026) En teléfono los botones se acomodan en varios renglones y
   la raya, sin nada a un lado, se quedaba parada al final de uno (se vio en la corrida:
   «Cancelar la corrida |» con «Todas las corridas» abajo). Al partirse en renglones, la
   raya sobra. */
@media (max-width: 640px) {
  .verbos .verbos-raya { display: none; }
}
/* El principal es el botón de contorno naranja —el `.btn` de base del ERP—; los
   demás son `.btn-ghost`, de contorno gris. No se agrega un tercer tratamiento:
   dos pesos bastan para decir cuál es el que toca. */
.verbos .btn.principal { font-weight: 700; }
/* Los pasos numerados de un aviso (`{% aviso … pasos=… %}`, R-292): a la izquierda,
   uno por renglón, para seguirlos en orden. */
.aviso .aviso-pasos { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; text-align: left; }
/* La nota DEL botón, a su lado (`{% verbos nota=… %}`, R-292): qué deja fuera. */
.verbos .verbos-nota { font-size: 13px; line-height: 1.4; min-width: 0; flex: 0 1 auto; }

/* B3 · CONGELADO, NO ESCONDIDO.
   «Si de plano no me deja, decir el porqué y qué hacer.» (Pablo, 11-sep)

   Gris y con borde punteado: se ve que ES un botón y que HOY no se puede. La
   razón sale al pasar el cursor Y al recibir el foco — el foco es lo que lo
   hace funcionar en el teléfono, donde no hay cursor y un toque es lo único
   que hay. Por eso el marcado le pone `tabindex="0"` a un <span> en vez de
   usar <button disabled>: un botón deshabilitado no recibe foco, así que en el
   teléfono se quedaría mudo justo donde más falta hace la explicación. */
.btn.congelado {
  color: var(--ink-3); background: var(--card-2);
  border: 1.5px dashed var(--hairline); cursor: not-allowed; position: relative;
}
/* ⚠️⚠️ LO CAZÓ EL NAVEGADOR, no la suite (11-sep-2026).
   `mely_erp.css` ya apagaba TODO lo que lleva `aria-disabled="true"`:

       .btn:disabled, .btn[disabled], .btn[aria-disabled="true"] {
         opacity: .45; cursor: not-allowed; filter: grayscale(.5); }

   Y `opacity` se hereda al pintar: apagaba también el `::after`, o sea LA RAZÓN.
   El botón congelado salía diciendo por qué no se puede… al 45 %, casi
   ilegible. Justo la regla que Pablo pidió, anulada por una regla vieja que
   nadie tenía por qué recordar. Ninguna prueba de Django lo ve: el CSS no se
   ejecuta en la suite.

   Aquí el apagado genérico NO aplica: este botón ya se ve apagado por su cuenta
   —gris y con borde punteado— y encima tiene algo que LEER. El selector lleva
   el atributo a propósito, para ganar por especificidad pase lo que pase con el
   orden en que se carguen las dos hojas. */
.btn.congelado[aria-disabled="true"] { opacity: 1; filter: none; }
.btn.congelado:hover { background: var(--card-2); color: var(--ink-3); border-color: var(--hairline); }
.btn.congelado:hover::after,
.btn.congelado:focus::after,
.btn.congelado:focus-visible::after,
.palomita.congelada:hover::after,
.palomita.congelada:focus::after,
.palomita.congelada:focus-visible::after {
  content: attr(data-porque);
  /* ⚠️⚠️ `box-sizing` EXPLÍCITO, y no es de adorno (12-sep-2026). El reset del ERP
     es `* { box-sizing: border-box }` (`mely_erp.css`), y el `*` NO alcanza a los
     pseudo-elementos: sin esta línea el `::after` es `content-box`, así que el
     `max-width` capaba sólo el texto y la caja pintada salía 26 px más ancha
     (12+12 de relleno y 1+1 de borde). En el teléfono eso es justo lo que hacía
     que la razón, ya acotada al ancho de la ventana, se saliera 20 px y se
     cortara. Ninguna prueba lo ve: el CSS no se ejecuta en la suite. */
  box-sizing: border-box;
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
  width: max-content; max-width: 320px; white-space: normal; text-align: left;
  font-size: var(--t-apoyo); font-weight: 500; line-height: 1.45;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--hairline); border-radius: 10px;
  padding: 9px 12px; box-shadow: var(--shadow);
}
/* En una pantalla angosta la razón se pega a la izquierda del botón y se
   desbordaría; se ancla al contenedor. */
@media (max-width: 480px) {
  .btn.congelado:hover::after,
  .btn.congelado:focus::after,
  .btn.congelado:focus-visible::after { max-width: min(320px, 78vw); }
}


/* ===================================================================
   LA TABLA EN TARJETA NO SE SALE DEL TELÉFONO  (11-sep-2026)
   ===================================================================
   A 640 px el ERP convierte cada renglón en tarjeta: `tr` en bloque y `td` en
   flex, con el rótulo a la izquierda (`::before` de `data-th`) y el dato a la
   derecha. Funciona mientras el dato quepa en una línea.

   Cuando no cabe —una razón social de sesenta letras, una celda con DOS monedas
   («MX$ 58,000.00» y «US$ 525,150.72» lado a lado), un botón que dice
   «Registrar la llamada»— los hijos del flex no se acomodan en un segundo
   renglón: **empujan la tabla más allá de la pantalla**, y lo que se sale se
   queda cortado a la derecha. En una bandeja de cobranza, lo que se salía era
   justamente el botón del renglón.

   Medido en «A quién cobrar hoy» a 390 px: la tabla pedía 496 px dentro de un
   hueco de 472. Con estas tres reglas pide 472 — exactamente el hueco.

   No cambia nada en computadora (vive dentro del @media) y no puede encoger
   ninguna tabla que hoy quepa: `wrap` sólo actúa cuando ya no cabía.
   ------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* El contenido de la celda se acomoda en otro renglón en vez de empujar. */
  .tabla tbody td { flex-wrap: wrap; }
  /* Pero el rótulo NO se encoge: es la palabra que dice qué es ese dato. */
  .tabla tbody td::before { flex: 0 0 auto; }
  /* (revisión 390 px, 9-oct-2026) La celda vacía y SIN rótulo no dice nada: en ficha era una
     franja en blanco con su raya (la fila «Suma» de la corrida traía tres, y la fila de
     «Quién firma» otra). Sólo se apaga la que no tiene ni rótulo ni contenido. */
  .tabla tbody td:empty:not([data-th]), .tabla tfoot td:empty:not([data-th]) { display: none; }
  /* Y la celda que es SÓLO una liga (el folio que abre la cuenta) se centra con su rótulo:
     la liga mide 44 px de alto para el dedo y el rótulo se quedaba arriba, a media fila. */
  .tabla tbody td:has(> a:only-child) { align-items: center; }
  /* Y un botón largo dentro de una tabla se parte en dos renglones antes que
     salirse de la pantalla — un botón cortado no se puede ni leer ni picar. */
  .tabla .btn, .tabla button.btn, .tabla a.btn { white-space: normal; }
  /* Lo MISMO para una pastilla (12-sep-2026, foto de la cartera a 390 px): la
     columna «Detalles» lleva avisos largos —«1 factura sin tipo de cambio: lo
     disponible es MENOS de lo que dice»— y con `nowrap` se salían de la tarjeta
     por la derecha, cortados a media palabra. Un aviso que no se lee entero es
     peor que no ponerlo: dice que algo pasa y no qué. */
  .tabla .badge { white-space: normal; max-width: 100%; text-align: left; }
}

/* (11-sep-2026, carril de Recibir) La razón va SIEMPRE escrita al lado del botón
   congelado —`.a-nota.por-que-congelado`—, nunca sólo en el `title=`: en teléfono no
   hay cursor y un `disabled` tampoco recibe el toque. En teléfono baja a su renglón. */
@media (max-width: 560px) {
  .acciones .btn.congelado { flex: 1 1 100%; justify-content: center; }
  .acciones .a-nota.por-que-congelado { flex: 1 1 100%; }
}

/* =====================================================================
   EL TABLERO DE PARED (2026-09-14) — Indicadores › «Dónde está tu dinero hoy»

   Es la pantalla que vive prendida en un monitor, así que las cifras son de
   LETRERO: tienen que leerse a tres metros, no a treinta centímetros.

   UNA SOLA REGLA DE COLOR EN TODA LA PANTALLA: el rojo es lo atorado. El
   resto es la familia cálida de la marca — y por eso, cuando aparece el
   rojo, no se puede no ver. Por lo mismo el naranja de Mely se reserva para
   una sola cosa aquí: el dinero LIBRE, el que está en el banco.

   ⚠️ `val`, `marca` y `pasado` ya estaban tomadas en el ERP: estas clases se
   llaman `monto-monton`, `marca-meta` y `se-paso` a propósito. Una clase
   repetida no truena — hereda estilos de otra pantalla, y eso sólo lo ve la
   foto (ver la libreta de nombres de clase ya tomados).
   ===================================================================== */
.cifrota {
  font-size: 40px; font-weight: 620; color: var(--ink);
  letter-spacing: -1.6px; line-height: 1.1; margin: var(--e-1) 0 0;
  font-variant-numeric: tabular-nums;
}
.cifrota .apoyo { font-size: 17px; font-weight: 500; letter-spacing: 0; }
.rotulo-bloque {
  margin: 0; font-size: var(--t-rotulo); letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-3); font-weight: 640;
}
.apoyo { font-size: var(--t-apoyo); color: var(--ink-2); }

/* --- Los montones: el ancho es el dinero, el rojo es lo atorado --- */
.montones { display: flex; gap: 3px; height: 62px; margin-top: var(--e-3); }
.monton { display: flex; min-width: 0; overflow: hidden; border-radius: 8px;
          transition: flex-grow .9s ease; }
.monton .sano {
  flex: 1; border-radius: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-width: 0; overflow: hidden;
  padding: 0 var(--e-1);
}
/* Lo atorado: un pedazo rojo al final de su propio color. Antes era una
   etiqueta encima del montón y en uno angosto se desbordaba tapando el
   nombre — sólo lo vio la foto, porque el CSS no corre en la suite. */
.monton .traba { background: var(--critical); min-width: 5px; }
.monton .sano .nom {
  font-size: 11.5px; font-weight: 750; letter-spacing: .4px; text-transform: uppercase;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.monton .sano .monto-monton {
  font-size: 12.5px; font-weight: 600; opacity: .85; font-variant-numeric: tabular-nums;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* El naranja de marca, para el único dinero que está libre. */
.sano-banco  { background: var(--orange); color: #fff; }
.sano-bodega { background: #BCAB9B; color: #2B2118; }
.sano-cobrar { background: #D8D3CC; color: #2B2118; }

.montones-detalle { display: flex; gap: var(--e-3); flex-wrap: wrap; margin-top: var(--e-2); }
.montones-detalle li {
  display: flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-apoyo); color: var(--ink-2);
}
.monton.angosto .sano .nom,
.monton.angosto .sano .monto-monton { display: none; }
.mota { width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block; }
.mota-banco { background: var(--orange); }
.mota-bodega { background: #BCAB9B; }
.mota-cobrar { background: #D8D3CC; }
.mota-atorado { background: var(--critical); }

/* R-342 (14-oct-2026) · el cuadro «Saldo por cuenta» bajo los montones: lo que dice
   cada banco y de qué día. Es la pieza `{% ficha %}` tal cual (angosta, rótulo a la
   izquierda y dato a la derecha); aquí sólo se le da aire para que no se pegue a la
   leyenda de arriba. */
.bancos-por-cuenta { margin-top: var(--e-3); }
/* El aviso de un montón con dinero fuera de la suma baja a su propio renglón: a
   390 px apretaba «En el banco US$ …» en una columna de dos palabras (R-342, foto). */
.montones-detalle li:has(> .aviso) { flex-wrap: wrap; flex-basis: 100%; }
.montones-detalle li > .aviso { flex: 1 1 100%; margin: 0; }
/* La línea «Cobrado, falta aplicar» bajo la leyenda (R-342): dato de apoyo, chico. */
.cobrado-sin-aplicar { margin: var(--e-1) 0 0; }
/* A 390 px la ficha partía la cifra a media palabra («MX$ / 15,230.55», «18.423 / 5»):
   la cifra no se parte, el que se acomoda en dos renglones es el nombre de la cuenta.
   El apoyo de abajo sí puede bajar de renglón. Lo vio la foto de teléfono. */
.bancos-por-cuenta dl.ficha dd { white-space: nowrap; overflow-wrap: normal; }
.bancos-por-cuenta dl.ficha dd .ficha-sub { white-space: normal; }

.aguante {
  margin: var(--e-3) 0 0; padding-top: var(--e-2);
  border-top: 1px solid var(--hairline-2); font-size: var(--t-cuerpo); color: var(--ink-2);
}
.aguante b { color: var(--ink); font-weight: 650; }

/* --- Los dos relojes: la barra contra la marca de la meta --- */
.bloques-tablero {
  display: grid; gap: var(--e-2); margin-top: var(--e-2);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.bloque-tablero { display: flex; flex-direction: column; }
.regla-dias { margin-top: var(--e-3); }
.regla-dias .pista {
  position: relative; height: 10px; border-radius: 5px; background: var(--stone-light);
}
.regla-dias .lleno {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px;
  background: var(--success); transition: width .9s ease; max-width: 100%;
}
/* Pasarse de la meta se VE: «31 días, meta 21» obliga a restar; esto no. */
.regla-dias .lleno.se-paso { background: var(--critical); }
.regla-dias .lleno.sin-meta { background: var(--stone); }
.regla-dias .marca-meta {
  position: absolute; top: -5px; bottom: -5px; width: 2px;
  background: var(--ink); border-radius: 1px;
}
.regla-dias .pies {
  display: flex; justify-content: space-between; margin-top: var(--e-1);
  font-size: var(--t-rotulo); color: var(--ink-3);
}
.regla-dias .pies .se-paso { color: var(--critical-ink); font-weight: 700; }

.pie-tablero { margin-top: var(--e-3); }

@media (max-width: 640px) {
  .cifrota { font-size: 31px; }
  .montones { height: 54px; }
  /* A 390 px ningún nombre cabe adentro («En el banco» se corta a «E…»):
     la barra se vuelve pura proporción y los nombres viven en la leyenda
     de abajo, que ya los trae completos. Lo cazó la foto de teléfono. */
  .monton .sano .nom,
  .monton .sano .monto-monton { display: none; }
  .bloques-tablero { grid-template-columns: 1fr; }
}

/* El bloque donde ACABA de cambiar algo se enciende un instante: para eso
   sirve ver un tablero de reojo — te dice DÓNDE mirar, no sólo que algo
   cambió. Se apaga solo; no hay nada que parpadee para siempre. */
.acaba-de-cambiar { animation: acaba-de-cambiar 1.6s ease-out; }
@keyframes acaba-de-cambiar {
  0%   { box-shadow: 0 0 0 2px var(--orange), var(--shadow-lift); }
  100% { box-shadow: var(--shadow); }
}
@media (prefers-reduced-motion: reduce) {
  .acaba-de-cambiar { animation: none; }
}

/* ---------------------------------------------------------------------------
   PIEZA · «La puede dar: …» (2026-09-15) — quién puede firmar, leído del sistema.
   Regla de Pablo: «mi nombre no debe de aparecer en el sistema; que el sistema
   lea quién tiene la autorización y ponga el nombre». El botón no cambia de
   nombre; el nombre vive en este renglón de apoyo, y en rojo si no hay nadie
   (una casilla sin repartir es un hallazgo de Configuración, no un silencio).
   --------------------------------------------------------------------------- */
.quien-firma { display: inline-block; font-size: var(--t-apoyo); color: var(--ink-3); line-height: 1.45; }
.quien-firma strong { color: var(--ink); font-weight: 600; }
.quien-firma.sin-nadie { color: var(--critical-ink); font-weight: 600; }
.acciones .quien-firma { flex: 1 1 100%; }

/* ---------------------------------------------------------------------------
   LA BARRA DE ARRIBA DE UNA BANDEJA DENSA (19-sep-2026) — buscador a la
   izquierda, los verbos a la derecha, UN solo renglón.

   Pablo: «los botones de acciones van arriba a un lado del filtro/buscador, no
   hasta abajo». CLAUDE.md §7.9a ya lo decía («arriba del bloque al que
   pertenecen»); el §2③ del estándar visual decía lo contrario y se corrigió
   ese día. Y: «los chips no me gustan, se sienten como pantallas diferentes en
   vez de filtros». En su lugar, un BUSCADOR y ORDENAR PICANDO EL ENCABEZADO
   —que es como Pablo lee su Excel— y que no esconde renglones.
   --------------------------------------------------------------------------- */
.barra-arriba { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 14px 0 8px; }
.barra-arriba .izq { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex: 1; min-width: 0; }
.barra-arriba .der { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Los verbos dentro de la barra pierden su margen de arriba: ya no van al pie. */
.barra-arriba .verbos { margin-top: 0; }
/* `max-width` y no `width`: la regla global de los controles (`input:not(...)`
   con cinco :not) le gana a cualquier clase. Cazado dos veces (14-sep, 19-sep). */
.barra-arriba input[type="search"] { max-width: 280px; }
/* El {% buscador %} dentro de la barra (8-oct-2026, «Todas las CxP»): sin el aire de
   abajo que trae suelto —descuadraba la barra— y con lugar para que se lea su
   ejemplo entero («Folio, proveedor, REC, factura o monto» se cortaba en «factura»). */
.barra-arriba .buscador { margin: 0; }
.barra-arriba .buscador input[type="search"] { min-width: 300px; max-width: 340px; }
.barra-arriba .pista { font-size: var(--t-apoyo); color: var(--ink-3); }
.barra-arriba .n { font-size: var(--t-apoyo); color: var(--ink-2); font-weight: 600; }
/* La casilla que TRAE MÁS renglones («Ver también lo ya pagado»): un control
   gris que se lee como control, no como lugar. */
.ver-mas { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.ver-mas input { width: auto; max-width: none; margin: 0; }
@media (max-width: 640px) {
  .barra-arriba input[type="search"] { max-width: none; }
  .barra-arriba .der, .barra-arriba .der .verbos { width: 100%; }
}

/* ORDENAR PICANDO EL ENCABEZADO. La flecha nace apagada y se prende en la
   columna por la que se ordenó. El orden se hace DENTRO de cada sección: la
   raya de empresa/moneda no se mueve, o las cantidades quedarían bajo la
   moneda equivocada (el JS vive en mely_tabla_densa.js). */
.tabla thead th.ord { cursor: pointer; user-select: none; }
.tabla thead th.ord:hover { color: var(--orange-ink); }
.tabla thead th.ord .flecha { opacity: .32; font-size: 9px; margin-left: 2px; }
.tabla thead th.ord[data-dir] .flecha { opacity: 1; color: var(--orange-ink); }

/* La línea que separa lo FIRME de lo que todavía no es deuda (sin facturar,
   anticipo por mandar) — la misma que ya usaba el estado de cuenta viejo. */
.tabla .esperado { border-left: 1px solid var(--linea, #E5E1DA); }

/* La raya de sección con su casilla de «marcar todo el grupo» (Crear corrida). */
.tabla tbody tr.tab-seccion td label { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; }
.tabla tr.tab-seccion input[type="checkbox"] { width: auto; max-width: none; margin: 0; }
/* El buscador de la barra de arriba va por la pieza {% campo %}: dentro de la
   barra su envoltorio no rompe el renglón ni se estira. */
.barra-arriba .campo { margin: 0; flex: 0 1 300px; min-width: 200px; }
.barra-arriba .campo input { width: 100%; max-width: none; }

/* ===================================================================
   LOS CUADROS EN FILA, CUANTOS SEAN  (Cuentas por cobrar, 24-sep-2026)
   ===================================================================
   La hoja de un cliente tiene 3, 4 o 5 cuadros según cuántas monedas deba y
   con cuántas empresas tenga crédito. `.ec-tres` es de tres fijos; éste acomoda
   los que vengan uno junto al otro y los baja de renglón cuando no caben.
   Pablo: «hazla horizontal para que no ocupe tanto espacio».
   ------------------------------------------------------------------- */
.ec-varios {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px; margin: 14px 0 0; align-items: start;
}
/* Lo que pide atención (vencido, pasó su límite) se nota en el dato mismo, sin
   un renglón extra que lo explique. */
.ec-fila.alerta > span:last-child { color: var(--orange-ink, #A24B10); }
/* En los cuadros en fila el dato puede ser un correo o una aseguradora larga:
   se parte en renglones en vez de cortarse sin aviso (el cuadro mide 230 px). */
.ec-varios .ec-fila > span:last-child { white-space: normal; overflow-wrap: anywhere; }
/* La excepción dicha en palabras, debajo del dato que la tiene. */
.ec-fila.alerta small, .ec-fila small { display: block; font-size: 11px; font-weight: 500; color: var(--orange-ink, #A24B10); }

/* La LEM (24-sep-2026): lo que dice el renglón de la línea bajo «¿Qué es?» —
   cómo se parte el pago, o por qué no se puede partir todavía. */
.tabla td .partido { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; }
.tabla td .partido strong { color: var(--ink); font-weight: 600; }
.tabla td .porque-no { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin-top: 4px; }

/* ===================================================================
   LA FIRMA DE LO QUE LLEGÓ DE MÁS  (Pablo, 28-sep-2026)
   ===================================================================
   Dos cuadros (cantidades · de dónde viene) que NO se estiran a lo ancho de la
   pantalla: el río de blanco entre rótulo y dato es su queja vieja. El % va a la
   IZQUIERDA de la cifra, en gris (C7). Las firmas no son tarjeta: van en el
   renglón chico de la celda «Estado» (la nota de crédito: «más compacto»).
   ------------------------------------------------------------------- */
.ec-varios.angostos { max-width: 840px; margin-bottom: 14px; }
.ec-fila .ec-pct { color: var(--ink-3); font-weight: 500; margin-right: 8px; }

/* ===================================================================
   LOS CUADROS DE UN EXPEDIENTE, EN REJILLA PAREJA  (Personal, 28-sep-2026)
   ===================================================================
   `.ec-varios` acomoda los que vengan y cada uno mide lo suyo; un expediente
   tiene SIEMPRE los mismos cuadros, así que van en una rejilla de tres, todos
   del mismo alto en su renglón. Cinco cuadros de 230 px partían un número de
   seguridad social en dos renglones: aquí el dato nunca se corta a media cifra.
   ------------------------------------------------------------------- */
.ec-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 14px; align-items: stretch; margin: 14px 0 0; }
@media (max-width: 1000px) { .ec-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ec-rejilla { grid-template-columns: 1fr; } }
.ec-rejilla .ec-fila { padding: 5px 12px; }
.ec-rejilla .ec-fila > span:first-child { flex: 0 1 58%; }
.ec-rejilla .ec-fila > span:last-child { white-space: normal; overflow-wrap: normal; }
/* Un domicilio o un correo sí pueden partirse: no son cifras. */
.ec-rejilla .ec-fila.largo > span:first-child { flex: 0 0 auto; }
.ec-rejilla .ec-fila.largo > span:last-child { overflow-wrap: anywhere; }
/* El dato de apoyo bajo su dato (la fecha del contrato, de quién depende) va en
   gris; el naranja se guarda para lo que pide algo (`.ec-fila.alerta`). */
.ec-fila small.apoyo { color: var(--ink-3); }

/* LA FILA DE BOTONES QUE NO CAMBIA DE LUGAR  ({% verbos fijo %}, 28-sep-2026).
   En el teléfono es una rejilla de dos, todos del mismo ancho: cada botón cae
   siempre en el mismo lugar, en vez de acomodarse según lo largo de su texto. */
@media (max-width: 640px) {
  .verbos.fijos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .verbos.fijos .btn, .verbos.fijos .verbo-form, .verbos.fijos .verbo-form .btn {
    width: 100%; justify-content: center; text-align: center; margin: 0; }
  .verbos.fijos .verbos-raya { display: none; }
  /* La VUELTA no es una decisión más (6-oct-2026). En la firma de un cargo de
     tarjeta, «Cargos en reclamación» caía en la rejilla como cuarto botón, del
     mismo tamaño que las tres salidas, y se leía como una cuarta salida. Lo de
     consulta (ver, volver) ocupa su renglón propio, a todo lo ancho y sin marco:
     se ve como la liga que es, debajo de lo que sí se decide. */
  .verbos.fijos .consulta { grid-column: 1 / -1; border-color: transparent;
    background: transparent; color: var(--ink-2); text-decoration: underline;
    text-underline-offset: 3px; }
}
/* EL PRINCIPAL OCUPA EL RENGLÓN COMPLETO EN EL TELÉFONO (Pablo, 9-oct-2026). Con una etiqueta
   larga —«Subir el complemento y volver a CXP-00001»— el principal compartía renglón con otro
   botón y su texto se partía en cuatro líneas. Ahora va solo, a todo lo ancho, y los demás
   quedan debajo en su rejilla de siempre. Vale para la fila de abajo (`fijo` o no); no para las
   filas chicas de un título, de una barra, de una celda o de un renglón de estado de cuenta, que
   son compactas a propósito. En escritorio no cambia nada. */
@media (max-width: 640px) {
  .verbos:not(:is(.titulo-acciones, .barra-arriba, td, .ec-fila) .verbos) > .btn.principal,
  .verbos:not(:is(.titulo-acciones, .barra-arriba, td, .ec-fila) .verbos) > .verbo-form:has(> .btn.principal) {
    flex: 1 1 100%; grid-column: 1 / -1; width: 100%; margin: 0; text-align: center; justify-content: center; }
  .verbos:not(:is(.titulo-acciones, .barra-arriba, td, .ec-fila) .verbos) > .verbo-form > .btn.principal {
    width: 100%; justify-content: center; text-align: center; }
}
/* Un botón congelado dentro del renglón de una lista (quien todavía no tiene
   expediente): la fila de verbos nace con aire arriba porque va sobre una tabla;
   dentro de una celda ese aire lo desalinea de los demás «Abrir». */
.tabla td.accion { text-align: right; white-space: nowrap; }
.tabla td.accion .verbos { margin: 0; display: inline-flex; }
.tabla td.accion .verbos .btn { padding: 4px 11px; font-size: 12.5px; min-height: 0; }
/* R-305 (7-oct-2026, Comisiones): un botón por renglón dentro de un cuadro — «Volver a
   mandar a firma» en cada liquidación que no procedió. Va debajo del dato, pegado a la
   derecha, chico como el «Abrir» de una tabla. El cuadro deja salir la burbuja del
   congelado (`overflow: visible`) y redondea él mismo la barra de su título. */
.tabla td.accion > .btn + .verbos { margin-left: 6px; }
.ec-bloque.con-verbos { overflow: visible; }
.ec-bloque.con-verbos > h3 { border-radius: 11px 11px 0 0; }
.ec-fila .verbos { margin: 6px 0 2px; display: flex; justify-content: flex-end; }
.ec-fila.suelta .verbos { justify-content: flex-start; }
.ec-fila .verbos .btn { padding: 4px 11px; font-size: 12.5px; min-height: 0; font-weight: 600;
  white-space: nowrap; }

/* =====================================================================
   PIEZAS 22-25 · LA HOJA, EL RECIBO Y LOS DATOS AL CENTRO  (Pablo, 2-oct-2026)
   =====================================================================
   *«propón algo diferente, algo nuevo mejorado… lúcete»* — después de rechazar
   la tabla de pares y los cuadros de barra naranja para la factura de la
   agencia. Lo que aprobó, viéndolo en la maqueta:
     · la HOJA: un documento se dibuja como hoja blanca con su folio en ficha;
     · el RECIBO: concepto · guía punteada · monto, total grande con doble
       línea y una barra de colores con el reparto (el ojo no viaja);
     · los DATOS AL CENTRO: el rótulo a la derecha, pegado a su dato.
   La paleta de la barra es CATEGÓRICA (r1…r5, en orden); el naranja (ra) se
   guarda para el renglón que pide atención — una multa —, como en todo el ERP.
   ⚠️ Los selectores de los campos llevan la cadena larga de `:not()` a
   propósito: la regla global de mely_erp.css (input:not(…) × 5) les gana a
   una clase sola y los estiraba al 100 % del renglón.
   ===================================================================== */
.pliego { background: var(--card, #fff); border: 1px solid var(--hairline); border-radius: 16px;
          box-shadow: 0 1px 2px rgba(16,16,20,.04), 0 10px 30px rgba(16,16,20,.05); min-width: 0; }
.pliego-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
              padding: 18px 22px 14px; border-bottom: 1px solid var(--hairline-2); }
.pliego-cab-txt { min-width: 0; }
.pliego-tit { font-size: 12px; font-weight: 650; color: var(--ink-2); margin: 0 0 3px; }
.pliego-quien { font-size: 16px; font-weight: 680; letter-spacing: -.2px; line-height: 1.25; overflow-wrap: anywhere; }
.pliego-quien small { display: block; font-size: 12.5px; color: var(--ink-2); font-weight: 500; margin-top: 3px; letter-spacing: 0; }
.pliego-grande { font-size: 30px; font-weight: 740; letter-spacing: -.7px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.pliego-grande small { font-size: 14px; color: var(--ink-2); font-weight: 600; margin-right: 6px; letter-spacing: 0; }
.pliego-folio { font-family: var(--mono); font-size: 12.5px; background: var(--card-2); border: 1px solid var(--hairline);
                border-radius: 8px; padding: 4px 9px; white-space: nowrap; }
.pliego-cuerpo { padding: 16px 22px 18px; }
@media (max-width: 560px) { .pliego-cab, .pliego-cuerpo { padding-left: 16px; padding-right: 16px; } }

/* La barra del reparto y su paleta. */
.mezcla { display: flex; gap: 2px; height: 8px; border-radius: 99px; overflow: hidden; background: var(--hairline-2); margin: 0 0 12px; }
.mezcla span { display: block; height: 100%; transition: width .25s ease; }
.m-r1 { background: var(--ink); } .m-r2 { background: var(--blue-line); } .m-r3 { background: var(--stone); }
.m-r4 { background: var(--stone-light); } .m-r5 { background: var(--hairline); } .m-ra { background: var(--orange); }

.recibo-renglon { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 14px; }
.recibo-pto { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; }
.recibo-que { white-space: nowrap; }
.recibo-que small { color: var(--ink-3); font-size: 12px; margin-left: 6px; font-weight: 500; }
.recibo-guia { flex: 1; min-width: 14px; border-bottom: 1px dotted var(--ink-3); transform: translateY(3px); }
.recibo-cuanto { font-variant-numeric: tabular-nums; font-weight: 620; white-space: nowrap; text-align: right; }
.recibo-pct { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 12px; min-width: 34px; text-align: right; }
.recibo-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
                border-top: 3px double var(--ink); margin-top: 10px; padding-top: 10px; }
.recibo-total .recibo-que { font-size: 14px; font-weight: 680; }
.recibo-total .recibo-cuanto { font-size: 28px; font-weight: 720; letter-spacing: -.6px; }
.recibo-total .recibo-cuanto small { font-size: 13px; color: var(--ink-2); font-weight: 600; margin-right: 5px; letter-spacing: 0; }
.recibo-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 16px -22px -18px; padding: 11px 22px;
              background: var(--card-2); border-top: 1px solid var(--hairline-2); border-radius: 0 0 16px 16px;
              font-size: 13px; color: var(--ink-2); }
.recibo-pie b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 640; margin-left: 4px; }
.recibo-pie-doc { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recibo-estado { font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: 99px;
                 background: var(--blue-soft); color: var(--blue-ink); border: 1px solid var(--blue-line); }
.datos-centro dd .dato-linea { white-space: nowrap; }
@media (max-width: 560px) {
  .recibo-que { white-space: normal; } .recibo-pct { display: none; }
  .recibo-total .recibo-cuanto { font-size: 24px; }
  .recibo-pie { margin: 16px -16px -18px; padding: 11px 16px; }
}

/* El recibo que se teclea. */
.recibo-ayuda { font-size: 12px; color: var(--ink-3); margin: 0 0 8px; }
.recibo input.recibo-monto:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.sr-only) {
  flex: 0 0 116px; width: 116px; min-width: 0; text-align: right; font: inherit; font-weight: 620;
  font-variant-numeric: tabular-nums; border: 1px solid var(--hairline); border-radius: 9px; padding: 6px 10px; }
.recibo input.recibo-nombre:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.sr-only) {
  flex: 1 1 auto; width: auto; min-width: 0; max-width: 300px; font: inherit; font-size: 13px;
  border: 1px solid var(--hairline); border-radius: 9px; padding: 6px 10px; }
.recibo-hijo { padding: 0 0 6px 18px; }
.recibo-hijo .recibo-que { color: var(--ink-2); font-size: 13px; }
.recibo-agregar { font: inherit; font-size: 13px; font-weight: 600; color: var(--orange-ink); background: none; border: 0; padding: 6px 0; cursor: pointer; }
.recibo-agregar:hover { text-decoration: underline; }
.recibo-cuadre { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px;
                 margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--hairline-2); }
.recibo-cuadre label { font-size: 13.5px; font-weight: 620; }
.recibo-cuadre-der { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.recibo-veredicto { font-size: 13px; font-weight: 650; white-space: nowrap; }
.recibo-veredicto.si { color: var(--success-ink); } .recibo-veredicto.no { color: var(--critical-ink); }
.recibo-veredicto.si::before { content: "✓ "; } .recibo-veredicto.no::before { content: "✕ "; }

/* Los datos al centro: rótulo a la derecha, pegado a su dato. */
.datos-centro { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; margin: 0; font-size: 13.5px; }
.datos-centro dt { text-align: right; color: var(--ink-2); padding: 7px 0; border-bottom: 1px solid var(--hairline-2); }
.datos-centro dd { margin: 0; padding: 7px 0; font-weight: 620; font-variant-numeric: tabular-nums;
                   border-bottom: 1px solid var(--hairline-2); overflow-wrap: anywhere; }
.datos-centro dt:last-of-type, .datos-centro dd:last-of-type { border-bottom: 0; }
.datos-centro dd small { display: block; font-weight: 500; color: var(--ink-3); font-size: 12px; }
.datos-centro dd.alerta { color: var(--critical-ink); }

/* Dos hojas lado a lado, y la captura con su lado fijo. */
.pliegos { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 480px); gap: 18px; align-items: start; margin-top: 16px; }
.pliegos-captura { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; margin-top: 10px; }
.pliegos-captura > .pliego:last-child { position: sticky; top: 16px; }
@media (max-width: 980px) { .pliegos, .pliegos-captura { grid-template-columns: 1fr; } .pliegos-captura > .pliego:last-child { position: static; } }
.pliego .btn-cifra { width: 100%; justify-content: center; margin-top: 14px; padding: 12px 18px; font-size: 15px;
                     background: var(--orange-ink); color: #fff; border: 0; border-radius: 12px; }
.pliego .btn-cifra:hover { background: var(--ink); color: #fff; }
.pliego .btn-cifra[disabled] { background: var(--hairline); color: var(--ink-3); cursor: not-allowed; }
.pliego .por-que-no { font-size: 12.5px; color: var(--critical-ink); text-align: center; margin: 7px 0 0; }

/* ── LA REQUISICIÓN CLARA (Pablo, 9-oct-2026) ─────────────────────────────────
   Tres cosas que la maqueta aprobada pedía y ninguna pieza hacía. Viven aquí, en
   la pieza, y no en la plantilla: la requisición es la primera, pero no la única
   pantalla con tres hojas, un recibo de subtotal + IVA o una tabla que se teclea. */

/* 1 · Tres hojas lado a lado (Datos · Firmas · Total): `.pliegos.tres`. */
.pliegos.tres { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 980px) { .pliegos.tres { grid-template-columns: 1fr; } }

/* 2 · El recibo SIN barra de reparto (`{% recibo … reparto=False %}`): subtotal más
   IVA no es un reparto, así que no lleva colores; a la izquierda de la cifra va su
   dato de apoyo («16 %», «No lleva»), como manda C7. */
.recibo.sin-reparto .recibo-renglon { font-size: 14px; }
.recibo .recibo-apoyo { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.recibo + .recibo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline-2); }

/* 3 · La tabla que se TECLEA (`table.tabla.tabla-captura`): cada celda lleva sólo su
   control —el rótulo ya está en el encabezado (ley 03)— y no se aplasta. */
.tabla.tabla-captura td input:not([type="checkbox"]):not([type="radio"]),
.tabla.tabla-captura td select { width: 100%; min-width: 0; }
.tabla.tabla-captura td .campo { min-width: 0; }
.tabla.tabla-captura td.que-largo .campo { min-width: 220px; }
.tabla.tabla-captura td.num input { text-align: right; min-width: 96px; max-width: 140px; margin-left: auto; display: block; }
.tabla.tabla-captura td.que-largo { min-width: 240px; white-space: normal; }
.tabla.tabla-captura td select.c-mon { min-width: 78px; }
.tabla td.qn { color: var(--ink-3); font-variant-numeric: tabular-nums; width: 28px; }
.tabla td.que-largo { white-space: normal; min-width: 220px; }
.tabla th.chk, .tabla td.chk { width: 34px; text-align: center; }
.tabla td.chk .campo { min-width: 0; width: auto; margin: 0; display: inline-block; }
.tabla td.chk .casilla { margin: 0; }
.tabla td.nw { white-space: nowrap; }
.tabla td .sub2 { display: block; color: var(--ink-3); font-size: 12px; font-weight: 500; }
@media (max-width: 640px) {
  .tabla td.que-largo, .tabla.tabla-captura td.que-largo { min-width: 0; }
  .tabla td.qn { display: none; }
  .tabla th.chk, .tabla td.chk { width: auto; text-align: left; }
}
/* «＋ Agregar renglón» (`[data-renglones-agregar]`, mely_campos.js): clona el último. */
.agregar-renglon { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--orange-ink); background: none; border: 0; padding: 10px 0 0; cursor: pointer; }
.agregar-renglon:hover { text-decoration: underline; }

/* ── PIEZA 26 · EL TOTAL CHICO (`{% total_chico %}`, R-334, 13-oct-2026) ──────
   El total de la requisición era un recibo grande POR MONEDA: con pesos y dólares,
   dos recibos apilados, y la tasa del IVA de apoyo junto a la cifra. Pablo, con la
   maqueta del IVA al 8 %: una tabla chica —Subtotal sin IVA · IVA · 8 % · Total con
   IVA— con una columna por moneda y la moneda en el encabezado (ley 06: lo uniforme
   va en tabla; ley 03: la moneda se dice una vez, arriba).

   Es una `.tabla.no-se-parte.angosta`: en el teléfono NO se vuelve tarjetas (los
   tres renglones se leen por columna) y cabe entera en 390 px con dos monedas.
   Angosta a propósito (ley 08 al revés: tres cifras a todo lo ancho dejan el
   rótulo a un palmo de su número). El renglón del total pesa más (ley 05). */
.total-chico { max-width: 420px; }
.total-chico .tabla { width: 100%; }
.total-chico .tabla th, .total-chico .tabla td { padding-top: 6px; padding-bottom: 6px; }
.total-chico .tabla td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.total-chico .tabla tbody tr.suma td { font-weight: 700; }
/* En vivo (Cotizar) la pieza trae las columnas de todas las monedas posibles y
   `mely_campos.js` esconde con `hidden` la que nadie eligió (el `[hidden]` de
   `mely_erp.css` le gana al `display: table-cell` de `.no-se-parte`). */
.total-chico-falta { margin: 8px 0 0; font-size: var(--t-apoyo); color: var(--ink-3); }
.total-chico + .verbos { margin-top: var(--e-3); }

/* ── Las preguntas de «Vender sin IVA» (R-325, 9-oct-2026) ─────────────────
   Un renglón cada una: número · pregunta · respuesta · riesgo. Vivían dentro de
   la ficha del cliente (`_vender_sin_iva.html`); el paso «Aprobar» del
   exportador es la segunda pantalla que las pinta, así que suben aquí y las dos
   usan la MISMA fila (`catalogos/_sin_iva_preguntas.html`). Son renglones de un
   formulario, no una tabla de datos (F3). En teléfono el número y el riesgo van
   arriba, junto a la pregunta, y las opciones debajo. */
.preg { margin-top: var(--e-3); }
.preg .preg-fila { display: grid; grid-template-columns: 22px minmax(0, 36%) minmax(0, 1fr) 80px;
                   gap: 0 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); align-items: start; }
.preg .n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.preg .r { text-align: right; }
.preg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.preg .campo { margin-top: var(--e-2); max-width: 420px; }
@media (max-width: 640px) {
  .preg .preg-fila { grid-template-columns: 22px 1fr auto; row-gap: 6px; }
  .preg .a { grid-column: 1 / -1; grid-row: 2; }
}

/* =====================================================================
   TU NEGOCIO HOY (17-oct-2026) — Indicadores › la sala de entrada
   Tres cuadros con su dibujo (tu_negocio_hoy.js): el mapa de una resta, la
   línea de tiempo de un peso y la carrera del mes. Lo que aquí vive es el
   cuadro (.rx) y las clases de los tres dibujos; las cifras de letrero son
   las de la pared (.cifrota, .rotulo-bloque, .apoyo).
   ===================================================================== */
.rx { display: flex; flex-direction: column; min-width: 0; }
.rx-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.rx .pregunta { font-size: 13px; color: var(--ink-2); margin: 2px 0 0; }
.rx .cifrota { margin-top: 10px; }
.rx .cifrota.rojo { color: #D93025; }
.rx-fila { display: grid; gap: 18px; margin-bottom: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .rx-fila { grid-template-columns: minmax(0, 1fr); } }
.rx-pastilla { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: #F1F1F3; color: var(--ink-2); }
.rx-pastilla.sube { background: #E7F5EC; color: #1C7C3C; }
.rx-pastilla.baja { background: #FDE8E6; color: #D93025; }
.rx-svg { width: 100%; height: auto; display: block; margin-top: 12px; overflow: visible; }
.rx-svg text { fill: var(--ink-2); font-size: 12px; }
.rx-svg text.v { fill: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.rx-svg text.vb { fill: var(--ink); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.rx-svg text.r, .rx-svg tspan.r { fill: var(--critical); font-weight: 700; }
.rx-svg text.g { fill: #1C7C3C; font-weight: 700; }
.rx-svg text.rot { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; fill: var(--ink-3); font-weight: 600; }
.rx-svg text.tt { fill: #2B2118; font-weight: 700; font-size: 13px; }
.rx-svg text.ts { fill: #2B2118; font-size: 12px; }
.rx-svg text.ttw { fill: #fff; font-weight: 700; font-size: 13px; }
.rx-svg text.tsw { fill: #fff; font-size: 12px; opacity: .85; }
.rx-svg text.enorme { font-size: 30px; font-weight: 800; fill: var(--ink); letter-spacing: -1px; }
.rx-svg text.enorme.rojo { fill: var(--critical); }
.rx-svg text.signo { font-size: 34px; font-weight: 300; fill: var(--ink-3); }
.rx-svg .eje { stroke: var(--hairline); stroke-width: 1; }
.rx-svg .meta { stroke: var(--ink-3); stroke-dasharray: 4 3; stroke-width: 1.2; }
.rx-svg .tesela { stroke: #fff; stroke-width: 3; }
.rx-svg .linea-o { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rx-svg .linea-g { fill: none; stroke: #8E8E93; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rx-svg .linea-ref { stroke: #8E8E93; stroke-dasharray: 4 4; stroke-width: 1.2; opacity: .7; }
.rx-svg .relleno-ok { fill: #1C7C3C; opacity: .12; }
.rx-svg .relleno-mal { fill: var(--critical); opacity: .12; }
.rx-svg .punto { fill: var(--orange); stroke: #fff; stroke-width: 2.5; }
.rx-svg .pulso { fill: none; stroke: var(--orange); stroke-width: 2; opacity: 0; }
.rx-svg .hit { fill: transparent; }
.rx-leyenda { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-top: 10px; }
.rx-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.rx-leyenda .signo { font-weight: 700; color: var(--ink); }
.rx-leyenda .salto { flex-basis: 100%; height: 0; }
.rx-leyenda b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rx-leyenda .rojo, .rx-pies .rojo, .mini-barras b.rojo { color: #D93025; font-weight: 600; }
.mota-rx { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mota-bodega { background: #BCAB9B; } .mota-cobrar { background: #D8D3CC; } .mota-banco { background: var(--orange); }
.mota-pagado { background: #E8D9C4; } .mota-cajas { background: #F3B27A; } .mota-prestamos { background: #F9D5B5; } .mota-sat_favor { background: #EBD9B0; }
.mota-prov { background: #4A4A4F; } .mota-banco_deuda { background: #2B2B30; } .mota-sinfac { background: #6B6B70; }
.mota-nomina { background: #86868B; } .mota-sat { background: #9E9EA3; } .mota-tarjeta { background: #B5B5BA; }
.mota-estimado { background: repeating-linear-gradient(45deg, #9E9EA3 0 2px, #fff 2px 4px); border: 1px solid #9E9EA3; }
.ficha-por-venir { margin-top: 8px; }
.mota-gasto { background: #8E8E93; } .mota-gasto-ref { background: transparent; border-top: 2px dashed #8E8E93; height: 0; border-radius: 0; }
.rx-ojo { font-size: 12.5px; color: #D93025; font-weight: 600; margin: 8px 0 0; }
.rx-apoyo { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; line-height: 1.45; }
.rx-pies { margin: 10px 0 0; display: grid; gap: 3px; font-size: 13px; color: var(--ink-2); }
.rx-pies b { color: var(--ink); }
.rx-ir { margin-top: auto; padding-top: 14px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.rx-ir a { color: var(--orange-ink); text-decoration: none; }
#rx-tip { position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.4; padding: 8px 11px; border-radius: 9px; box-shadow: 0 6px 20px rgba(0,0,0,.18); opacity: 0; transition: opacity .12s; max-width: 260px; }
#rx-tip b { display: block; font-size: 13px; margin-bottom: 2px; }
.dinero-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .dinero-cuerpo { grid-template-columns: minmax(0, 1fr); } }
.lado { border-left: 1px solid var(--hairline); padding-left: 18px; }
@media (max-width: 900px) { .lado { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: 12px; } }
.lado h3 { font-size: 13px; margin: 0; color: var(--ink-2); font-weight: 600; }
.lado .lado-titulo { margin-top: 16px; }
.anillo { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.anillo svg { width: 92px; height: 92px; flex: none; }
.anillo .fondo { fill: none; stroke: #EFEFF2; stroke-width: 9; }
.anillo .lleno { fill: none; stroke: var(--orange); stroke-width: 9; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); }
.anillo .marca { stroke: var(--ink); stroke-width: 2; }
.anillo .n { font-size: 24px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.anillo .u { font-size: 10px; fill: var(--ink-2); }
.anillo .t { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.anillo .t b { color: var(--ink); }
.mini-barras { display: flex; gap: 10px; align-items: flex-end; height: 76px; margin-top: 14px; }
.mini-barras > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 11px; color: var(--ink-2); gap: 4px; }
.mini-barras i { display: block; width: 100%; max-width: 46px; height: 4px; border-radius: 4px; background: #1C7C3C; transform-origin: bottom; animation: rx-crece .9s cubic-bezier(.2,.8,.2,1) both; }
.mini-barras i.neg { background: var(--critical); }
.mini-barras i.curso { opacity: .55; }
.mini-barras b { color: var(--ink); font-variant-numeric: tabular-nums; }
@keyframes rx-crece { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .mini-barras i { animation: none; } .anillo .lleno { transition: none; } }

/* ── Una lista DENTRO de una celda (Logística › Viajes, «A dónde fue», 19-oct-2026).
   Cada cosa en su renglón —una parada del recorrido— sin viñetas ni sangría, y un
   folio que no se parte a la mitad («EMB-» arriba, «00212» abajo, lo cazó la foto). */
.tabla .lista-en-celda { margin: 0; padding: 0; list-style: none; line-height: 1.45; }
.tabla .lista-en-celda li + li { margin-top: 3px; }
.tabla .lista-en-celda .sin-partir { white-space: nowrap; }

/* ── Una ficha suelta no se pega a lo que sigue (19-oct-2026, la foto de «Cómo nació»).
   `dl.ficha` nace sin margen para vivir dentro de una tarjeta o de `.fichas-en-fila`;
   cuando va SOLA arriba de una tarjeta o de los campos de un formulario, quedaba
   pegada a ellos. */
dl.ficha + .tarjeta, dl.ficha + .captura, dl.ficha + form { margin-top: 14px; }