/* ═══════════════════════════════════════════════════════════════════════════════
   visor-documento.css — GEMELO VANILLA de `DocViewer` — v1.4 · 2026-10-07

   FUENTE ÚNICA: `catalogo-cd/components/DocViewer.jsx` ·
   Ficha: `design-system/COMPONENTE_VISOR_DOCUMENTO.md` v1.2.
   Cada regla de aquí es la MISMA de allí, con las MISMAS medidas. Si difieren, manda el kit.

   El panel donde el analista REVISA el documento del cliente: barra con nombre de archivo,
   zoom (− 100% +), indicador de página y las dos acciones del ARCHIVO (descargar · abrir en otra pestaña),
   todo en el encabezado oscuro, sobre un LIENZO oscuro con la página en retrato.

   ⛔ EL LIENZO ES MATERIAL, NO CHROME. El fondo oscuro y sus textos usan los tokens
   `--color-doc-*` (excepción documentada, Ricardo 2026-07-28): representan el material
   renderizado (el PDF), no la superficie del DS — no se homologan a los grises del sistema
   claro aunque el resto de la app esté en modo claro.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`), en particular los siete `--color-doc-*`.
     2. `box-sizing: border-box`.
   ═══════════════════════════════════════════════════════════════════════════════ */

.exds-dv {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-doc-canvas, #43474D);
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
}

