/* Visor de un expediente (/inspector/<slug>/presentacion/): las hojas de a una. Las hojas en sí las dibuja
   presentacion.css, el mismo estilo del PDF; acá va solo lo que la web agrega alrededor. El índice y la página
   de cada expediente usan inspector.css. */
:root {
  --naranja: #F7931A;
  --tinta: #111111;
  --fondo-visor: #222222;
  --alto-barra: 48px;
  --alto-navegacion: 56px;
}

/* presentacion.css trae `zoom: 1.3` para compensar la escala de wkhtmltopdf; en el navegador la escala
   la pone deck.js según la pantalla. */
body { zoom: 1; margin: 0; font-family: "Noto Sans", "DejaVu Sans", sans-serif; }

/* ── Visor ──────────────────────────────────────────────────────────────── */
.deck-page { background: var(--fondo-visor); color: #fff; height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; }
.deck-bar { height: var(--alto-barra); flex: none; display: flex; align-items: center; gap: 16px; padding: 0 16px;
  font-size: 15px; background: var(--tinta); border-bottom: 2px solid var(--naranja); }
.deck-bar a { color: var(--naranja); font-weight: 700; text-decoration: none; white-space: nowrap; }
.deck-bar a:hover, .deck-bar a:focus-visible { text-decoration: underline; }
.deck-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.deck-counter { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }

.deck-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px;
  touch-action: pan-y; }
/* El marco ocupa lo que ocupa la hoja ya escalada; adentro, la hoja va a su tamaño real y escalada desde la
   esquina. Sin el marco, un transform no cambia el lugar que ocupa y la hoja no se centra. */
.deck-frame { position: relative; flex: none; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); }
.deck-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; color: var(--tinta); }
.deck-canvas .slide { display: none; }
.deck-canvas .slide.is-active { display: block; }

.deck-nav { height: var(--alto-navegacion); flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.deck-nav button { font: inherit; font-weight: 900; font-size: 16px; min-width: 44px; height: 40px; padding: 0 14px;
  background: var(--tinta); color: var(--naranja); border: 2px solid var(--naranja); cursor: pointer; }
.deck-nav button:hover:not(:disabled), .deck-nav button:focus-visible { background: var(--naranja); color: var(--tinta); }
.deck-nav button:disabled { opacity: 0.35; cursor: default; }
.deck-progress { flex: 1; height: 6px; background: #444; }
.deck-progress span { display: block; height: 100%; width: 0; background: var(--naranja); }
.deck-hint { font-size: 13px; color: #aaa; white-space: nowrap; }

/* En un teléfono vertical la hoja apaisada queda chica: se sugiere girarlo. */
.deck-rotate { display: none; text-align: center; font-size: 14px; color: #ccc; padding: 4px 16px 0; }
@media (orientation: portrait) and (max-width: 700px) {
  .deck-rotate { display: block; }
  .deck-hint, #fullscreen { display: none; }
}
@media (max-width: 700px) {
  .deck-hint { display: none; }
}
/* Teléfono apaisado: la altura es lo que falta. Se avanza deslizando, así que la barra de botones se va
   y la de arriba se achica (el contador queda). */
@media (max-height: 500px) and (pointer: coarse) {
  :root { --alto-barra: 32px; }
  .deck-bar { font-size: 13px; }
  .deck-nav { display: none; }
  .deck-stage { padding: 4px; }
}

/* Imprimir: todas las hojas, una por página, como el PDF. */
@media print {
  .deck-page { display: block; height: auto; overflow: visible; background: #fff; }
  .deck-bar, .deck-nav, .deck-rotate { display: none; }
  .deck-stage { display: block; padding: 0; }
  .deck-frame { width: auto !important; height: auto !important; box-shadow: none; }
  .deck-canvas { position: static; transform: none !important; }
  .deck-canvas .slide { display: block; }
}