/* ============================================================
   AGUA CIRCULAR — a11y-responsive.css
   Capa global de accesibilidad, responsive y mobile-first.
   Aplica a TODAS las páginas vía design-system-head.php.
   ------------------------------------------------------------
   Cubre:
   - Tipografía fluida (clamp) para H1–H3
   - Touch targets WCAG 2.5.5 (40 px desktop, 44 px mobile)
   - Form inputs ≥16px en mobile (evita zoom iOS)
   - Imágenes y media responsive
   - Contenedor con padding fluido
   - Tablas con wrapper scroll horizontal
   - Bootstrap 3 grid – mejoras mobile
   - Print styles (oculta UI no esencial)
   - prefers-reduced-motion / forced-colors / prefers-contrast
   - WCAG 1.4.12 — text spacing resilience
   - SweetAlert2 alineado a tokens
   - Hidden helpers utilitarios
   Ref: design-system.md §9 — Accesibilidad
   ============================================================ */

/* ── 0. Base tipográfica accesible (gana a Bootstrap 3) ─────── */
/* Bootstrap 3 fija html font-size: 10px y body font-size: 14px.
   Con !important garantizamos que el body siempre tenga 16px
   (mínimo recomendado por WCAG 1.4.4) y la escala de tokens funcione. */
html {
  font-size: 100% !important;       /* 16 px base */
}

html body {
  font-size: var(--text-base) !important;   /* 16 px */
  line-height: 1.6 !important;
}

/* Texto pequeño legible — mínimo 13 px en cualquier contexto.
   <small>, .small de Bootstrap usa 85% (≈14 px desde 16) — OK. */
html body small,
html body .small {
  font-size: 0.875rem;              /* 14 px */
}

/* Texto de párrafos: line-height generoso (WCAG 1.4.12). */
html body p,
html body li,
html body dd,
html body dt {
  line-height: 1.6;
}

/* ── 1. Tipografía fluida ───────────────────────────────────── */
/* H1 escala entre mobile (28px) y desktop (40px). Más grande para
   mejor jerarquía vs body 16px. */
h1, .h1 {
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
}
h2, .h2 {
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2rem);
}
h3, .h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
}
h4, .h4 {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
}
h5, .h5 {
  font-size: 1.125rem;              /* 18 px */
}
h6, .h6 {
  font-size: 1rem;                  /* 16 px */
}

/* Evita huérfanos en titulares */
h1, h2, h3, .h1, .h2, .h3 {
  text-wrap: balance;
}

/* Limita ancho de prosa para legibilidad (60–75 chars) */
.ac-prose,
.ac-prose p,
.ac-prose li {
  max-width: 70ch;
  text-wrap: pretty;
}

/* ── 2. Imágenes y media responsive ─────────────────────────── */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Iconos no deben colapsar */
.ico,
[data-lucide] svg {
  max-width: none;
}

/* ── 3. Contenedor y layout responsive ──────────────────────── */
.ac-container {
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  .ac-container { padding-inline: var(--space-6); }
}

@media (min-width: 1280px) {
  .ac-container { padding-inline: var(--space-8); }
}

