@import url("estilos.css");

:root {
    /* Acentos verdes adaptados a fondo oscuro (contraste > 4.5:1) */
    --color-primario: #74c99a;          /* Verde claro para acentos sobre negro */
    --color-primario-claro: #a8dfc0;    /* Verde más claro para bordes */
    --color-enlace: #7ecba1;            /* Verde suave para enlaces */

    /* Fondos oscuros con distinción de tonos */
    --color-fondo-global: #0d0d0d;
    --color-fondo-header: #141414;
    --color-fondo-blanco: #1c1c1c;      /* Sustituye al blanco en modo noche */

    /* Texto claro sobre fondo oscuro */
    --color-texto-principal: #e2e2e2;   /* Ratio ~14:1 sobre #0d0d0d */
    --color-texto-blanco: #ffffff;
    --color-texto-secundario: #aaaaaa;

    /* Componentes */
    --color-aside-fondo: #1c1c1c;
    --color-aside-texto: #e2e2e2;
    --color-aside-borde: #2e2e2e;
    --color-indice-fondo: #1c1c1c;
    --color-indice-enlace: #7ecba1;
    --color-tabla-borde: #2e2e2e;

    /* Foco visible con color ámbar (WCAG 2.4.7) */
    --color-foco-outline: #fdd835;
    --color-foco-fondo: #2c2c1a;
}

body {
    background-color: var(--color-fondo-global) !important;
    color: var(--color-texto-principal) !important;
}

header, footer {
    background-color: var(--color-fondo-header) !important;
    color: var(--color-texto-principal) !important;
    border-color: var(--color-primario-claro) !important;
}

nav {
    background-color: var(--color-fondo-blanco) !important;
    color: var(--color-texto-principal) !important;
    border-color: var(--color-aside-borde) !important;
}

main {
    background-color: var(--color-fondo-blanco) !important;
    border-color: var(--color-aside-borde) !important;
    color: var(--color-texto-principal) !important;
}

article {
    background-color: #222222 !important;
    border-color: var(--color-aside-borde) !important;
    color: var(--color-texto-principal) !important;
}

section {
    color: var(--color-texto-principal) !important;
}

aside.consejo {
    background-color: #1e2520 !important;
    border-left-color: var(--color-foco-outline) !important;
    color: var(--color-texto-principal) !important;
}

h1 { color: var(--color-texto-blanco) !important; }
h2 { color: var(--color-primario-claro) !important; }
h3 { color: var(--color-primario) !important; }
h4 { color: var(--color-primario) !important; }

a {
    color: var(--color-enlace) !important;
}

a:hover,
a:focus {
    color: var(--color-primario-claro) !important;
    outline-color: var(--color-primario-claro) !important;
}

footer a {
    color: #b2dfdb !important;
}

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

.indice-alfabetico a {
    background-color: #252525;
    color: var(--color-indice-enlace) !important;
    border: 1px solid #3a3a3a;
}

.indice-alfabetico a:hover,
.indice-alfabetico a:focus {
    background-color: var(--color-primario) !important;
    color: #000 !important;
}

/* Tablas */
.tabla {
    border-color: var(--color-tabla-borde) !important;
}

.tabla thead th {
    background-color: #1a3d2b !important;
    color: var(--color-texto-blanco) !important;
}

.tabla th[scope="row"] {
    background-color: #1c2e25 !important;
    color: var(--color-primario-claro) !important;
}

.tabla tbody tr:nth-child(even) {
    background-color: #1e1e1e !important;
}

.tabla tbody tr:nth-child(odd) {
    background-color: #232323 !important;
}

.tabla th, .tabla td {
    border-color: var(--color-tabla-borde) !important;
    color: var(--color-texto-principal) !important;
}

/* Formularios */
.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"] {
    background-color: #252525 !important;
    color: var(--color-texto-principal) !important;
    border-color: var(--color-aside-borde) !important;
}

.form-contenedor input[type="submit"],
.form-contenedor button[type="submit"] {
    background-color: var(--color-primario) !important;
    color: #000 !important;
}

.form-contenedor input[type="reset"],
.form-contenedor button[type="reset"] {
    background-color: #333 !important;
    color: var(--color-texto-principal) !important;
    border: 1px solid #555 !important;
}