/* ========================================
   MEJORAS DE ACCESIBILIDAD - FASE 1
   ======================================== */

/* ========================================
   SKIP LINKS - Enlaces para saltar al contenido
   ======================================== */

/* Skip link oculto por defecto, visible solo con foco */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #005fcc;
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  font-weight: 600;
  border-radius: 0 0 4px 0;
  transition: top 0.3s;
}

/* Mostrar skip link cuando recibe foco */
.skip-link:focus {
  top: 0;
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* Utilidad de Bootstrap para ocultar visualmente pero mantener accesible */
.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;
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ========================================
   INDICADORES DE FOCO MEJORADOS
   ======================================== */

/* Indicador de foco visible para todos los elementos interactivos */
*:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* Foco mejorado para botones */
button:focus,
.btn:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.3);
}

/* Foco mejorado para enlaces */
a:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  text-decoration: underline;
}

/* Foco mejorado para campos de formulario */
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.2);
  border-color: #005fcc;
}

/* Foco mejorado para elementos de navegación */
nav a:focus,
.nav-link:focus,
.navbar-brand:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  background-color: rgba(0, 95, 204, 0.1);
  border-radius: 4px;
}

/* Foco mejorado para dropdowns */
.dropdown-toggle:focus,
.dropdown-item:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  background-color: rgba(0, 95, 204, 0.1);
}

/* Foco mejorado para elementos de calendario */
.fc-button:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.3);
}

/* Foco mejorado para modales */
.modal-content:focus,
.modal-header:focus,
.modal-body:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* Foco mejorado para tarjetas clickeables */
.card:focus,
.card-link:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.2);
}

/* ========================================
   MEJORAS PARA LANDMARKS SEMÁNTICOS
   ======================================== */

/* Asegurar que main tenga un id para skip links */
main#main-content {
  scroll-margin-top: 80px; /* Espacio para el navbar fijo */
}

/* ========================================
   MEJORAS PARA CONTRASTE Y LEGIBILIDAD - FASE 4
   ======================================== */

/* Variables de color con contraste WCAG AA (4.5:1 para texto normal, 3:1 para texto grande) */
:root {
  --text-primary: #212529; /* Contraste 12.63:1 sobre blanco */
  --text-secondary: #495057; /* Contraste 7:1 sobre blanco */
  --text-muted: #6c757d; /* Contraste 4.54:1 sobre blanco - WCAG AA */
  --text-muted-dark: #495057; /* Alternativa más oscura si es necesario */
  --border-color: #dee2e6; /* Contraste 1.92:1 - solo para bordes, no texto */
  --bg-light: #f8f9fa;
  --bg-white: #ffffff;
  --link-color: #0056b3; /* Contraste 7:1 sobre blanco */
  --link-hover: #004085; /* Contraste 12.63:1 sobre blanco */
  --error-color: #dc3545; /* Contraste 5.14:1 sobre blanco */
  --success-color: #198754; /* Contraste 4.54:1 sobre blanco */
  --warning-color: #ffc107; /* Requiere texto oscuro para contraste */
  --info-color: #0dcaf0; /* Requiere texto oscuro para contraste */
}

/* Asegurar que los textos tengan suficiente contraste */
body {
  color: var(--text-primary);
  background-color: var(--bg-white);
}

.text-muted {
  color: var(--text-muted) !important; /* Contraste WCAG AA */
}

.text-secondary {
  color: var(--text-secondary) !important;
}

/* Mejorar contraste en placeholders */
::placeholder {
  color: var(--text-muted);
  opacity: 1; /* Firefox */
}

::-webkit-input-placeholder {
  color: var(--text-muted);
}

::-moz-placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Mejorar contraste en enlaces */
a {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Mejorar contraste en botones */
.btn-primary {
  background-color: #0056b3;
  border-color: #0056b3;
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #004085;
  border-color: #004085;
  color: #ffffff;
}

.btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #ffffff;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #5a6268;
  border-color: #5a6268;
  color: #ffffff;
}

/* Mejorar contraste en alertas */
.alert-danger {
  background-color: #f8d7da;
  border-color: #f5c2c7;
  color: #721c24; /* Contraste 7.5:1 sobre fondo claro */
}

.alert-success {
  background-color: #d1e7dd;
  border-color: #badbcc;
  color: #0f5132; /* Contraste 7.5:1 sobre fondo claro */
}

