/**
 * Mejoras de Accesibilidad Globales
 * Implementa: G8 (Skip nav), G9 (Focus indicators), G10 (Landmarks)
 */

/* ===== SKIP NAVIGATION (G8) ===== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: var(--space-3) var(--space-6);
  text-decoration: none;
  font-weight: var(--font-semibold);
  z-index: var(--z-toast);
  border-radius: 0 0 var(--radius-md) 0;
  box-shadow: var(--shadow-lg);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--warning);
  outline-offset: 2px;
}

.skip-link:hover {
  background: var(--primary-dark);
  color: white;
}

/* ===== FOCUS INDICATORS VISIBLES (G9) ===== */

/* Restablecer outline por defecto de navegadores */
*:focus {
  outline: none;
}

/* Focus visible mejorado para todos los elementos interactivos */
*:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Focus específico para botones */
.btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
}

.btn-primary:focus-visible {
  outline-color: var(--primary-dark);
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.4);
}

.btn-danger:focus-visible {
  outline-color: var(--danger);
  box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgb), 0.25);
}

.btn-success:focus-visible {
  outline-color: var(--success);
  box-shadow: 0 0 0 0.25rem rgba(var(--success-rgb), 0.25);
}

/* Focus para links */
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  text-decoration: underline;
}

/* Focus para inputs y selects */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.15);
}

/* Focus para checkboxes y radios */
.form-check-input:focus-visible {
  outline-offset: 2px;
}

/* Focus para navegación */
.nav-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  background-color: rgba(var(--primary-rgb), 0.1);
}

.dropdown-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background-color: rgba(var(--primary-rgb), 0.1);
}

/* Focus para cards clickeables */
.card:has(a.stretched-link):focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: var(--shadow-lg);
}

/* Focus para tablas */
.table tbody tr:focus-within {
  background-color: rgba(var(--primary-rgb), 0.05);
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* ===== UTILIDADES DE ACCESIBILIDAD ===== */

/* Screen reader only - ocultar visualmente pero accesible para lectores */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mostrar cuando tiene focus (para skip links) */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== MEJORAS DE CONTRASTE ===== */

/* Asegurar contraste mínimo en textos */
.text-muted {
  color: var(--ink-muted) !important;
}

/* Links con mejor contraste */
.link-secondary {
  color: var(--secondary-dark) !important;
}

.link-secondary:hover {
  color: var(--ink) !important;
}

/* Badges con mejor contraste */
.badge {
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-3);
}

/* ===== MEJORAS PARA NAVEGACIÓN POR TECLADO ===== */

/* Indicar elementos tabulables */
[tabindex="0"]:not(button):not(a):not(input):not(select):not(textarea) {
  cursor: pointer;
}

/* Mejorar hover en elementos interactivos */
button:not(:disabled):hover,
a:hover,
.btn:not(:disabled):hover {
  cursor: pointer;
}

/* Estados disabled más claros */
button:disabled,
.btn:disabled,
.btn.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ===== TOOLTIPS ACCESIBLES (G11) ===== */

/* Los tooltips de Bootstrap ya manejan bien el teclado si se configuran correctamente */
/* Esta clase asegura que los tooltips sean accesibles */
[data-bs-toggle="tooltip"] {
  position: relative;
}

/* ===== MODALES Y OVERLAYS ===== */

/* Cuando un modal está abierto, el fondo debe tener aria-hidden */
.modal-backdrop {
  z-index: var(--z-modal-backdrop);
}

.modal {
  z-index: var(--z-modal);
}

/* Focus trap - el modal debe mantener el focus dentro */
.modal.show:focus-within {
  outline: none;
}

/* ===== TABLAS ACCESIBLES ===== */

/* Mejorar legibilidad de tablas */
.table thead th {
  font-weight: var(--font-semibold);
  border-bottom-width: 2px;
}

/* Hover en filas */
.table-hover tbody tr:hover {
  background-color: var(--surface-hover);
  cursor: pointer;
}

/* ===== FORMULARIOS ACCESIBLES ===== */

/* Labels más visibles */
.form-label {
  font-weight: var(--font-medium);
  margin-bottom: var(--space-2);
  color: var(--ink);
}

/* Campos requeridos */
.form-label .required,
.form-label [aria-label*="obligatorio"] {
  color: var(--danger);
  font-weight: var(--font-bold);
}

/* Mensajes de error más visibles */
.invalid-feedback {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--danger);
  font-weight: var(--font-medium);
}

.is-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 0.125rem rgba(var(--danger-rgb), 0.15);
}

/* Mensajes de éxito */
.valid-feedback {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--success);
  font-weight: var(--font-medium);
}

.is-valid {
  border-color: var(--success) !important;
  box-shadow: 0 0 0 0.125rem rgba(var(--success-rgb), 0.15);
}

/* ===== BREADCRUMBS (G4) ===== */
.breadcrumb {
  background: transparent;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.breadcrumb-item {
  color: var(--ink-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--ink-lighter);
  padding: 0 var(--space-2);
}

.breadcrumb-item.active {
  color: var(--ink);
  font-weight: var(--font-medium);
}

.breadcrumb-item a {
  color: var(--ink-muted);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ===== ANUNCIOS LIVE (ARIA) ===== */

/* Región para anuncios de estado */
.live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== MODO DE ALTO CONTRASTE ===== */

@media (prefers-contrast: high) {
  :root {
    --border: rgba(15, 23, 42, 0.3);
    --border-medium: rgba(15, 23, 42, 0.4);
    --border-strong: rgba(15, 23, 42, 0.6);
  }

  *:focus-visible {
    outline-width: 4px;
    outline-offset: 3px;
  }

  .btn {
    border-width: 2px;
  }
}

/* ===== REDUCIR MOVIMIENTO ===== */

@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;
  }

  .modal.fade .modal-dialog {
    transition: none;
  }

  .carousel-item {
    transition: none;
  }
}

/* ===== LANDMARKS ARIA (para uso con header.php) ===== */

/* Estos estilos ayudan a visualizar los landmarks en desarrollo */
[role="banner"],
[role="navigation"],
[role="main"],
[role="contentinfo"],
[role="complementary"],
[role="search"] {
  /* Sin estilos específicos, solo para semántica */
}

/* Asegurar que main tenga espacio para scroll */
main[role="main"] {
  min-height: calc(100vh - 200px); /* Ajustar según header/footer */
}