/* ═══════════════════════════════════════
   ▓ PATRÓN · Pantalla de detalle — gemelo vanilla (el lienzo) ▓
   v1.1 · 2026-10-05 · en construcción (canon firmado v1.0 el 2026-10-04). Ficha: `design-system/PATRON_PANTALLA_DETALLE.md`

   El LIENZO donde viven juntas las piezas de una pantalla de detalle (Volver, ficha con cifras, avisos,
   tarjeta de pestañas, nota): el ancho máximo, el relleno, el ritmo entre bloques y el MARCO FIJO (la página
   nunca se desplaza; sólo el cuerpo de la tarjeta de pestañas). No pinta ninguna pieza: cada una trae su hoja.
   Sólo distribuye, con tokens del canon; ninguna medida de una pieza se repite aquí.

   DECISIONES (todas de Ricardo, 2026-10-02; citas literales en la ficha):
     · D-1 ancho máximo 1240 = --content-max (incluye el relleno: la tarjeta mide 1160) — «D1 tomada, 1240».
     · D-2 relleno 24 arriba / 40 a los lados / 24 abajo, 16 entre bloques, 12 entre avisos — «d2: b» y el
       relleno equilibrado de la hoja del alto de la tarjeta (opción a).
     · D-7 marco fijo — «las pantallas no se deben scrollear hacia abajo […] solamente se scrollaría el contenido
       del contenedor de las tabs».
     · M-21 la tarjeta de pestañas llega hasta abajo y sólo se encoge con contenido corto.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`) y las hojas de las piezas, cargadas ANTES de ésta.
     2. `box-sizing: border-box`.
     3. Un contenedor con alto definido y en columna (en las apps, `.exds-content` del Shell): `.exds-pd` lo llena.
   ═══════════════════════════════════════ */