/* Bootstrap 3 — padding fluido en mobile y mejor breakpoint */
@media (max-width: 480px) {
  html body .container,
  html body .container-fluid {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  html body .row {
    margin-left: calc(-1 * var(--space-3));
    margin-right: calc(-1 * var(--space-3));
  }
  html body [class*="col-"] {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* Bootstrap 3 — col-xs-X y col-sm-X stack mejorado en <576px */
@media (max-width: 575px) {
  html body .col-sm-3,
  html body .col-sm-4,
  html body .col-sm-6,
  html body .col-xs-3,
  html body .col-xs-4 {
    margin-bottom: var(--space-3);
  }
}

/* Utilities responsive ligeras (no chocan con Bootstrap) */
.ac-stack-mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .ac-stack-mobile {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

.ac-grid-auto {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

/* ── 4. Tablas responsive ───────────────────────────────────── */
.ac-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: var(--shadow-sm);
}

.ac-table-responsive > table {
  min-width: 640px;
  width: 100%;
  margin: 0;
  border: none;
}

/* Bootstrap 3 .table-responsive — alinear a tokens */
html body .table-responsive {
  border-radius: var(--radius-md);
  border-color: hsl(var(--border));
  background: hsl(var(--card));
}

/* ── 5. Touch targets — WCAG 2.5.5 ──────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* En dispositivos táctiles: 44×44 mínimo */
  html body .btn,
  html body button.btn,
  html body input[type="button"],
  html body input[type="submit"],
  html body input[type="reset"],
  html body .action-button,
  html body .navbar-nav > li > a {
    min-height: 44px;
  }

  html body nav.ac-nav .navbar-nav > li > a {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  /* Spacing entre links de navegación móvil */
  html body .dropdown-menu > li > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ── 6. Formularios mobile-first ────────────────────────────── */
/* iOS hace zoom si font-size < 16px en inputs/textarea/select. */
@media (max-width: 768px) {
  html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  html body textarea,
  html body select {
    font-size: max(16px, var(--text-sm));
  }
}

/* Inputs/select del Bootstrap 3 .form-control alineados a tokens.
   font-size 15 px desktop, 16 px mobile (regla §6 evita zoom iOS). */
html body .form-control {
  height: 44px;
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: 0.9375rem;             /* 15 px */
  color: hsl(var(--foreground));
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

html body textarea.form-control {
  height: auto;
  min-height: 96px;
  padding: var(--space-3);
  line-height: var(--leading-normal);
  font-size: 0.9375rem;
}

html body .form-control:focus {
  border-color: hsl(var(--input-focus));
  box-shadow: var(--shadow-focus);
  outline: none;
}

html body .form-control[disabled],
html body .form-control[readonly] {
  background-color: hsl(var(--muted));
  opacity: 0.7;
}

html body .form-control::placeholder {
  color: hsl(var(--muted-foreground));
}

html body label {
  font-size: 0.9375rem;             /* 15 px */
  font-weight: 500;
  color: hsl(var(--foreground));
  line-height: 1.5;
}

/* Mejor contraste para checkboxes/radios (Safari mobile) */
html body input[type="checkbox"],
html body input[type="radio"] {
  accent-color: hsl(var(--primary));
}

/* ── 7. Links — siempre visibles fuera de botones ───────────── */
html body a:not(.btn):not(.action-button):not(.navbar-brand):not(.dropdown-toggle):not(.ac-module-card):not(.cm-nav-tab):not(.aac):not(.tit):not(.ac-skip-link):not([class*="paginate_button"]) {
  text-decoration-skip-ink: auto;
}

html body a:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Focus en fondos oscuros (nav) */
html body nav.ac-nav a:focus-visible,
html body nav.ac-nav button:focus-visible {
  outline: 2px solid hsl(var(--brand-soft));
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.16) !important;
}

/* ── 8. Iconografía Font Awesome legacy: aria-hidden ────────── */
html body .fa,
html body .fas,
html body .far,
html body .fal,
html body .fab,
html body [class*="fa-solid"],
html body [class*="fa-regular"],
html body [class*="fa-light"],
html body [class*="fa-brands"],
html body .glyphicon {
  /* Aseguramos que iconos decorativos no aporten texto a screen readers */
  speak: none;
}

/* Línea decorativa: cuando el icono va dentro de un botón con texto, OK.
   Cuando es solo icono, exigir aria-label en el padre (contrato del DS). */

/* ── 9. SweetAlert2 — alinear a tokens ──────────────────────── */
.swal2-popup {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  font-family: var(--font-sans) !important;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
}

.swal2-title {
  color: hsl(var(--foreground)) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-tight);
}

.swal2-content,
.swal2-html-container {
  color: hsl(var(--muted-foreground)) !important;
  font-size: var(--text-sm) !important;
}

.swal2-styled.swal2-confirm {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  font-weight: 500 !important;
  padding: 0 var(--space-5) !important;
  height: 40px;
}

.swal2-styled.swal2-confirm:hover {
  background: hsl(var(--primary-hover)) !important;
}

.swal2-styled.swal2-cancel {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--secondary-foreground)) !important;
  border-radius: var(--radius) !important;
  font-weight: 500 !important;
  padding: 0 var(--space-5) !important;
  height: 40px;
}

.swal2-styled.swal2-deny {
  background: hsl(var(--destructive)) !important;
  color: hsl(var(--destructive-foreground)) !important;
  border-radius: var(--radius) !important;
  font-weight: 500 !important;
  padding: 0 var(--space-5) !important;
  height: 40px;
}

/* ── 10. Hidden helpers ─────────────────────────────────────── */
[hidden] { display: none !important; }

.ac-hide-mobile { display: initial; }
.ac-hide-desktop { display: none; }

@media (max-width: 767px) {
  .ac-hide-mobile { display: none !important; }
  .ac-hide-desktop { display: initial !important; }
}

/* ── 11. WCAG 1.4.12 — text-spacing resilience ──────────────── */
/* Permite que el usuario inflate spacing sin que el layout colapse. */
html body p,
html body li,
html body label,
html body td {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Table headers: words can wrap at spaces but never break mid-word. */
html body th {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* ── 12. Reduced motion (refuerza polish.css) ───────────────── */
@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;
  }
}

/* ── 13. Forced colors (Windows High Contrast) ──────────────── */
@media (forced-colors: active) {
  html body .btn,
  html body .btn-primary,
  html body .action-button {
    border: 1px solid CanvasText;
  }

  html body .ac-card,
  html body .panel,
  html body .modal-content {
    border: 1px solid CanvasText;
  }

  html body :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* ── 14. prefers-contrast: more ─────────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --border: 215 33% 30%;
    --border-strong: 215 33% 17%;
    --muted-foreground: 215 30% 30%;
  }
  html body .btn-primary,
  html body .action-button {
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--primary));
  }
}

