@charset "UTF-8";
@import "comun.css";
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

/* Archivo: print.css
   Autor: Rocío Sánchez Lomas
   Descripción: Colores para la impresión de la página
   Fecha: 30/10/2025
*/

:root {
    /* Opciones de texto*/
    --fuente-texto: 'DM Serif Display', serif;
    --texto-titulo: 28pt;
    --texto-interfaz: 15pt;
    --texto-subtitulo: 20pt;
    --texto-parrafo: 12pt;

    /* Paleta básica */
    --color-fondo: #ffffff;
    --color-destacado: #dddddd;
    --color-faded: #757575;
    --color-alt: #666666;
    --color-texto: #000000;
    --color1: #ffffff;
    --color2: #ffffff;
    --color3: #ffffff;
    --color4: #ffffff;
    --color5: #ffffff;
    
    /* Márgenes por defecto*/
    --padding-barra: 1.5mm;
    --padding-label: 1.0mm;
    --padding-field: 2.0mm;
    --margin-section: 2mm;
    --padding-seccion: 1.5mm; 
    --padding-boton: 0.8mm;
}

@page {
    size: A4;
    margin: 2cm 1.5cm 2cm 1.5cm !important;
}

@media print {
    /* Fuente */
    .dm-serif-display-regular {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: normal;
    }

    .dm-serif-display-regular-italic {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: italic;
    }

    /* Encabezado */
    .titulo {
        background-color: var(--color-fondo);
        padding: 0;
        margin: 0;
    }

    .logo {
        display: none;
        visibility: hidden;
    }

    h1 {
        color: var(--color-texto);
        font-size: var(--texto-titulo);
        font-family: var(--fuente-texto);
    }

    /* Botones */
    .botones-superior {
        display: none;
        visibility: hidden;
    }

    .salto {
        display: none;
        visibility: hidden;
        color: var(--color-fondo);
        padding: 0;
        margin: 0;
    }

    .arriba {
        display: none;
        visibility: hidden;
        background-color: var(--color-fondo);
        color: var(--color-fondo);
        border-radius: 0;
        padding: 0;
    }

    /* Barra de navegación */
    .menu-bar {
        display: none;
        visibility: hidden;
    }

    /* Breadcrumbs */
    .breadcrumb {
        display: none;
        visibility: hidden;
    }

    /* General */
    html, body {
        width: 210mm;
        height: 297mm;
        margin: 0;
        padding: 0;
    }
    
    article, section {
        display: block !important;
        text-align: left;
        break-inside: auto !important;
        page-break-inside: auto !important;
        overflow: visible !important;
        margin: var(--margin-section);
        padding: var(--padding-seccion);
        width: 100%;
    }

    figure {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 15px auto;
        padding: var(--padding-label);
        box-sizing: border-box;
        text-align: center;
    }

    figure img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .video iframe {
        display: none;
        visibility: hidden;
    }

    .video figcaption {
        display: block;
        font-size: var(--texto-parrafo);
        font-family: var(--fuente-texto);
        color: var(--color-texto);
        margin: 0;
        padding: 2mm;
    }

    .video figcaption a {
        content: " (" attr(href) ") ";
        font-size: var(--texto-parrafo);
        font-family: var(--fuente-texto);
        color: var(--color-texto);
        margin: 0;
        padding: 2mm;
    }

    figcaption {
        padding: var(--padding-label);
        font-size: var(--texto-parrafo);
        font-family: var(--fuente-texto);
        text-align: center;
        margin-top: 8px;
    }

    h2 {
        font-size: var(--texto-subtitulo);
        font-family: var(--fuente-texto);
        color: var(--color-texto);
        margin: 0 2mm;
        padding: 2mm;
    }

    h3 {
        font-size: var(--texto-interfaz);
        font-family: var(--fuente-texto);
        color: var(--color-texto);
        margin: 0;
        padding: 2mm;
    }

    h4 {
        font-size: var(--texto-parrafo);
        font-family: var(--fuente-texto);
        font-style: italic;
        color: var(--color-texto);
        margin: 0;
        padding: 2mm;
    }

    p {
        margin: 0;
        padding: 3mm;
    }

    p br{
        display: block;
    }

    a {
        text-decoration: underline;
        font-size: var(--texto-interfaz);
        font-family: var(--fuente-texto);
        color: var(--color-texto);
    }

    a[href^="#"] {
        text-decoration: none;
    }

    a::after {
        content: " (" attr(href) ") ";
        font-size: var(--texto-parrafo);
        color: var(--color-faded);
    }

    a[href^="#"]::after {
        content: "";
    }

    hr {
        border: none;
        border-top: 1mm solid var(--color-alt);
        height: 0;
        margin: 3mm 0;
    }

    /* Listas */
    ul {
        margin: 0;
        padding: 2mm 10mm;
    }

    ul li::marker{
        color: var(--color-alt);
    }

    ol {
        margin: 0;
        padding: 2mm 10mm;
    }

    ol li::marker{
        color: var(--color-alt);
    }

    .indice li {
        font-size: var(--texto-interfaz);
    }

    /* Tablas */
    table caption {
        padding: var(--padding-label);
    }

    /* Formularios */
    .formulario small, br {
        display: none;
    }
    
    .formulario input,
    .formulario textarea,
    .formulario select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: var(--texto-parrafo);
        margin-bottom: 1mm;
        padding: 2mm;
        border: 1mm solid var(--color-alt);
        border-radius: 6px;
    }

    .formulario input[type="number"],
    .formulario input[type="range"],
    .formulario input[type="radio"],
    .formulario input[type="checkbox"] {
        width: auto;
        border: 1mm solid var(--color-alt);
        cursor: default;
    }

    .formulario input[type="range"] {
        display: none;
    }

    .formulario .botones {
        display: none;
    }

    /* Lista de índices */
    .a-z {
        display: none;
    }

    /* Temas destacados */
    .temas-destacados {
        display: block !important;
        list-style: disc outside !important;
        text-align: left;
        justify-items: first baseline;
        width: 100%;
        margin: 0;
        padding: 0 10mm;
    }

    .temas-destacados li {
        display: list-item !important;
        text-align: left;
        padding: 0;
        margin: 0;
    }

    .temas-destacados li a img, .temas-destacados li a br {
        display: none;
    }

    .temas-destacados li a {
        display: inline !important;
        color: var(--color-texto);
    }

    /* Footer */
    footer {
        display: block;
        text-align: left;
        font-size: var(--texto-interfaz);
        background-color: var(--color1);
        color: var(--color-texto);
        padding: var(--padding-barra);
    }

    footer p::after {
        content: "© 2025 Enciclopedia Ilustrada de Salud — Todos los derechos reservados.";
        display: block;
        font-size: 10pt;
        color: var(--color-faded);
        padding: var(--padding-barra);
  }

}