/* Estilos de fondo */

/* Protección defensiva contra overflow horizontal.
   No se logró reproducir en pruebas automatizadas (se probó cada
   página en anchos de 320px a 768px, con el menú abierto/cerrado y
   navegando entre páginas) una causa concreta de la barra de scroll
   horizontal reportada en modo responsivo. overflow-x:hidden recorta
   cualquier desborde de uno o dos píxeles que pueda estar ocurriendo
   por una causa puntual (p.ej. redondeo de algún navegador específico)
   sin afectar el layout visual normal, ya que solo actúa cuando SÍ hay
   contenido que se sale del ancho de la ventana. */
html {
    overflow-x: hidden;
}

body{
    margin: 0;
    padding: 0;
    background-color: #79451d;
    display: flex;
    flex-direction: column;
    /* 100vh en móvil puede cambiar cuando el navegador muestra/oculta
       la barra de direcciones al tocar botones, lo que encoge el <main>
       (flex:1) mientras header/footer no encogen (flex-shrink:0).
       100dvh usa siempre la altura visual real, sin fluctuaciones.
       Fallback a 100vh para navegadores antiguos. */
    min-height: 100vh;
    min-height: 100dvh;
}

#header {
    flex-shrink: 0;
}

/* ── Layout de dos columnas: contenido (70%) + aside (30%) ──────────*/
.contenedor-principal {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-width: 0;
}

/* ── Páginas SIN aside (Quiz, Traductor) ─────────────────────────────*/
.contenedor-principal > .texto:only-child {
    flex: 1 1 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.texto{
    padding: 3px 5% 8% 4%;
}

#aside {
    flex: 0 0 25%;
    min-width: 0;
}

#footer {
    flex-shrink: 0;
}


/* Estilos de imagen */

img { max-width: 100%; height: auto; }

#img_logo{
    width: 170px;
}

.img_cont {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}


/* Estilos de index */
article a {
    color: #fd8d32;
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.2s;
}

article a:hover {
    color: #ff9d4a;
}

.enlaceRef { color: white; text-decoration: none; }

/* Estilos de texto */
.subtitulo{
    font-size: 24px;
    font-weight: bold;
    color: #fd8d32;              /* naranja de acento del proyecto */
    border-left: 4px solid #fd8d32;
    padding-left: 12px;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

p{
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    line-height: 1.5;
    color: aliceblue;
    margin-bottom: 1.6rem;
}

.subtitulo, label, .referencia, .enlaceRef, h2 {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}


    
/*Estilos de traductor*/
.input {
    width: 100%;
    padding: 10px 14px;
    font-size: 16px;
    font-family: 'Courier New', monospace;
    background: aliceblue;
    color: black;
    border: 2px solid #fd8d32;
    border-radius: 6px;
    margin-top: 8px;
    outline: none;
}
.input:focus { border-color: #ff9d4a; }

.boton_convertir {
    margin-top: 12px;
    padding: 10px 28px;
    font-size: 16px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    background: #fd8d32;
    color: #2f2c2b;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.boton_convertir:hover { background: #ff9d4a; }

label {
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    line-height: 1.5;
    color: aliceblue;
    margin-bottom: 1.6rem;
}

/* ── Accesibilidad: anuncios para lectores de pantalla ─────────*/
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Estilos de impresión ────────────────────────────────────────────
   Se activan solo cuando el usuario imprime o usa "Guardar como PDF".
   Oculta la navegación y ajusta colores para que el contenido sea
   legible en papel (fondo blanco, texto oscuro, sin tintas de fondo). */
@media print {

    /* Ocultar elementos que no tienen sentido en papel */
    #header,
    #footer,
    #aside,
    .subtitulo::before { display: none !important; }

    /* Fondo blanco y texto oscuro para ahorrar tinta y mejorar legibilidad */
    body {
        background-color: #ffffff;
        color: #000000;
        font-size: 12pt;
    }

    /* El contenido ocupa todo el ancho sin columnas */
    .contenedor-principal {
        flex-direction: column;
    }

    .texto {
        padding: 0;
        max-width: 100%;
        width: 100%;
    }

    /* Títulos y texto en negro sobre blanco */
    p {
        color: #000000;
        font-size: 11pt;
    }

    .subtitulo {
        color: #000000;
        border-left-color: #000000;
        font-size: 14pt;
    }

    /* Los enlaces muestran su URL entre paréntesis al imprimir */
    article a::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555555;
    }

    /* Evitar que una imagen quede partida entre dos páginas */
    img {
        page-break-inside: avoid;
        break-inside: avoid;
        max-width: 100%;
    }

    /* Evitar cortes de página dentro de un párrafo o subtítulo */
    p, .subtitulo {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

@media (max-width: 768px){
    .titulo-pagina {
        padding: 14px 16px;
        gap: 12px;
    }
    .titulo-pagina-icono { font-size: 24px; }
    .titulo-pagina-texto { font-size: 20px; }
    .texto{
        width: 100%;
        padding: 0px 4% 25px 4%;
        flex: 1;
        min-width: 0;  
        box-sizing: border-box;
    }

    p{
        font-size: 16px;
    }

    .subtitulo{
        font-size: 18px;
    }
    
    .img_cont {
        flex-direction: column;
        align-items: center;
    }

    .img_cont img {
        max-width: 85%;
        height: auto;
    }

    .contenedor-principal {
        flex-direction: column;
    }

    #aside{
        display: none;
    }
}