/* Page: Viewer (Full-screen magazine reader)
   El visor es una capa fija a pantalla completa y oscura en los DOS temas: la revista se
   lee como un objeto sobre fondo neutro, no como una página del site. De ahí la escala
   on-ink fija y el anillo de foco claro. */
.viewer-page {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background-color: var(--surface-ink);
    color: var(--text-on-ink);
    --focus-ring: var(--focus-on-ink);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Con la barra de inicio de iOS por medio, los controles de Issuu del pie quedaban
       debajo de ella. env() vale 0 donde no hay muesca ni barra. */
    padding-bottom: env(safe-area-inset-bottom);
}

/* Cabecera, mancheta, pie y salto al contenido del site: header.php y footer.php son
   comunes y se pintan también aquí. Debajo de la capa fija no se ven, pero seguían en el
   orden de tabulación (el foco desaparecía bajo el visor) y en el árbol de accesibilidad.
   display:none y no visibility:hidden: además de sacarlos del foco, les quita la caja,
   así que el documento no tiene altura propia y no hay scroll fantasma tras la capa. */
body:has(.viewer-page) :is(.skip-link, .header, .header__mancheta, .footer, .mp-ad-top) {
    display: none;
}

/* Header bar */
.viewer-header {
    background: var(--surface-ink);
    border-bottom: 1px solid var(--border-on-ink);
    padding: var(--space-s) var(--space-m);
    /* Muesca en horizontal y barra de estado en iOS: la barra no se mete debajo. El
       max() conserva el relleno normal donde env() es 0. */
    padding-top: max(var(--space-s), env(safe-area-inset-top));
    padding-left: max(var(--space-m), env(safe-area-inset-left));
    padding-right: max(var(--space-m), env(safe-area-inset-right));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
}

.viewer-header__info {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.viewer-header__back {
    color: var(--text-on-ink);
    text-decoration: none;
    font-size: 1.5rem;
}

/* Es el <h1> de la página, con el aspecto del rótulo de barra que tenía como <div>:
   se anulan la serif, el tamaño y el margen de h1 de base. */
.viewer-header__title {
    margin: 0;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-weight: 700;
    color: var(--text-on-ink);
}

/* El visor es pantalla completa sobre negro: el dorado de texto se queda en
   2,1:1 ahí, hace falta la escala clara. */
.viewer-header__title span {
    color: var(--accent-on-ink);
}

.viewer-header__actions {
    display: flex;
    gap: var(--space-s);
    flex: none;
}

.viewer-header__actions .btn {
    font-size: 0.75rem;
}

/* Main container */
.viewer-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--surface-ink);
}

/* Embed de Issuu: el <iframe> de codigo_visor trae height:50vw en línea (pensado para
   la página de revista del site principal); aquí ocupa todo el contenedor. */
.viewer-container iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: none;
}

/* Edición sin código de visor todavía */
.viewer-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    padding: var(--space-m);
    text-align: center;
    color: var(--text-dim-on-ink);
}