@import url("estilos.css");

:root {
    /* Paleta de alto contraste: negro/blanco puros y verde muy oscuro */
    --color-primario: #004d1f;          /* Verde muy oscuro sobre blanco: ratio > 9:1 */
    --color-primario-claro: #006b2b;
    --color-enlace: #004d1f;

    --color-fondo-global: #ffffff;      /* Blanco puro */
    --color-fondo-header: #f0f0f0;
    --color-fondo-blanco: #ffffff;

    --color-texto-principal: #000000;   /* Negro puro: ratio 21:1 */
    --color-texto-blanco: #ffffff;
    --color-texto-secundario: #111111;

    --color-aside-fondo: #f5f5f5;
    --color-aside-texto: #000000;
    --color-aside-borde: #000000;
    --color-indice-fondo: #004d1f;      /* Fondo verde oscuro */
    --color-indice-enlace: #ffffff;     /* Texto blanco sobre verde oscuro: ratio > 9:1 */
    --color-tabla-borde: #222222;

    --color-foco-outline: #0000ff;      /* Azul brillante para foco */
    --color-foco-fondo: #cce5ff;
}

/* ── Ajustes específicos de alto contraste ── */

/* Cabecera */
header {
    border-bottom: 3px solid #000 !important;
}

/* Navegación */
nav {
    border: 2px solid #000 !important;
}

nav h2, nav h3, nav a {
    color: var(--color-primario) !important;
}

/* Índice alfabético con fondo verde oscuro y letras blancas */
.indice-alfabetico ul {
    background-color: var(--color-indice-fondo) !important;
}

.indice-alfabetico a {
    color: var(--color-indice-enlace) !important;
    font-weight: bold !important;
    border: 1px solid #ffffff !important;
}

.indice-alfabetico a:hover,
.indice-alfabetico a:focus {
    background-color: #ffffff !important;
    color: var(--color-primario) !important;
    outline: 3px solid #ffff00 !important;
}

/* Encabezados */
h1, h2, h3, h4 {
    color: var(--color-primario) !important;
}

/* Artículos con borde visible */
article {
    border: 2px solid var(--color-tabla-borde) !important;
}

/* Aside */
aside.consejo {
    border-left: 6px solid var(--color-primario) !important;
    background-color: var(--color-aside-fondo) !important;
    color: var(--color-aside-texto) !important;
}

/* Tablas */
.tabla thead th {
    background-color: #222222 !important;
    color: #ffffff !important;
}

.tabla th[scope="row"] {
    background-color: #e8e8e8 !important;
    color: #000000 !important;
}

.tabla th, .tabla td {
    border: 1px solid var(--color-tabla-borde) !important;
}

/* Pie de página: fondo muy oscuro + texto blanco + enlaces amarillos */
footer {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-top-color: var(--color-primario-claro) !important;
}

footer a {
    color: #ffff00 !important;  /* Amarillo sobre negro: ratio > 19:1 */
    text-decoration: underline !important;
}

footer a:focus {
    outline-color: #ffff00 !important;
    background-color: #222 !important;
}

/* Botón reset visible */
.form-contenedor input[type="reset"],
.form-contenedor button[type="reset"] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

/* Foco muy visible */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus:not(a) {
    outline: 3px solid var(--color-foco-outline) !important;
    outline-offset: 3px !important;
    background-color: var(--color-foco-fondo) !important;
}