/* Accessibility CSS - Estilos específicos de accesibilidad */

/* ========== SKIP LINK ========== */
/* Link para saltar al contenido principal (solo visible con foco) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--spacing-md) var(--spacing-lg);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  z-index: 9999;
  border-radius: 0 0 var(--border-radius-md) 0;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
  outline: var(--focus-outline-width) var(--focus-outline-style) var(--color-text-inverse);
  outline-offset: calc(var(--focus-outline-offset) * -1);
}

/* ========== SCREEN READER ONLY ========== */
/* Contenido visible solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Variante que se muestra al recibir foco */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ========== FOCUS VISIBLE ========== */
/* Estilos de foco personalizados para todos los elementos interactivos */
*:focus {
  outline: var(--focus-outline-width) var(--focus-outline-style) var(--color-focus-outline);
  outline-offset: var(--focus-outline-offset);
}

/* Remover outline para mouse, mantener para teclado */
*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: var(--focus-outline-width) var(--focus-outline-style) var(--color-focus-outline);
  outline-offset: var(--focus-outline-offset);
}

/* ========== FOCUS WITHIN ========== */
/* Estilos para contenedores cuando un hijo tiene foco */
.search-container:focus-within .search-input {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

/* ========== HIGH CONTRAST MODE ========== */
/* Mejoras para modo de alto contraste de Windows */
@media (prefers-contrast: high) {
  * {
    border-color: currentColor !important;
  }
  
  .criterion-card {
    border-width: var(--border-width-thick);
  }
  
  .criterion-button:focus,
  .btn:focus,
  a:focus {
    outline-width: 4px;
  }
}

/* ========== REDUCED MOTION ========== */
/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .skip-link:focus {
    transition: none;
  }
}

/* ========== FORCED COLORS MODE ========== */
/* Soporte para modo de colores forzados (Windows High Contrast) */
@media (forced-colors: active) {
  .criterion-card {
    border: 2px solid;
  }
  
  .criterion-button:focus,
  .btn:focus {
    outline: 3px solid;
  }
  
  .level-a,
  .level-aa,
  .level-aaa {
    border: 1px solid;
  }
}

/* ========== TOUCH TARGET SIZE ========== */
/* Asegurar que todos los elementos interactivos tengan al menos 44x44px */
button,
a,
input[type="checkbox"],
input[type="radio"],
select {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

/* Excepción para elementos inline dentro de párrafos */
p a,
li a {
  min-height: auto;
  min-width: auto;
}

/* ========== KEYBOARD NAVIGATION INDICATORS ========== */
/* Indicador visual mejorado para navegación por teclado */
body.keyboard-navigation *:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(0, 102, 204, 0.15);
}

/* ========== ARIA LIVE REGIONS ========== */
/* Estilos para regiones que anuncian cambios dinámicos */
[aria-live] {
  /* Asegurar que el contenido sea visible pero no intrusivo */
  position: relative;
}

[aria-live="assertive"] {
  /* Para mensajes urgentes */
  font-weight: var(--font-weight-bold);
}

/* ========== DISABLED STATES ========== */
/* Estilos para elementos deshabilitados */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

button:disabled:hover,
input:disabled:hover {
  background-color: inherit;
  border-color: inherit;
}

/* ========== ZOOM SUPPORT ========== */
/* Soporte para zoom hasta 200% sin pérdida de funcionalidad */
@media (min-width: 320px) {
  html {
    /* Usar unidades relativas para permitir zoom */
    font-size: 100%;
  }
  
  body {
    /* Evitar overflow horizontal en zoom */
    overflow-x: hidden;
  }
}

/* Ajustes para texto en zoom */
@media (min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ========== LINK INDICATORS ========== */
/* Asegurar que los enlaces sean distinguibles */
a:not(.btn):not(.criterion-button) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:not(.btn):not(.criterion-button):hover {
  text-decoration-thickness: 2px;
}

/* Enlaces externos - indicador visual adicional */
a[target="_blank"]:not(.btn)::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.25em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230066cc'%3E%3Cpath d='M9 2L9 3L12.3 3L6 9.3L6.7 10L13 3.7L13 7L14 7L14 2L9 2z'/%3E%3Cpath d='M12 12L4 12L4 4L7 4L7 3L3 3L3 13L13 13L13 9L12 9L12 12z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* ========== FORM ACCESSIBILITY ========== */
/* Estilos para formularios accesibles */
label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

input:invalid,
textarea:invalid,
select:invalid {
  border-color: var(--color-error);
}

input:invalid:focus,
textarea:invalid:focus,
select:invalid:focus {
  outline-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(167, 29, 42, 0.1);
}

/* Mensajes de error de formulario */
.error-message {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.error-message::before {
  content: "⚠";
  font-weight: var(--font-weight-bold);
}

/* ========== TABLES ACCESSIBILITY ========== */
/* Estilos para tablas accesibles (si se usan en el futuro) */
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  font-weight: var(--font-weight-bold);
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-md);
  border: var(--border-width) solid var(--color-border);
}

td {
  padding: var(--spacing-md);
  border: var(--border-width) solid var(--color-border);
}

/* ========== PRINT STYLES ========== */
/* Estilos para impresión accesible */
@media print {
  /* Mostrar URLs de enlaces */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: var(--color-text-secondary);
  }
  
  /* Ocultar elementos no necesarios en impresión */
  .skip-link,
  .site-nav,
  .search-container,
  .filter-container {
    display: none !important;
  }
  
  /* Asegurar contraste en impresión */
  * {
    background: white !important;
    color: black !important;
  }
  
  /* Evitar saltos de página dentro de elementos */
  .criterion-card,
  .criterion-detail {
    page-break-inside: avoid;
  }
}

/* ========== COLOR CONTRAST UTILITIES ========== */
/* Clases de utilidad para asegurar contraste */
.text-high-contrast {
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

.bg-high-contrast {
  background-color: var(--color-text-primary);
  color: var(--color-bg-primary);
}

/* ========== FOCUS TRAP (para modales futuros) ========== */
.focus-trap {
  /* Contenedor que atrapa el foco dentro de él */
  position: relative;
}

.focus-trap-active {
  /* Cuando el trap está activo, ocultar el resto de la página para lectores de pantalla */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-index-modal);
}