/* =====================================================================
   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: 128px; }
@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%; }

/* --- 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 {
  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);
  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 .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. */
.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 ruedan de lado en vez de apilarse en cuatro renglones
   y empujar la tabla fuera de la pantalla. */
@media (max-width: 640px) {
  .pestanas { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .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); }
.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.
   ===================================================================== */
.opciones { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--hairline); border-radius: 12px; overflow: hidden; background: #fff; }
.opciones .op {
  position: relative;
  display: flex; align-items: center;
  padding: 9px 16px;
  font-size: var(--t-cuerpo);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  border-right: 1px solid var(--hairline);
  transition: background .15s, color .15s;
}
.opciones .op:last-child { border-right: none; }
.opciones .op input { position: absolute; opacity: 0; pointer-events: none; }
.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); }
@media (max-width: 460px) {
  .opciones { display: flex; width: 100%; }
  .opciones .op { flex: 1; justify-content: 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 · LA TIRA DE DATOS  ({% ficha %})
   =====================================================================
   Los datos de solo lectura de un expediente (almacén, orden del cliente,
   tipo de venta, empresa, IVA…). Hoy viven en una tarjeta enorme con mucho
   aire desperdiciado; aquí es una rejilla apretada y escaneable. Ley 06:
   son datos uniformes, así que se acomodan como tabla, no como tarjetas.
   ===================================================================== */
.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e-2) var(--e-3);
  margin: 0;
}
.ficha > div { min-width: 0; }
.ficha dt {
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 2px;
}
.ficha dd {
  margin: 0;
  font-size: var(--t-cuerpo);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.ficha dd.vacia { color: var(--ink-3); }   /* ley 10: el hueco se ve hueco */

/* =====================================================================
   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; }
}

/* =====================================================================
   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); }

/* =====================================================================
   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;
}
/* 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);
}
.soltar-mano { margin: 0; text-align: center; }
.soltar-mano-s {
  display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3, #8a8a90);
}
@media (max-width: 560px) {
  .soltar { padding: 30px 16px; }
  .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 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; }


/* 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; }
.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); font-size: 12px; }
.ficha-indice .pend  { float: right; color: var(--ink-3);  font-size: 12px; }
.ficha-indice .mal   { float: right; color: var(--critical); 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; }
.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 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; }
.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; }

/* 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); }
.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; }
}