/* =========================================================
 * Aurora — reglas responsive globales
 * Se aplica encima de Tailwind. Corrige patrones comunes que
 * quedaron sin breakpoints en las vistas.
 * ========================================================= */

/* ---------- 1. NADA se sale del ancho ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, iframe, svg { max-width: 100%; height: auto; }

/* ---------- 2. Tablas → scroll horizontal amable ---------- */
table { max-width: 100%; }
.table-scroll, .overflow-x-auto { -webkit-overflow-scrolling: touch; }

/* ---------- 3. Modales ---------- */
/* Todos los modales del sistema usan .fixed .inset-0 (Tailwind).
 * En móvil los volvemos casi full-screen y el contenido interno scrollea. */
@media (max-width: 640px) {
  [class*="fixed"][class*="inset-0"] > div,
  .swal2-popup {
    max-width: 100% !important;
    width: calc(100% - 16px) !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    border-radius: 20px !important;
    padding: 18px !important;
  }
  /* Botones al pie de un modal → wrap para que no se salgan */
  [class*="fixed"][class*="inset-0"] .justify-end,
  [class*="fixed"][class*="inset-0"] .justify-between {
    flex-wrap: wrap;
    gap: 8px;
  }
  /* NO forzamos width en botones sueltos: rompía botones internos como "Guardar" */
}

/* ---------- 4. Grids con columnas fijas → colapsan en móvil ---------- */
@media (max-width: 640px) {
  .grid.grid-cols-2, .grid.grid-cols-3, .grid.grid-cols-4,
  .grid.grid-cols-5, .grid.grid-cols-6 { grid-template-columns: 1fr !important; }
  .md\:grid-cols-2, .md\:grid-cols-3, .md\:grid-cols-4 { grid-template-columns: 1fr !important; }
  /* Excepciones útiles: no colapsar los mini-calendarios que usan grid-cols-7 (días de semana) */
}

/* ---------- 5. Header institucional (encabezado.php) ---------- */
@media (max-width: 640px) {
  header { padding-left: 12px !important; padding-right: 12px !important; height: 60px !important; }
  header h1 { font-size: 15px !important; }
  /* Ocultamos el nombre del usuario en móvil (aparece pill blanco a la derecha) */
  header .rounded-full { display: none !important; }
}