.exds-dv-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: var(--color-doc-fg, #C2C8D0);
  font-size: var(--fs-caption, 12px);
  border-bottom: 1px solid var(--color-doc-bar, #2A3138);
  flex-shrink: 0;
}

.exds-dv-name {
  flex: 1;
  min-width: 0;
  color: var(--color-doc-fg-strong, #E4E7EB);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* EL NOMBRE QUE NO CABE (v1.5, 2026-10-14 · regla dura 18, Ricardo 2026-10-08): una línea, «…» y globo de tinta SÓLO si se recorta
   (data-tip + data-tip-pos + data-tip-si-recorte en el propio nombre, que tooltip.js envuelve en .exds-tip-wrap). El wrap es inline-flex sin
   tope: sin esta regla crece con el texto y la elipsis nunca ocurre (mismo porqué que .exds-filacontraparte-txt > .exds-tip-wrap). */
.exds-dv-bar > .exds-tip-wrap:has(> .exds-dv-name) {
  display: flex;
  flex: 1;
  min-width: 0;
}

.exds-dv-zoom {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-doc-bar, #2A3138);
  border-radius: var(--radius-md, 10px);
  padding: 2px;
}

.exds-dv-zb {
  width: 28px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--color-doc-fg, #C2C8D0);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.exds-dv-zb:hover {
  background: var(--color-doc-bar-hover, #3A4149);
}

.exds-dv-zoom-pct {
  font-size: var(--fs-eyebrow, 11px);
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.exds-dv-pageind {
  font-size: var(--fs-eyebrow, 11px);
  color: var(--color-doc-fg-dim, #9AA2AC);
  font-variant-numeric: tabular-nums;
}

/* v1.2 (2026-10-05): las acciones del ARCHIVO (descargar · abrir en otra pestaña) viven en el encabezado oscuro del visor.
   DECISION-FUENTE: Ricardo, 2026-10-05 — «Los botones que son propios de acciones que corresponden al documento que muestra el visor van dentro del encabezado del visor. En este caso, si es un botón de descarga del PDF o de abrir en otra ventana ese mismo PDF, va dentro del encabezado. Como regla general, los botones van en la sección cuya acción afecta.»
   Son botones crudos de sólo ícono sobre el material oscuro (mismo suelo que el zoom, tokens doc-*); los del catálogo traerían la piel del sistema claro encima del render. Hover = el que ya tenía este botón antes de v1.1. */
.exds-dv-ico {
  width: 30px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--color-doc-fg, #C2C8D0);
  cursor: pointer;
  border-radius: var(--radius-sm, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.exds-dv-ico:hover {
  background: var(--color-doc-bar, #2A3138);
}
/* El par de acciones va junto, como los botones del zoom: la barra separa a 12 y entre los dos íconos quedan 2. */
.exds-dv-ico + .exds-dv-ico { margin-left: calc(var(--space-2, 8px) * -1.25); }

.exds-dv-zb:focus-visible,
.exds-dv-ico:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-doc-fg, #C2C8D0);
}

.exds-dv-canvas {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px;
}

/* El envoltorio del render real (children: PDF.js / iframe / imagen). El ANCHO es funcional
   (zoom 50–200%) y lo pone el JS en cada cambio — no es un valor que se decida una vez. */
.exds-dv-embed-wrap {
  flex-shrink: 0;
}

/* La página placeholder (sin `children`: sólo catálogo/demo). El ancho también lo calcula el
   JS a partir del zoom (58% de la base a 100%); lo estático es la proporción, el fondo, el
   radio y la sombra de profundidad. */
.exds-dv-page {
  background: var(--color-doc-page, #EEF1F4);
  aspect-ratio: 85 / 110;
  border-radius: 3px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.38);
  flex-shrink: 0;
  transition: width var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}
@media (prefers-reduced-motion: reduce) {
  .exds-dv-page { transition: none; }
}

/* ══ COSECHAS DEL 2026-08-27 · decisión 3.4 de Ricardo ═════════════════════════════════
   DECISION-FUENTE: Ricardo, 2026-08-27 — «Los cuatro: el "Cargando…" ENTRA, la barra de
   acciones ES PIEZA, se DEFINEN REGLAS PARA IMAGEN (una identificación es una foto), y el
   visor de texto legal lleva FICHA APARTE». (ESTADO.md · decisión 3.4 · handoff R2/R3/R6/R7.)
   La cuarta no vive aquí: es COMPONENTE_VISOR_TEXTO_LEGAL.md. ── */

/* ── (a) EL «CARGANDO…» · cosechado de .exv3-rev-loading ──────────────────────────────
   ⛔ NO ES COSMÉTICO: es lo único que le dice al analista que el contrato viene en camino.
   Sin él, un documento que tarda y un documento que no existe se ven EXACTAMENTE IGUAL —
   un lienzo oscuro y vacío— y la única diferencia es esperar sin saber a qué.
   Va centrado en el lienzo con margin:auto, que es lo que produccion ya hacía.
   ⚠ Producción escribe 12.5px, que no es ningún escalón: se homologa a --fs-caption (12).
   Es una de las cinco que el handoff deja decidir a Claude, del mismo tipo que 11.5 → 11:
   un valor sin nombre en el catálogo es un valor que la siguiente pantalla copia sin saber
   de dónde vino. */
.exds-dv-loading {
  margin: auto;
  color: var(--color-doc-fg-dim, #9AA2AC);
  font-size: var(--fs-caption, 12px);
}

/* ── ESTADO «SIN VISTA PREVIA» · v1.4 · 2026-10-07 ───────────────────────────────────────
   DECISION-FUENTE: Ricardo, 2026-10-07 — «Sobre el visual, voy con todas tus recomendaciones.» (decisión 3 A de
   plans/decisiones/_decision_documentos_drive_v3_2026-10-07.html). Un archivo que el visor no puede pintar (Excel, Word, XML, zip…):
   el visor se queda con su barra (nombre + «Descargar»), sin zoom, sin página y sin «Abrir en otra pestaña», y el lienzo dice
   una sola frase, centrada, con el mismo tono y tamaño que el «Cargando…». NO es un error: sin ícono de alerta y sin «Reintentar». */
.exds-dv-sinvista {
  margin: auto;
  color: var(--color-doc-fg-dim, #9AA2AC);
  font-size: var(--fs-caption, 12px);
}

/* ── (c) LA IMAGEN · el hueco del catálogo que R6 midió ────────────────────────────────
   ⛔ EL CASO MÁS COMÚN NO ES UN PDF: ES UNA FOTO. Una identificación, un comprobante
   fotografiado con el teléfono. Y esta hoja no tenía NI UNA regla para <img>, así que la
   imagen heredaba el ancho del contenedor y salía DEFORMADA o desbordada — sin que nada
   fallara ruidosamente.

   La regla es: la imagen ES la página. Mismo sitio, mismo radio, misma sombra de
   profundidad y el mismo ancho funcional que pone el zoom. Lo único que se le añade es lo
   que un PDF no necesita:
     · object-fit: contain — una credencial en horizontal dentro de una caja en vertical se
       ENCOGE, nunca se recorta ni se estira. Recortar una identificación es perder el dato.
     · height: auto — para que la proporción la mande el archivo, no la caja.
   ⛔ Y por eso NO se le pone el aspect-ratio 85/110 de la página placeholder: ese retrato es
   de una hoja de papel, y una foto tiene el suyo. */
.exds-dv-img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 3px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.38);
  transition: width var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}
@media (prefers-reduced-motion: reduce) {
  .exds-dv-img { transition: none; }
}

/* ── (b) LA BARRA DE ACCIONES DEL DOCUMENTO — RETIRADA en v1.2 (2026-10-05) ──────────────
   Cosechada el 2026-08-27 de .bo-dr-docbar como barra FUERA del lienzo (.exds-dv-acciones). Ricardo, 2026-10-05, fijó que las
   acciones del archivo van DENTRO del encabezado del visor (.exds-dv-ico, arriba): la barra de acciones y su sector ya no existen. */

/* ══ MODO EMBEBIDO · v1.1 · 2026-10-02 · A SANGRE desde v1.2 (2026-10-05) ═══════════════════════════════════════════════
   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 Maximizar). El visor ya no es una pantalla: llena el alto que su contenedor tiene (regla de
   borde M-21: sin alto mínimo); la barra del visor queda quieta arriba y sólo el lienzo se desplaza.
   v1.2: a sangre, sin radio — 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». El relleno lo cede el contenedor, no el visor. */
.exds-dv[data-embebido="true"] { flex: 1 1 auto; height: 100%; min-height: 0; border-radius: 0; overflow: hidden; }
.exds-dv[data-embebido="true"] > .exds-dv-canvas { min-height: 0; }