/* =========================================================
   Agenda Accesibilidad + Móvil v1 · SPCyPD
   Capa aditiva: no modifica la lógica ni la base de datos.
   ========================================================= */

/* Mejor zona de toque y respuesta táctil */
button, a.btn, .chip, .filtro, .filtro-pend, .filtro-limpiar,
.rec-check, .rec-del, .campana, .chip-rec, .nav-btn, .today-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Foco visible consistente para teclado */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px !important;
}

/* Enlace invisible hasta usar Tab: salta directo al contenido */
.a11y-skip {
  position: fixed;
  left: 12px;
  top: max(8px, env(safe-area-inset-top));
  z-index: 5000;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--panel-solid);
  color: var(--gold-2);
  border: 1px solid var(--gold);
  box-shadow: var(--sh-lg);
  text-decoration: none;
  font-weight: 700;
  transition: transform .18s var(--ease);
}
.a11y-skip:focus { transform: translateY(0); }

/* Texto únicamente para lectores de pantalla */
.sr-only {
  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;
}

/* ===== MÓVIL / TÁCTIL ===== */
@media (max-width: 700px), (hover:none) and (pointer:coarse) {
  body {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  /* Evita zoom automático de iOS al enfocar campos menores a 16px. */
  input, select, textarea,
  .grupo input, .grupo select, .grupo textarea,
  .rec-tit, .search {
    font-size: 16px !important;
  }

  /* Controles principales: mínimo táctil cómodo. */
  .toolbar .btn,
  .toolbar a.btn,
  .nav-btn,
  .today-btn,
  .acc-modal .btn,
  .dropdown-menu button,
  .mini {
    min-height: 44px;
  }

  .toolbar .btn.icon,
  .nav-btn {
    min-width: 44px;
  }

  /* Recordatorios: se agranda la zona de dedo, no solo el dibujo. */
  .rec-check {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    margin-top: -4px;
  }

  .rec-del,
  .campana {
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-grid !important;
    place-items: center;
    padding: 6px !important;
    border-radius: 10px;
  }

  .chip-rec {
    min-height: 38px;
    display:inline-flex;
    align-items:center;
  }

  /* Los modales pasan a bottom-sheet: más naturales en celular. */
  .overlay {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 10px 8px 0 !important;
  }

  .overlay .modal {
    width: 100% !important;
    max-width: 720px !important;
    max-height: min(92dvh, 820px) !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 20px 16px calc(18px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
  }

  .overlay.activo .modal {
    animation: a11ySheetIn .24s var(--ease) both !important;
  }

  @keyframes a11ySheetIn {
    from { opacity:0; transform:translateY(28px); }
    to   { opacity:1; transform:none; }
  }

  .dos-col {
    grid-template-columns: 1fr !important;
  }

  .acc-modal {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: 10px;
    padding-bottom: max(2px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, var(--panel-solid) 25%);
  }

  .acc-modal .btn {
    flex: 1 1 0;
    justify-content: center;
  }

  /* Evita efectos hover pegados en pantallas táctiles. */
  .ev:hover,
  .nav-btn:hover,
  .btn:hover,
  .mini:hover {
    transform: none !important;
  }
}

/* Horizontal de teléfono: menos altura desperdiciada. */
@media (max-height: 520px) and (orientation: landscape) {
  .overlay .modal { max-height: 96dvh !important; }
  .top { margin-bottom: 10px !important; }
  .toolbar { margin-bottom: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .a11y-skip,
  .overlay .modal { transition:none !important; animation:none !important; }
}