/* ------------------------------------------------------------------- */
/* Estilo Alternativo: Tema Accesible (Baja Visión y Colores Corporativos) */
/* **ACTUALIZADO: Aplicación GLOBAL sin clase. Baja Visión (1.25em) y Nueva Paleta de Colores** */
/* ------------------------------------------------------------------- */
@import url("estilos.css");

/* --------------------------------------------------------------- */
/* 1. VARIABLES DE ACCESIBILIDAD (BAJA VISIÓN) - Paleta Corporativa */
/* --------------------------------------------------------------- */
:root {
    /* Paleta de Colores Corporativos */
    --color-primario: #0d47a1;
    --color-primario-claro: #64b5f6;
    --color-enlace: #1565c0;
    
    /* Fondos */
    --color-fondo-global: #f5f9ff;
    --color-fondo-header: #e3f2fd;
    --color-fondo-blanco: #ffffff;
    --color-fondo-articulos: #ffffff; /* Establecido a blanco para consistencia */

    /* Texto */
    --color-texto-principal: #333;
    --color-texto-blanco: #ffffff;
    --color-texto-secundario: #5c5c5c;
    
    /* Paleta aside consejo */
    --color-aside-fondo: #efeced;
    --color-aside-texto: #5c5c5c;
    --color-aside-borde: #c2bebe;
    --color-indice-fondo: #e4eff4;
    --color-indice-enlace: #005b8f;
    --color-tabla-borde: #ddd;

    --color-foco-outline: #ff8c00; 
    --color-foco-fondo: #ffe0b2;
}

/* --------------------------------------------------------------- */
/* 2. ESTILOS DE BAJA VISIÓN APLICADOS DIRECTAMENTE A LOS SELECTORES */
/* --------------------------------------------------------------- */

/* ESCALA DE FUENTE BASE: Aumentar el tamaño de fuente base de 16px a 20px (o 125%) */
body {
    font-family: Arial, Helvetica, sans-serif; /* Fuente sans-serif estándar y legible */
    font-size: 1.25em; /* Aumenta la fuente base para todo el documento (20px) */
    line-height: 1.6; /* Aumenta el interlineado para mejorar la legibilidad */
    word-spacing: 0.1em; /* Un poco de espacio extra entre palabras */
    text-align: left !important; /* Asegura texto no justificado (WCAG AAA) */
}

/* AJUSTE DE TITULARES: Asegurar que los encabezados sigan siendo grandes y mantengan una jerarquía clara */
h1 {
    font-size: 2.2em; /* Título principal muy grande */
    margin-top: 1.5em; 
    margin-bottom: 0.8em;
}

h2 {
    font-size: 1.8em;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
}

h3 {
    font-size: 1.4em;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

/* Ajuste de main para limitar ancho de línea (WCAG AAA) */
main {
    max-width: 60em; /* Limitar el ancho de línea a unos ~75-80 caracteres */
    margin: 0 auto;
}

/* AJUSTE DE COMPONENTES CRÍTICOS (Links, Navegación, Índice) */

/* Navegación y Enlaces: Aseguramos que los links de navegación sean más grandes */
nav,
main > p { /* Párrafo de breadcrumb "Estás en:" */
    font-size: 1.1em;
    padding: 15px; /* Más espacio en el nav */
}

nav a,
main > p a {
    font-weight: bold;
}

/* Índice Alfabético: Hacer los botones del índice más grandes y espaciados */
.indice-alfabetico a {
    font-size: 1.3em; /* Aumentamos la fuente del link */
    padding: 10px 14px; /* Más padding para hacerlos botones más grandes */
    margin: 5px; /* Más margen entre letras */
    /* Colores en el índice: usar los colores corporativos para mantener el esquema */
    background-color: var(--color-indice-fondo) !important; 
    color: var(--color-indice-enlace) !important; 
    font-weight: bold;
    text-decoration: none;
    border-radius: 0 !important;
}

.indice-alfabetico ul {
    gap: 10px; /* Reducimos el gap si la fuente es muy grande para no dispersar demasiado */
    padding: 15px;
}

/* Footer: Aseguramos que el texto legal y de contacto sea legible */
footer p {
    font-size: 1em; /* Mantiene la escala heredada del body (1.25em) */
    line-height: 1.8;
}

/* Campos de Formulario: Aumentar el tamaño de entrada de datos */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
label {
    font-size: 1.2em; /* Aumenta el texto dentro de los campos */
    padding: 8px;
    height: auto; /* Permite que el padding actúe */
}

button,
input[type="submit"],
input[type="reset"] {
    font-size: 1.1em; /* Botones más grandes */
    padding: 10px 20px;
}

/* Consejos (aside): Hacer el texto del consejo más notorio */
aside.consejo {
    font-size: 1.1em; 
    padding: 20px;
}

/* 3. ESTILO DE FOCO (Mantenido) */
/* Estilo de foco muy visible (WCAG) */
a:focus, button:focus, input:focus, textarea:focus, select:focus, [tabindex]:focus:not(a) { 
    outline: 4px solid var(--color-foco-outline) !important;
    outline-offset: 4px !important;
    background-color: var(--color-foco-fondo) !important;
}
/* Asegurar que el texto dentro de main no se justifique si la clase base lo hace */
body, header, nav, main, footer, article, section, p, li, table, th, td {
    text-align: left !important;
}