.alert-warning {
  background-color: #fff3cd;
  border-color: #ffecb5;
  color: #856404; /* Contraste 5.5:1 sobre fondo claro */
}

.alert-info {
  background-color: #cff4fc;
  border-color: #b6effb;
  color: #055160; /* Contraste 7.5:1 sobre fondo claro */
}

/* Mejorar contraste en badges */
.badge {
  color: #ffffff;
  font-weight: 600;
}

.badge.bg-primary {
  background-color: #0056b3 !important;
}

.badge.bg-secondary {
  background-color: #6c757d !important;
}

.badge.bg-success {
  background-color: #198754 !important;
}

.badge.bg-danger {
  background-color: #dc3545 !important;
}

.badge.bg-warning {
  background-color: #ffc107 !important;
  color: #000000 !important; /* Texto oscuro sobre fondo amarillo */
}

.badge.bg-info {
  background-color: #0dcaf0 !important;
  color: #000000 !important; /* Texto oscuro sobre fondo cyan */
}

/* Mejorar contraste en cards */
.card {
  border-color: var(--border-color);
}

.card-header {
  background-color: var(--bg-light);
  border-bottom-color: var(--border-color);
  color: var(--text-primary);
}

/* Mejorar contraste en tablas */
.table {
  color: var(--text-primary);
}

.table thead th {
  background-color: #343a40;
  color: #ffffff;
  font-weight: 600;
  border-color: #454d55;
}

.table tbody tr:hover {
  background-color: var(--bg-light);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

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

/* Detectar preferencia de alto contraste del sistema */
@media (prefers-contrast: high) {
  :root {
    --text-primary: #000000;
    --text-secondary: #000000;
    --text-muted: #000000;
    --border-color: #000000;
    --link-color: #0000ff;
    --link-hover: #000080;
  }

  body {
    background-color: #ffffff;
    color: #000000;
  }

  * {
    border-color: #000000 !important;
  }

  .btn-primary {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
  }

  .btn-secondary {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
  }

  a {
    color: #0000ff !important;
    text-decoration: underline !important;
  }

  a:focus {
    outline: 3px solid #000000 !important;
    background-color: #ffff00 !important;
  }
}

/* Detectar 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;
  }
}

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

/* Asegurar que los elementos interactivos sean accesibles por teclado */
[tabindex="-1"]:focus {
  outline: none; /* Elementos que no deben recibir foco */
}

/* Mejorar visibilidad de elementos con tabindex */
[tabindex="0"]:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* ========================================
   RESPONSIVE - Ajustes para móviles
   ======================================== */

@media (max-width: 768px) {
  .skip-link {
    font-size: 0.9rem;
    padding: 6px 12px;
  }

  *:focus {
    outline-width: 2px;
    outline-offset: 1px;
  }
}

/* ========================================
   MEJORAS PARA LECTORES DE PANTALLA
   ======================================== */

/* Ocultar iconos decorativos de lectores de pantalla */
.icon-decorative {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Asegurar que los iconos con aria-hidden no interfieran */
[aria-hidden="true"] {
  pointer-events: none;
}

/* ========================================
   MEJORAS PARA TABLAS - FASE 4
   ======================================== */

/* Captions ocultos visualmente pero accesibles */
table caption.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;
}

/* Mejorar accesibilidad de tablas */
table {
  border-collapse: collapse;
}

table th[scope] {
  font-weight: 600;
}

/* Mejorar contraste en filas de tabla */
.table tbody tr:focus {
  background-color: rgba(0, 95, 204, 0.1);
  outline: 2px solid #005fcc;
  outline-offset: -2px;
}

/* ========================================
   MEJORAS PARA CAMPOS DE FECHA Y CALENDARIOS
   ======================================== */

/* Mejorar accesibilidad de campos de fecha */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  position: relative;
}

input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.2);
}

/* Mejorar accesibilidad de calendarios FullCalendar */
.fc {
  font-size: 1rem;
}

.fc-button {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

.fc-button:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.3);
}

.fc-event {
  cursor: pointer;
}

.fc-event:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.3);
}

/* Asegurar que los eventos del calendario sean accesibles por teclado */
.fc-event[tabindex="0"]:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* ========================================
   MEJORAS PARA SLIDERS Y CAROUSELS
   ======================================== */

/* Mejorar accesibilidad de sliders Swiper */
.swiper-button-next,
.swiper-button-prev {
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  color: #005fcc;
}