/* ── 15. Print ──────────────────────────────────────────────── */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html body nav,
  html body footer,
  html body .navbar,
  html body .ac-nav,
  html body .navbar-fixed-top,
  html body .ac-skip-link,
  html body .btn,
  html body .action-button,
  html body .modal-backdrop,
  html body .dataTables_filter,
  html body .dataTables_length,
  html body .dataTables_paginate,
  html body .dataTables_info,
  html body .loader,
  html body .loader2,
  html body #message {
    display: none !important;
  }

  html body a[href]:not([href^="#"])::after {
    content: " (" attr(href) ")";
    font-size: 90%;
    color: #555 !important;
  }

  html body table,
  html body img {
    page-break-inside: avoid;
  }

  html body h1, html body h2, html body h3 {
    page-break-after: avoid;
  }

  html body thead {
    display: table-header-group;
  }
}

/* ── 16. Scroll margin para anchors con navbar fija ─────────── */
:target {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

/* ── 17. Mejoras de a11y para landmarks ─────────────────────── */
main,
[role="main"] {
  display: block;
  outline: none;
}

main:focus,
#ac-main-content:focus {
  outline: none;
}

/* ── 18. iOS 100vh fix (visual viewport units) ──────────────── */
.ac-min-h-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── 19. Mejor tipografía en sweetalert / dropdowns ─────────── */
html body .dropdown-menu,
html body .dropdown-menu > li > a {
  font-size: 0.9375rem;             /* 15 px */
}

html body .dropdown-menu > li > a {
  padding: 10px var(--space-4);
  line-height: 1.5;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ── 21. Botones de Bootstrap 3 — tipografía accesible ─────── */
/* .btn original de BS3 = 14 px / padding 6-12. Lo subimos a 15 px
   y damos altura mínima 40 px (44 en mobile via §5). */
html body .btn {
  font-size: 0.9375rem !important;  /* 15 px */
  line-height: 1.5;
  padding: 8px var(--space-4);
  min-height: 40px;
}

html body .btn-lg {
  font-size: 1rem !important;       /* 16 px */
  padding: 10px var(--space-5);
  min-height: 48px;
}

html body .btn-sm {
  font-size: 0.875rem !important;   /* 14 px */
  padding: 6px var(--space-3);
  min-height: 32px;
}

/* ── 22. Tablas (Bootstrap 3) — celdas legibles ─────────────── */
html body .table,
html body table.dataTable {
  font-size: 0.9375rem;             /* 15 px */
}

html body .table > thead > tr > th,
html body .table > tbody > tr > td,
html body table.dataTable thead th,
html body table.dataTable tbody td {
  padding: 12px var(--space-3);
  line-height: 1.5;
  vertical-align: middle;
}

html body .table > thead > tr > th,
html body table.dataTable thead th {
  font-weight: 600;
  color: hsl(var(--foreground));
}

/* ── 23. Alertas, badges, panels — tamaños mínimos ───────────── */
html body .alert {
  font-size: 0.9375rem;             /* 15 px */
  line-height: 1.5;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}

html body .label,
html body .badge {
  font-size: 0.8125rem;             /* 13 px — micro UI */
  font-weight: 500;
  padding: 3px 8px;
}

html body .panel-heading,
html body .panel-title {
  font-size: 1rem;                  /* 16 px */
}

html body .modal-title {
  font-size: 1.25rem;               /* 20 px */
  font-weight: 600;
  line-height: 1.35;
}

html body .modal-body {
  font-size: 1rem;                  /* 16 px */
  line-height: 1.6;
}

/* ── 24. List groups & nav pills (BS3) ──────────────────────── */
html body .list-group-item,
html body .nav-pills > li > a,
html body .nav-tabs > li > a {
  font-size: 0.9375rem;             /* 15 px */
  line-height: 1.5;
  padding: 10px var(--space-4);
  min-height: 44px;
}

/* ── 25. DataTables paginate / info / length ──────────────── */
html body .dataTables_info,
html body .dataTables_length,
html body .dataTables_filter,
html body .dataTables_paginate {
  font-size: 0.9375rem;             /* 15 px */
}

html body .dataTables_length select,
html body .dataTables_filter input {
  font-size: 0.9375rem;
  height: 36px;
}

/* ── 20. Sticky footer helper ──────────────────────────────── */
.ac-page-flex {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.ac-page-flex > main,
.ac-page-flex > .ac-main {
  flex: 1 0 auto;
}

/* ── 26. Main content — padding consistente en todas las páginas ── */
html body main.ac-main,
html body .ac-main {
  width: 100%;
  padding-top: var(--space-6);
  padding-bottom: var(--space-12);
}

/* Container interno — max-width consistente y padding lateral fluido */
html body .ac-main > .ac-container,
html body .ac-modules-section,
html body main.ac-main > section,
html body main.ac-main > .container {
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
}

.ac-page-flex > footer {
  flex-shrink: 0;
}