/* El host: llena el área de contenido y NUNCA se desplaza (D-7). No pinta: el fondo del lienzo lo pone el Shell (.exds-content). */
.exds-pd { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* El lienzo: columna centrada de 1240 como máximo (el tope INCLUYE el relleno), 24 / 40 / 24 y 16 entre bloques. */
.exds-pd-in { flex: 1 1 auto; min-height: 0; width: 100%; max-width: var(--content-max, 1240px); margin: 0 auto; padding: var(--space-6, 24px) var(--space-10, 40px); display: flex; flex-direction: column; gap: var(--space-4, 16px); }
.exds-pd-in > * { flex: none; }

/* Los avisos (0..N): hermanos de la ficha, apilados, 12 entre ellos. Sin avisos el contenedor no existe. */
.exds-pd-avisos { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
/* Al cerrar el último aviso el contenedor queda vacío: no se pinta, para que no deje un segundo hueco de 16 entre la ficha y la tarjeta. */
.exds-pd-avisos:empty { display: none; }

/* La tarjeta de pestañas LLEGA HASTA ABAJO: ocupa lo que queda y sólo se encoge si el contenido es corto (M-21). El bloque
   de arriba y el relleno de abajo (24 = 24) no se mueven; con contenido largo la tarjeta se detiene y se desplaza su cuerpo. */
.exds-pd-in > .exds-card[data-tpest="true"] { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.exds-pd-paneles { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Sólo el panel visible: el atributo hidden pierde contra cualquier display de autor (INC-726), por eso :not([hidden]). */
.exds-pd-paneles > :not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.exds-pd-paneles > :not([hidden]) > .exds-tpest-cuerpo,
.exds-pd-in > .exds-card[data-tpest="true"] > .exds-tpest-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
/* Panel de colección: la tabla es la que se desplaza (su cabecera pegajosa se ancla a ella) y el pie queda quieto debajo. */
.exds-pd-paneles .exds-tpest-cuerpo[data-padded="false"] > .exds-tabla,
.exds-pd-in > .exds-card[data-tpest="true"] > .exds-tpest-cuerpo[data-padded="false"] > .exds-tabla { flex: 0 1 auto; min-height: 0; align-content: start; overflow-y: auto; }
.exds-pd-paneles .exds-tpest-cuerpo > .exds-pielista,
.exds-pd-in > .exds-card[data-tpest="true"] > .exds-pielista { flex: none; }

/* El vacío de una pestaña (ícono + frase, sin pie) y el estado de toda la pantalla (error, sin permiso, no existe), dentro de su card. */
.exds-pd-vacio { display: flex; justify-content: center; padding: var(--space-4, 16px) 0 var(--space-5, 20px); }
.exds-pd-estado { padding: var(--space-8, 32px) 0; }

/* El esqueleto de carga: la forma de lo que llega (ficha + un cuerpo), sin texto. Las barras fantasma son las del catálogo (.exds-pl-skel-b). */
.exds-pd-carga { display: flex; flex-direction: column; gap: var(--space-4, 16px); }
/* ESQUELETO = MISMO TAMANO QUE EL CONTENIDO QUE VA A SUSTITUIR (Ricardo, 2026-10-02: «La pantalla cargando debe idealmente
   tener el mismo tamano que el contenido que la va a sustituir»). Quien monta pone, sobre .exds-pd-carga, el alto que pintaron la
   ficha (--exds-pd-sk-ficha) y la tarjeta de pestanas (--exds-pd-sk-alto) la ultima vez que se vieron; asi, al llegar los datos, no hay
   salto. El tope es el techo de siempre (M-21): la tarjeta del esqueleto se encoge igual que la real. SIN medida conocida (primera
   carga) la tarjeta del esqueleto llena el techo (caso de reserva: 100vh es mayor que cualquier ventana y el contenedor lo acota). */
.exds-pd-in > .exds-pd-carga { flex: 0 1 auto; min-height: 0; }
.exds-pd-carga > .exds-pd-sk-ficha { flex: none; height: var(--exds-pd-sk-ficha, auto); }
.exds-pd-carga > .exds-pd-sk-tarjeta { flex: 0 1 var(--exds-pd-sk-alto, 100vh); min-height: 0; overflow: hidden; }
.exds-pd-sk-cab { display: flex; align-items: center; gap: var(--space-4, 16px); padding: var(--space-5, 20px); }
.exds-pd-sk-av { width: 48px; height: 48px; flex: none; }
.exds-pd-sk-cuerpo { display: flex; flex-direction: column; gap: var(--space-3, 12px); padding: var(--space-5, 20px); }
.exds-pd-sk-cuerpo .exds-pl-skel-b { display: block; height: 14px; }
.exds-pd-sk-titulo { width: 280px; height: 22px; }
.exds-pd-sk-cuerpo .exds-pl-skel-b:nth-child(1) { width: 60%; }
.exds-pd-sk-cuerpo .exds-pl-skel-b:nth-child(2) { width: 75%; }
.exds-pd-sk-cuerpo .exds-pl-skel-b:nth-child(3) { width: 50%; }

/* ══ B4.e · PANEL «LISTA + VISOR» — el quinto tipo de panel (v0.2 · 2026-10-02) ══════════════════════════════════════════════
   DECISION-FUENTE: Ricardo, 2026-10-02 — «aprobados» sobre plans/decisiones/_decision_flota_documentos_2026-10-02.html (decisión 1:
   el visor AL LADO de la lista, con el botón Maximizar de AccionBarra). A la izquierda la lista de grupos (CajonFila en su segundo
   hogar, con filas de Tabla en lectura que ELIGEN); a la derecha el DocViewer embebido. Hereda M-21 ENTERA: sin alto mínimo en ningún
   nivel; el panel llena el alto que el cuerpo de la tarjeta tiene y la lista y el lienzo del visor se desplazan CADA UNO por dentro
   (el cuerpo de este panel no se desplaza). La columna de lista mide 420 px como variable PROPIA del patrón: --w-cajon es del panel
   lateral y prestarlo cambia de semántica. Ni un solo min-height con valor (H12) ni margin-top:-1: el hairline lo pinta la banda. */
.exds-pd-paneles > :not([hidden]) > .exds-tpest-cuerpo[data-lv="si"] { overflow: hidden; }
/* v1.1 (2026-10-05) — EL VISOR VA A SANGRE. DECISION-FUENTE: Ricardo, 2026-10-05 — «la decisión es sí, a sangre, pero los botones de descarga y de abrir en otra ventana van dentro del encabezado oscuro del visor».
   La columna del visor no pone relleno ni el visor radio: toca la banda de pestañas, el borde de la lista y los bordes de la tarjeta. Las acciones del archivo viven en la barra oscura del propio visor (COMPONENTE_VISOR_DOCUMENTO.md v1.2). */
/* Con cero archivos el visor NO se monta y queda UN solo vacío: el checklist de tipos, a todo el ancho. */
/* La Tabla de archivos va A SANGRE dentro del tipo abierto: el desplegable de la fila trae relleno propio (pensado para texto) y aquí lo cede. */
/* v1.1 (2026-10-05) — LA SANGRÍA DE LO DESPLEGADO: el contenido que se abre bajo un rótulo arranca UN PASO más adentro que el rótulo (lógica de viñetas).
   DECISION-FUENTE: Ricardo, 2026-10-05 — «b», sobre plans/decisiones/_decision_pd_sangria_documentos_2026-10-05.html. Rótulo del tipo a 20 (--space-5); el
   texto de la primera celda de cada archivo a 32 (--space-8 = 20 + 12); relleno derecho 20. El fondo de la fila elegida o en hover sigue de borde a borde: sólo se
   mueve el texto, por eso la sangría va en la CELDA y no en el contenedor (que sigue sin relleno). RETIRA, para el contenido desplegado de este panel, la regla de
   «mismo eje vertical» de cajon-lateral.css (.exds-cajon-desp-c) y la de «sin sangría propia» de PATRON_CAJON_LATERAL.md. Regla en el sitio del patrón: ni Tabla ni CajonFila se deforman. */
/* UNA SOLA hairline entre el último archivo de un tipo abierto y la fila que sigue. Medido 2026-10-05: el último renglón de la Tabla trae su
   border-bottom de 1 px (tabla.css, regla de lectura a sangre: «border-bottom en cada renglón») y la CajonFila siguiente trae su border-top de 1 px
   (cajon-lateral.css, .exds-cajon-fila): dos líneas apiladas = 2 px, la única divisoria gruesa de la lista. La divisoria entre tipos es la de la fila
   que sigue; el último renglón de cada Tabla cede la suya. Ninguna pieza canónica se deforma: sólo se resuelve el cruce en el sitio donde se montan juntas. */
/* La segunda línea de la celda de dos líneas nunca pesa más que la primera: la celda de una Tabla en lectura va a 12 y la hoja de la lista pinta su
   segunda línea a 13; dentro de este panel baja un peldaño del canon (--fs-eyebrow, 11). */
/* Maximizado (AccionBarra · AB-13): la tarjeta entera cubre la ventana; el relleno de la tarjeta redonda se cede al borde de pantalla. */
.exds-card[data-tpest="true"][data-ab-maximizado="true"] { border-radius: 0; display: flex; flex-direction: column; }
/* Los estados de la PESTAÑA Documentos (v1.1): cargando la lista = esqueleto con la forma del panel (filas de tipos a la izquierda, un bloque a sangre en el sitio del visor);
   error de la lista = el estado canónico en el cuerpo (.exds-pd-vacio); cargando el archivo = el Cargando del lienzo del visor; error del archivo = el estado canónico en el
   sitio del visor, FUERA del lienzo oscuro (.exds-pd-panel-lv-visor > .exds-pd-vacio). Barras fantasma: las del catálogo (.exds-pl-skel-b). */
.exds-pd-panel-lv-lista.exds-pd-sk-cuerpo .exds-pl-skel-b { height: 14px; width: 70%; }
.exds-pd-panel-lv-lista.exds-pd-sk-cuerpo .exds-pl-skel-b:nth-child(even) { width: 55%; }
.exds-pd-panel-lv-visor > .exds-pd-sk-visor { flex: 1 1 auto; min-height: 0; height: auto; border-radius: 0; }
.exds-pd-panel-lv-visor > .exds-pd-vacio { flex: 1 1 auto; align-items: center; }
/* Primera carga de la lista: no hay medida conocida del panel, así que el esqueleto llena el techo (caso de reserva de PD-20: 100vh es mayor que cualquier ventana y la tarjeta lo acota; M-21). */