.swiper-button-next:focus,
.swiper-button-prev:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.3);
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid #ffffff;
}

.swiper-pagination-bullet-active {
  background-color: #ffffff;
}

.swiper-pagination-bullet:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* ========================================
   MEJORAS PARA USUARIOS CON DISCAPACIDADES VISUALES
   ======================================== */

/* Aumentar tamaño mínimo de texto para legibilidad */
body {
  font-size: 1rem;
  line-height: 1.5;
}

/* Mejorar espaciado entre elementos para mejor legibilidad */
p,
li,
td,
th {
  line-height: 1.6;
}

/* Mejorar contraste en elementos deshabilitados */
:disabled,
.disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Mejorar visibilidad de estados de carga */
.spinner-border,
.spinner-grow {
  color: #005fcc;
}

/* Mejorar accesibilidad de tooltips y popovers */
.tooltip,
.popover {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ========================================
   MEJORAS PARA PAGINACIÓN
   ======================================== */

.pagination {
  display: flex;
  list-style: none;
}

.pagination .page-link {
  color: var(--link-color);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
}

.pagination .page-link:hover,
.pagination .page-link:focus {
  color: var(--link-hover);
  background-color: var(--bg-light);
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

.pagination .page-item.active .page-link {
  background-color: #0056b3;
  border-color: #0056b3;
  color: #ffffff;
}

.pagination .page-item.disabled .page-link {
  color: var(--text-muted);
  pointer-events: none;
  cursor: not-allowed;
}

/* ========================================
   MEJORAS PARA BREADCRUMBS
   ======================================== */

.breadcrumb {
  background-color: transparent;
  padding: 0.5rem 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--text-muted);
  padding: 0 0.5rem;
}

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

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

.breadcrumb-item.active {
  color: var(--text-primary);
}

/* ========================================
   MEJORAS PARA PROGRESS BARS
   ======================================== */

.progress {
  height: 1.5rem;
  background-color: var(--bg-light);
  border: 1px solid var(--border-color);
}

.progress-bar {
  background-color: #0056b3;
  color: #ffffff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-bar[role="progressbar"] {
  min-width: 2em;
}

/* ========================================
   MEJORAS PARA ACCORDIONS
   ======================================== */

.accordion-button {
  font-weight: 600;
  color: var(--text-primary);
}

.accordion-button:not(.collapsed) {
  background-color: var(--bg-light);
  color: var(--text-primary);
}

.accordion-button:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.2);
}

/* ========================================
   MEJORAS ADICIONALES PARA RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  /* Aumentar tamaño de texto en móviles para mejor legibilidad */
  body {
    font-size: 1rem;
  }

  /* Mejorar espaciado en tablas en móviles */
  .table-responsive {
    border: 1px solid var(--border-color);
  }

  /* Mejorar tamaño de botones en móviles */
  .btn {
    min-height: 44px; /* Tamaño mínimo recomendado para toque */
    min-width: 44px;
  }
}

/* ========================================
   MEJORAS PARA TOASTS Y NOTIFICACIONES
   ======================================== */

.toast {
  font-size: 0.875rem;
  line-height: 1.5;
}

.toast-header {
  font-weight: 600;
}

.toast-header i {
  font-size: 1rem;
}

.toast-body {
  color: var(--text-primary);
}

/* Toasts con mejor contraste */
.toast.bg-success {
  background-color: #198754 !important;
  color: #ffffff !important;
}

.toast.bg-danger {
  background-color: #dc3545 !important;
  color: #ffffff !important;
}

.toast.bg-warning {
  background-color: #ffc107 !important;
  color: #000000 !important;
}

.toast.bg-info {
  background-color: #0dcaf0 !important;
  color: #000000 !important;
}

.toast .btn-close {
  filter: brightness(0) invert(1);
}

.toast.bg-warning .btn-close,
.toast.bg-info .btn-close {
  filter: brightness(0);
}

/* Mejorar foco en toasts */
.toast:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* ========================================
   MEJORAS PARA IMPRESIÓN
   ======================================== */

@media print {
  /* Asegurar que los elementos importantes sean visibles al imprimir */
  .skip-link,
  .sr-only {
    display: none !important;
  }

  /* Mejorar contraste en impresión */
  * {
    color: #000000 !important;
    background: #ffffff !important;
  }

  a {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  /* Ocultar elementos no necesarios en impresión */
  .toast-container,
  .modal,
  .navbar {
    display: none !important;
  }
}