/* ==========================================================================
   Forprocer LMS - Capa movil (≤768px)
   Todas las reglas viven dentro del @media para que el escritorio no las vea.
   Se carga DESPUES del resto de CSS en index.html y gana por cascada.
   ========================================================================== */

@media (max-width: 768px) {
  /* ------------------------------------------------------------------------
     Drawer off-canvas: refinamientos sobre lo existente en layout.css
     Reutiliza clases .sidebar.is-open, .sidebar-overlay.is-visible.
     ------------------------------------------------------------------------ */

  /* Bloqueo de scroll del body cuando el drawer esta abierto */
  body.drawer-open {
    overflow: hidden;
  }

  /* Sidebar como drawer con ancho movil y transicion suave */
  .sidebar {
    width: var(--mobile-drawer-width);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Overlay con transicion de opacidad */
  .sidebar-overlay {
    transition: opacity 200ms ease;
  }

  /* ------------------------------------------------------------------------
     Navbar movil: altura reducida y safe area superior iOS
     ------------------------------------------------------------------------ */
  .navbar {
    height: var(--mobile-navbar-height);
    min-height: var(--mobile-navbar-height);
    padding-top: env(safe-area-inset-top);
  }

  /* Logo: mostrar favicon en movil, ocultar logo completo */
  .navbar__logo {
    display: flex;
    align-items: center;
  }

  .navbar__logo--full {
    display: none;
  }

  .navbar__logo--icon {
    display: block;
    height: 28px;
    width: auto;
  }

  /* ------------------------------------------------------------------------
     Safe areas iOS y scroll behavior
     ------------------------------------------------------------------------ */
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  html, body {
    overscroll-behavior-y: contain;
  }

  /* ------------------------------------------------------------------------
     Tipografia escalada para movil
     ------------------------------------------------------------------------ */
  html {
    font-size: var(--mobile-font-base);
  }

  h1 { font-size: 1.5rem;   line-height: 1.35; }
  h2 { font-size: 1.25rem;  line-height: 1.35; }
  h3 { font-size: 1.125rem; line-height: 1.4;  }
  h4 { font-size: 1rem;     line-height: 1.4;  }

  /* Prevenir scroll horizontal con URLs o palabras largas */
  p, li, td, dd, span {
    overflow-wrap: anywhere;
  }

  /* ------------------------------------------------------------------------
     Touch targets adicionales (no cubiertos por layout.css)
     ------------------------------------------------------------------------ */
  button:not(.btn):not(.btn-sm),
  .icon-button {
    min-height: var(--mobile-touch-min);
    min-width: var(--mobile-touch-min);
  }

  /* ------------------------------------------------------------------------
     Formularios: prevenir zoom iOS y garantizar altura tactil
     layout.css ya pone .form-row en columna y ancho 100%; no lo duplicamos.
     ------------------------------------------------------------------------ */
  input, select, textarea {
    font-size: 16px; /* 16px exacto evita el zoom automatico de Safari iOS */
    min-height: var(--mobile-touch-min);
  }

  /* ------------------------------------------------------------------------
     Grids genericos: colapsar a una columna en movil
     ------------------------------------------------------------------------ */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* ------------------------------------------------------------------------
     Contenedores genericos: padding comodo y ancho 100%
     (.main-content ya tiene padding en layout.css, no se duplica)
     ------------------------------------------------------------------------ */
  .page-container,
  .container {
    padding-left: var(--mobile-padding-x);
    padding-right: var(--mobile-padding-x);
    max-width: 100%;
    width: 100%;
  }
}