@import url("variables.css");    
@import url("layout.css");
@import url("componentes.css");
@import url("responsive.css");

:root {
    --color-fondo-alto-contraste: #000000;  
    --color-texto-alto-contraste: #FFFFFF;   
    --color-enlaces-alto-contraste: #FFFF00; 
    --color-acento-contraste: #00FF00;     
    --color-fondo-bloque-contraste: #111111; 
}


body {
    background-color: var(--color-fondo-alto-contraste) !important;
    color: var(--color-texto-alto-contraste) !important;
}


header, 
footer {
    background-color: var(--color-fondo-alto-contraste) !important;
    border: none !important;
}

main h2, 
article h3,
header h1 {
    color: var(--color-acento-contraste) !important;
    border-color: var(--color-texto-alto-contraste) !important;
}

article,
blockquote,
table {
    background: var(--color-fondo-bloque-contraste) !important;
    color: var(--color-texto-alto-contraste) !important;
    border: 1px solid var(--color-texto-alto-contraste) !important;
    box-shadow: none !important;
}

a {
    color: var(--color-enlaces-alto-contraste) !important;
    text-decoration: underline !important;
    font-weight: bold !important;
}

table th, 
table td {
    color: var(--color-texto-alto-contraste) !important;
    padding: 10px !important; 
}

thead {
    background-color: var(--color-fondo-bloque-contraste) !important; 
    color: var(--color-acento-contraste) !important; 
    border: 1px solid var(--color-acento-contraste) !important;
}

tbody tr:nth-child(odd) {
    background-color: var(--color-fondo-alto-contraste) !important; 
}

tbody tr:nth-child(even) {
    background-color: var(--color-fondo-bloque-contraste) !important; 
}

tbody tr:hover {
    background-color: #333 !important;
}

tbody th {
    color: var(--color-enlaces-alto-contraste) !important; 
    font-weight: bold !important; 
}

table caption {
    color: var(--color-acento-contraste) !important;
}

nav a {
    background: #333 !important;
    color: var(--color-enlaces-alto-contraste) !important;
    border: 1px solid var(--color-enlaces-alto-contraste) !important;
}

a:focus,
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: 4px solid var(--color-enlaces-alto-contraste) !important;
    box-shadow: none !important;
    background-color: #333 !important;
    border-color: var(--color-enlaces-alto-contraste) !important;
}


thead {
    background-color: #333 !important;
    color: var(--color-texto-alto-contraste) !important;
    border: 1px solid var(--color-texto-alto-contraste) !important;
}
tbody tr:hover {
    background-color: #333 !important;
}