@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("estilos.css");

:root {
    /* Mantiene la paleta verde de MedicoPedia */
    --color-primario: #1a6b3a;
    --color-primario-claro: #52b788;
    --color-enlace: #155d2e;

    --color-fondo-global: #f2f7f4;
    --color-fondo-header: #e0f0e9;
    --color-fondo-blanco: #ffffff;

    --color-texto-principal: #1a1a1a;    /* Ligeramente más oscuro para más contraste */
    --color-texto-blanco: #ffffff;
    --color-texto-secundario: #4a4a4a;

    --color-aside-fondo: #edf5f0;
    --color-aside-texto: #2a2a2a;
    --color-aside-borde: #a8d5b5;
    --color-indice-fondo: #d8eee1;
    --color-indice-enlace: #1a6b3a;
    --color-tabla-borde: #c5dece;

    --color-foco-outline: #e07b00;
    --color-foco-fondo: #fff3e0;
}

/* ── Tipografía base ── */
body {
    font-family: 'Atkinson Hyperlegible', Arial, sans-serif !important;
    font-size: 1.25em;          /* 20px base (WCAG 1.4.4) */
    line-height: 1.7 !important;
    word-spacing: 0.12em;       /* WCAG 1.4.12 */
    letter-spacing: 0.03em;
    text-align: left !important; /* No justificado (WCAG AAA 1.4.8) */
}

/* ── Encabezados ── */
h1 {
    font-size: 2em;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    line-height: 1.3;
}

h2 {
    font-size: 1.7em;
    margin-top: 1em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

h3 {
    font-size: 1.4em;
    margin-top: 0.9em;
    margin-bottom: 0.4em;
    line-height: 1.3;
}

/* ── Límite de ancho de línea (~80 caracteres, WCAG 1.4.8) ── */
main {
    max-width: 65em;
    margin: 20px auto;
}

p, li {
    max-width: 80ch; /* máximo 80 caracteres de ancho */
}

/* ── Navegación ── */
nav {
    font-size: 1.1em;
    padding: 15px !important;
}

nav a, nav h2, nav h3 {
    font-weight: bold;
    font-family: 'Atkinson Hyperlegible', Arial, sans-serif !important;
}

/* ── Índice alfabético ── */
.indice-alfabetico a {
    font-size: 1.2em !important;
    padding: 10px 14px !important;
    font-weight: bold !important;
    font-family: 'Atkinson Hyperlegible', Arial, sans-serif !important;
}

.indice-alfabetico ul {
    gap: 10px !important;
    padding: 15px !important;
}

/* ── Aside ── */
aside.consejo {
    font-size: 1.1em !important;
    padding: 20px !important;
    line-height: 1.7 !important;
}

/* ── Formularios ── */
.form-contenedor label {
    font-size: 1.15em !important;
    font-family: 'Atkinson Hyperlegible', Arial, sans-serif !important;
    font-weight: bold;
}

.form-contenedor input[type="text"],
.form-contenedor input[type="email"],
.form-contenedor input[type="number"],
.form-contenedor textarea,
.form-contenedor select,
.form-contenedor input[type="date"],
.form-contenedor input[type="month"] {
    font-size: 1.1em !important;
    padding: 10px !important;
    font-family: 'Atkinson Hyperlegible', Arial, sans-serif !important;
}

.form-contenedor input[type="submit"],
.form-contenedor input[type="reset"],
.form-contenedor button[type="submit"],
.form-contenedor button[type="reset"] {
    font-size: 1.1em !important;
    padding: 12px 24px !important;
    font-family: 'Atkinson Hyperlegible', Arial, sans-serif !important;
}

/* ── Foco visible ── */
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;
}

/* ── No justificar en ningún lado ── */
body, header, nav, main, footer, article, section, p, li, table, th, td {
    text-align: left !important;
}