/* ---------- 6. Barras de tabs con scroll horizontal ---------- */
nav.overflow-x-auto { padding-left: 4px !important; padding-right: 4px !important; }
nav.overflow-x-auto > * { flex-shrink: 0; }
nav.overflow-x-auto::-webkit-scrollbar { height: 3px; }
nav.overflow-x-auto::-webkit-scrollbar-thumb { background: #c2c6d2; border-radius: 2px; }

/* ---------- 7. Iframes de tabs (facturacion shell) ---------- */
@media (max-width: 640px) {
  .tab-frame { height: calc(100vh - 112px) !important; }
}

/* ---------- 8. Botones más ergonómicos en móvil ---------- */
@media (max-width: 640px) {
  button, .btn, [role="button"], input[type="submit"] { min-height: 40px; }
  .material-symbols-outlined { font-size: 20px !important; }
  /* Reducir texto de labels tiny */
  .text-\[10px\], .text-\[11px\] { font-size: 11px !important; }
}

/* ---------- 9. Utilidades específicas ---------- */
/* Padding extremo (p-8, p-10) → reducido en móvil */
@media (max-width: 640px) {
  .p-8, .p-10 { padding: 16px !important; }
  .p-6 { padding: 14px !important; }
  .px-8 { padding-left: 14px !important; padding-right: 14px !important; }
  .py-6 { padding-top: 14px !important; padding-bottom: 14px !important; }
  .gap-8, .gap-10 { gap: 14px !important; }
  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
}

/* ---------- 10. Agenda de reservas — grilla semanal ---------- */
/* La grilla usa grid-cols-7 fijo (necesario para mostrar los 7 días).
 * En móvil garantizamos scroll horizontal sin romper la grilla. */
@media (max-width: 768px) {
  .grid.grid-cols-7 { min-width: 720px; }
  .agenda-weekly-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- 11. Sidebar de reservas → arriba en móvil ---------- */
@media (max-width: 768px) {
  aside.md\:w-1\/4 { position: static !important; width: 100% !important; }
  .md\:w-3\/4 { width: 100% !important; }
}

/* ---------- 12. Dashboard — grilla de módulos ---------- */
@media (max-width: 640px) {
  #modulosGrid, .modulos-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  #modulosGrid > *, .modulos-grid > * { min-height: 110px; padding: 12px !important; }
}

/* ---------- 13. Formularios de módulos ---------- */
@media (max-width: 640px) {
  /* Inputs y selects → tamaño mínimo cómodo para dedos */
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="password"], input[type="search"], input[type="date"], input[type="time"],
  select, textarea {
    font-size: 16px !important; /* evita zoom automático de iOS */
    min-height: 42px;
  }
  textarea { min-height: 60px; }
  /* Labels chicos suben en tamaño para leer */
  label { font-size: 12px !important; }
}

/* ---------- 14. Cards / KPIs / dashboards ---------- */
@media (max-width: 640px) {
  /* Filas de KPI numéricos grandes → 2 columnas para no romper */
  .grid.grid-cols-2.md\:grid-cols-4, .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  /* Cards enormes ($num $lbl) → tamaño manejable */
  .text-3xl, .text-4xl { font-size: 22px !important; }
  .text-2xl { font-size: 18px !important; }
}

/* ---------- 15. Modales SweetAlert2 ---------- */
@media (max-width: 640px) {
  .swal2-actions { flex-wrap: wrap !important; gap: 6px !important; }
  .swal2-actions .swal2-styled { margin: 4px !important; min-width: 45% !important; }
}

/* ---------- 16. Botones "COBRAR" etc con textos largos ---------- */
@media (max-width: 640px) {
  .py-6 { padding-top: 14px !important; padding-bottom: 14px !important; }
  .text-xl { font-size: 16px !important; }
}

/* ---------- 17. Fijos que ocupan toda la pantalla ---------- */
.fixed.top-16 { top: 60px !important; } /* header colapsado en móvil */

/* ---------- 18. Drawers/aside fijos con footer sticky ---------- */
/* Corrige el bug clásico en móvil: h-screen (100vh) tapa los botones
 * al pie porque el navegador no descuenta su barra de direcciones.
 * Usamos dvh (dynamic viewport height) cuando el navegador lo soporta. */
aside.fixed.h-screen,
aside[class*="fixed"][class*="h-screen"] {
  height: 100vh;
  height: 100dvh;      /* móviles modernos: descuenta la barra */
  max-height: 100dvh;
}
/* El footer (botones al pie del drawer) no debe encogerse */
aside.fixed .flex.flex-col > div:last-child,
aside[class*="fixed"] .flex.flex-col > div:last-child {
  flex-shrink: 0;
}
/* El área scrolleable del drawer respeta el resto del alto */
aside.fixed .flex.flex-col > .flex-1.overflow-y-auto {
  min-height: 0; /* clave para que flex-1 no crezca infinito y tape el footer */
}

/* Aún así, en móvil pequeño reducimos padding del footer del drawer */
@media (max-width: 640px) {
  aside[class*="fixed"] .p-8.bg-slate-50,
  aside[class*="fixed"] .flex.flex-col > div:last-child.p-8 {
    padding: 12px 16px !important;
  }
  aside[class*="fixed"] .flex.flex-col > div:first-child.p-8 {
    padding: 14px 16px !important;
  }
  /* Achicar botones de acción del drawer */
  aside[class*="fixed"] button.py-4 { padding-top: 12px !important; padding-bottom: 12px !important; }
}

/* ---------- 19. Calendario mini (sidebar reservas) ---------- */
/* El grid-cols-7 debe caber sin cortar en 320-430px. Achicamos celdas. */
@media (max-width: 640px) {
  aside .grid.grid-cols-7 { gap: 2px !important; }
  aside .grid.grid-cols-7 > * {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 11px !important;
  }
  /* Días clicables (h-10 w-10 = 40px) → celda flexible */
  aside .grid.grid-cols-7 a,
  aside .grid.grid-cols-7 button,
  aside .grid.grid-cols-7 > div {
    width: 100% !important;
    height: 34px !important;
    padding: 0 !important;
  }
  /* Título del mes más compacto */
  aside h2.font-headline { font-size: 15px !important; }
}

/* ---------- 20. Modales largos con teclado móvil ---------- */
/* El keyboard virtual tapa los botones si el modal es alto.
 * Reducimos altura máxima para dejar aire abajo. */
@media (max-width: 640px) {
  #modalCita, #modalCatalogo,
  #modalCliente, #modalProductos, #modalTransferencia {
    align-items: flex-start !important;
    padding-top: 12px !important;
  }
  #modalCita > div, #modalCatalogo > div,
  #modalCliente > div, #modalProductos > div, #modalTransferencia > div {
    max-height: 85dvh !important;
    max-height: 85vh !important;
    margin-top: 8px !important;
  }
  /* Botones al pie del modal SIEMPRE visibles: quedan sticky abajo */
  #modalCita .flex.justify-end,
  #modalCatalogo .flex.items-center,
  #modalCliente .flex.justify-end,
  #modalProductos .flex.justify-end {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 12px;
    margin-top: 6px;
    z-index: 5;
    border-top: 1px solid #eee;
  }
}

/* ---------- 21. Sidebar de reservas: NO en sticky en móvil ---------- */
@media (max-width: 768px) {
  aside.md\:sticky { position: static !important; }
}

/* ---------- 22. Utilidades ---------- */
.no-scroll-x { overflow-x: hidden; }