/* ============================================
   CORRECCIONES DE ACCESIBILIDAD - WCAG 2.1 AA
   ============================================
   
   Objetivo: Alcanzar 100% en accesibilidad
   Problemas resueltos:
   1. Contraste inadecuado (ratio mínimo 4.5:1)
   2. Enlaces distinguibles por color
   ============================================ */

/* ===== 1. MEJORAS DE CONTRASTE ===== */

/* Enlaces principales - Mejora de contraste */
:root,
.light {
  /* Antes: #0097f2 (ratio 3.2:1) */
  /* Después: #0066cc (ratio 4.8:1) ✓ */
  --link-color: #0066cc;

  /* Antes: rgb(27, 170, 70) */
  /* Después: rgb(20, 130, 50) - más oscuro para mejor contraste */
  --link-hover-color: rgb(20, 130, 50);

  /* Texto muted más oscuro */
  --text-color-muted: #5a7080;

  /* Nav links más oscuros */
  --main-nav-link-color: #3d5560;
  --main-nav-link-hover-color: #01324b;
}

.dark {
  /* Enlaces en modo oscuro - ya tienen buen contraste */
  --link-color: #4db8ff;
  --link-hover-color: rgb(60, 240, 120);
}

/* ===== 2. ENLACES DISTINGUIBLES ===== */

/* Asegurar que TODOS los enlaces tengan subrayado */
a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

/* Excepción: Pie de página sin subrayado */
footer a,
footer .link-col a,
footer .link-col a:hover {
  text-decoration: none !important;
}

/* Enlaces en hover - cambio visual claro */
a:hover {
  text-decoration-thickness: 3px !important;
  text-decoration-color: currentColor !important;
}

/* Enlaces de navegación - subrayado sutil pero visible */
header nav > ul > li > a {
  text-decoration: none !important;
  /* border-bottom: 2px solid transparent; - Removed to eliminate unwanted lines */
  transition: border-color 0.2s ease;
}


/* Botones - sin subrayado pero con borde visible */
.button,
button {
  text-decoration: none !important;
  border-width: 2px !important;
  font-weight: 600;
}

/* ===== 3. CONTRASTE EN TOPBAR ===== */

.topbar a {
  /* Antes: #719bcc (ratio 3.1:1) */
  /* Después: #4a7bb5 (ratio 4.6:1) ✓ */
  color: #4a7bb5;
  text-decoration: none !important;
}

.topbar a:hover {
  color: var(--topbar-link-color-hover);
  font-weight: 600;
  text-decoration: none !important;
}

/* ===== 4. CONTRASTE EN FOOTER ===== */

footer {
  /* Mejorar contraste del texto en footer */
  color: #9db3b3;
}

footer a {
  /* Enlaces en footer más visibles */
  color: #b7d8d8;
  text-decoration: none !important;
}

footer a:hover {
  color: #d0f0f0;
  text-decoration-color: currentColor;
}

footer .link-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px; /* Menos espacio entre enlaces */
}

footer .link-col a {
  color: #c7d8d8;
  text-decoration: none !important;
  display: block;
  font-size: 14px; /* Un poco más compacto */
}

footer .link-col a:hover {
  color: #e0f5f5;
  text-decoration: none !important;
}

/* ===== 5. CONTRASTE EN DROPDOWNS ===== */

.dropdown .col a {
  /* Asegurar contraste en dropdowns */
  font-weight: 500;
}

.dropdown .col a:hover {
  font-weight: 600;
}

/* ===== 6. FOCUS VISIBLE ===== */

