/* responsive-fix.css
 * Guardas globales de responsividad móvil. Se incluye después del CSS principal
 * de cada vista para corregir overflow horizontal y elementos que se salen del
 * viewport en celulares sin requerir reescribir cada template.
 */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* En iOS Safari, 100vh incluye la barra dinámica del navegador y deja
 * contenido oculto. Si una vista usa min-height:100vh, ofrecemos también
 * 100dvh para que respete el viewport visible real. */
@supports (height: 100dvh) {
  body[style*="100vh"],
  html, body {
    /* fallback no-op; los overrides específicos viven abajo */
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
iframe,
embed,
canvas {
  max-width: 100%;
  height: auto;
}

/* Tablas: cualquier <table> directamente dentro de un .table-responsive,
 * .table-wrapper o .overflow-auto no se toca; el resto recibe scroll
 * horizontal nativo en móvil. */
.table-responsive,
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Permitir wrap en encabezados de tabla largos en móvil. */
table {
  max-width: 100%;
}

@media (max-width: 1024px) {
  /* Contenedores típicos no deben exceder el viewport. */
  .container,
  .contenido,
  .content,
  main,
  section,
  .card,
  .panel,
  .modal-content,
  .form-card,
  .registro-container {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  /* Tablas amplias se vuelven scrollables en móvil sin reorganizar el layout. */
  table:not(.no-responsive) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Inputs, selects y textareas que ocupen el ancho del contenedor. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  select,
  textarea {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /* Botones que no se pasen del ancho del contenedor. */
  button,
  .btn,
  input[type="submit"],
  input[type="button"] {
    max-width: 100%;
  }

  /* Imágenes hero / banners decorativos: limitar altura. */
  .hero img,
  .banner img {
    width: 100%;
    height: auto;
  }

  /* Padding más cómodo en móvil. */
  .container,
  .contenido,
  .content,
  main > section,
  .card,
  .panel,
  .form-card {
    padding-left: clamp(0.75rem, 3vw, 1.5rem);
    padding-right: clamp(0.75rem, 3vw, 1.5rem);
  }

  /* Grids de Tailwind / propios que tengan más de 2 columnas pasan a 1. */
  .grid-2-cols,
  .grid-3-cols,
  .grid-4-cols {
    grid-template-columns: 1fr !important;
  }

  /* Formularios de registro / login: stacking limpio. */
  .form-row,
  .row-fields,
  .input-row {
    flex-direction: column !important;
    gap: 0.75rem;
  }

  /* Headers / nav que usen flex sin wrap se desbordan; permitir wrap. */
  header,
  nav,
  .topbar,
  .navbar {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  /* Botones grandes en móviles muy pequeños. */
  .btn-grande,
  .btn-block,
  .submit-btn {
    width: 100%;
  }

  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.15rem; }
}

/* ──────────────────────────────────────────────────────────────────────
 * Modales: si la vista usa el patrón fixed+inset+flex-center para
 * centrar la tarjeta, el contenido alto queda atrapado fuera del viewport
 * en móvil. Hacemos el overlay scrolleable y limitamos la altura del
 * contenido para que su scroll interno tome el relevo.
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .modal,
  .modal-overlay,
  [id$="overlay"][style*="position:fixed"],
  [id$="-overlay"] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-content,
  .modal-card,
  .mrv,
  #modal-registro-vet {
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
  }

  /* SweetAlert2: en pantallas muy estrechas el popup se pega arriba para
   * que el scroll interno funcione bien sobre el wrapper del lib. */
  .swal2-container { padding: 0.5rem !important; }
  .swal2-popup { width: 100% !important; max-width: 95vw !important; }
}

/* ──────────────────────────────────────────────────────────────────────
 * Layouts split-screen tipo login (panel izquierdo + panel derecho).
 * Si un body está en flex-row con dos paneles + min-height:100vh,
 * en móvil debe poder crecer y los paneles no deben centrar el contenido
 * verticalmente (eso atrapa el scroll). Esta es una guarda defensiva
 * para futuras vistas que repliquen el patrón.
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  body {
    /* En vistas que ponen height:100% al body, forzamos auto para que
     * el contenido pueda crecer y la página haga scroll vertical. */
    height: auto !important;
  }
  html {
    height: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * Inputs en iOS: cuando el font-size < 16px, Safari hace zoom al
 * enfocar el input, lo que rompe el layout. Forzamos 16px mínimo.
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * Sidebars/drawers de dashboards: garantizamos que el contenido interno
 * pueda scrollear en móviles bajos (e.g. iPhone SE) y que el ítem final
 * del menú no quede oculto bajo la barra dinámica del navegador.
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .sidebar,
  aside.sidebar,
  nav.sidebar {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}