/* ==========================
   ESTILO ACCESIBLE: TEXTO GRANDE + ALTO CONTRASTE
   ========================== */

@import url("estilos.css"); /* Importa los estilos base */

/* Colores con contraste máximo */
:root {
  --color-principal: #000000;       /* fondo negro intenso */
  --color-secundario: #222222;      /* gris oscuro para secciones */
  --color-fondo: #000000;           /* fondo global negro */
  --color-texto: #ffffff;           /* texto blanco */
  --color-destacado: #ffff00;       /* amarillo para resaltar elementos interactivos */
  --color-fondo-seccion: #111111;   /* fondo ligeramente distinto para separar bloques */
}

/* Aumento de tamaño y espaciado del texto */
body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;      /* texto 50% más grande */
  line-height: 1.9;       /* mayor separación entre líneas */
  letter-spacing: 0.04em; /* mejor lectura */
}

/* Encabezados en amarillo o blanco para máximo contraste */
h1, h2, h3 {
  color: var(--color-destacado);
}

/* Enlaces */
a {
  color: #00ffff; /* cian brillante */
  text-decoration: underline;
  font-weight: bold;
}

a:hover, a:focus {
  color: #ffff00;
  background-color: #222222;
}

/* Formularios con alto contraste */
input, select, textarea {
  background-color: #000;
  color: #fff;
  border: 2px solid #ffff00;
  padding: 0.6em;
  font-size: 1.2em;
  border-radius: 6px;
}

input:focus, select:focus, textarea:focus {
  outline: 3px solid #00ffff;
  background-color: #111;
}

/* Botones */
button, input[type="submit"] {
  background-color: #ffff00;
  color: #000;
  font-size: 1.2em;
  border: none;
  border-radius: 5px;
  padding: 0.6em 1.4em;
  font-weight: bold;
}

button:hover, input[type="submit"]:hover {
  background-color: #00ffff;
  color: #000;
}

/* Tablas */
table {
  background-color: #000;
  color: #fff;
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 2px solid #ffff00;
  padding: 10px;
  text-align: center;
}

tbody tr:nth-child(odd) {
  background-color: #111;
}

tbody tr:nth-child(even) {
  background-color: #000;
}

/* Enlace “Saltar al contenido” muy visible */
.skip-link {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #ffff00;
  color: #000;
  padding: 10px 15px;
  font-size: 1.2em;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  outline: 3px solid #00ffff;
}

/* Adaptación a móviles */
@media (max-width: 768px) {
  body {
    font-size: 1.3rem;
  }
  button, input[type="submit"] {
    width: 100%;
  }
}