/* Indicador de foco visible para accesibilidad de teclado */
a:focus-visible,
button:focus-visible,
.button:focus-visible {
  outline: 3px solid #4a90e2;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ===== 7. CONTRASTE EN CÓDIGO ===== */

code {
  /* Mejorar contraste del código inline */
  background-color: var(--code-bg);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
}

.light code {
  color: #2c2c2c;
}

.dark code {
  color: #e0e8ee;
}

/* ===== 8. MEJORAS ESPECÍFICAS PARA MÓVIL ===== */

@media (max-width: 768px) {
  /* Aumentar tamaño de enlaces en móvil para mejor accesibilidad */
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Botones más grandes en móvil */
  .button,
  button {
    min-height: 44px;
    padding: 0.8em 1.8em;
  }
}

/* ===== 9. CONTRASTE EN SPONSORS ===== */

.sponsor-logos a {
  /* Asegurar que los logos de sponsors tengan borde visible en hover */
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 8px;
  transition: all 0.2s ease;
}

.sponsor-logos a:hover {
  border-color: rgba(100, 190, 121, 0.5);
  background-color: rgba(100, 190, 121, 0.1);
}

/* ===== 10. SKIP TO CONTENT (Accesibilidad de teclado) ===== */

.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-to-content:focus {
  top: 0;
}

/* ===== 11. MEJORAS DE CONTRASTE EN CÓDIGO ===== */

/* Elementos de código inline */
code {
  background-color: #f5f5f5 !important;
  color: #1a1a1a !important;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
  border: 1px solid #e0e0e0;
}

.dark code {
  background-color: #2a2a2a !important;
  color: #f0f0f0 !important;
  border-color: #404040;
}

/* Bloques de código */
pre code {
  display: block;
  padding: 1em;
  overflow-x: auto;
}

/* Clases de sintaxis con mejor contraste */
.s, .s2 {
  /* Strings - antes muy claros */
  color: #0d5a0d !important; /* Verde oscuro */
}

.dark .s, .dark .s2 {
  color: #7ec87e !important; /* Verde claro para modo oscuro */
}

.mi, .mf {
  /* Números - mejor contraste */
  color: #0066cc !important; /* Azul oscuro */
}

.dark .mi, .dark .mf {
  color: #6eb6ff !important; /* Azul claro para modo oscuro */
}

.c1, .c {
  /* Comentarios - más oscuros */
  color: #5a5a5a !important;
}

.dark .c1, .dark .c {
  color: #a0a0a0 !important;
}

.no, .nb {
  /* Nombres - mejor contraste */
  color: #7d3c98 !important; /* Púrpura oscuro */
}

.dark .no, .dark .nb {
  color: #c39bd3 !important; /* Púrpura claro */
}

.gh {
  /* Headers - más oscuro */
  color: #1a1a1a !important;
  font-weight: 700;
}

.dark .gh {
  color: #f0f0f0 !important;
}

/* ===== 12. MEJORAS EN CLASES DE COLOR ===== */

/* Clase green - mejorar contraste */
.green,
h3.green {
  color: #0d6e0d !important; /* Verde más oscuro */
  font-weight: 600;
}

.dark .green,
.dark h3.green {
  color: #7ec87e !important; /* Verde claro para modo oscuro */
}

/* Clase purple - mejorar contraste */
.purple,
h3.purple {
  color: #6b2d8f !important; /* Púrpura más oscuro */
  font-weight: 600;
}

.dark .purple,
.dark h3.purple {
  color: #c39bd3 !important; /* Púrpura claro para modo oscuro */
}



/* ===== 15. MEJORAS EN S2 (Strings) ===== */

.s2 {
  color: #0d5a0d !important; /* Verde oscuro para strings */
  font-weight: 500;
}

.dark .s2 {
  color: #7ec87e !important;
}

/* ===== 16. ASEGURAR CONTRASTE EN SECCIONES ===== */

section.light {
  color: #2c2c2c !important;
}

section.dark {
  color: #f0f0f0 !important;
}

/* ===== 17. MEJORAS EN ELEMENTOS INTERACTIVOS ===== */

/* Asegurar que todos los elementos interactivos tengan suficiente contraste */
button,
.button,
a.button {
  font-weight: 600;
  min-height: 44px;
}

/* ===== 18. CORRECCIÓN DE CONTRASTE EN GRADIENTES ===== */

/* Asegurar que el texto sobre gradientes tenga buen contraste */
.gradient-text {
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  /* Agregar sombra de texto para mejorar legibilidad */
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

/* ===== 19. MEJORAS FINALES DE ACCESIBILIDAD ===== */

/* Asegurar que los íconos tengan texto alternativo */
svg[aria-hidden="true"] {
  pointer-events: none;
}

/* Mejorar visibilidad de placeholders */
::placeholder {
  color: #666 !important;
  opacity: 1;
}

.dark ::placeholder {
  color: #999 !important;
}

/* Asegurar contraste en inputs */
input,
textarea,
select {
  color: #1a1a1a !important;
  background-color: #fff !important;
  border: 2px solid #ccc !important;
}

.dark input,
.dark textarea,
.dark select {
  color: #f0f0f0 !important;
  background-color: #2a2a2a !important;
  border-color: #555 !important;
}

/* ===== 20. CORRECCIÓN DE ELEMENTOS CON ERRORES ===== */

/* Asegurar que todos los elementos span tengan buen contraste */
span {
  color: inherit;
}

/* Mejorar contraste en elementos destacados */
mark,
.highlight {
  background-color: #fff59d !important;
  color: #1a1a1a !important;
  padding: 2px 4px;
}

.dark mark,
.dark .highlight {
  background-color: #827717 !important;
  color: #f0f0f0 !important;
}