/* ======================================================
   MOBILE.CSS
   Ajustes SOLO para móviles y tablets
   NO afecta escritorio
   ====================================================== */

/* ---------- Reglas base móviles ---------- */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

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

/* ======================================================
   📱 LOGIN - Vista móvil
   ====================================================== */
@media (max-width: 768px) {

  /* Centrado correcto y sin zoom raro */
  .login-page {
    padding: 1rem;
  }

  /* La tarjeta ocupa buen ancho */
  .login-card {
    width: 100%;
    max-width: 520px;
    border-radius: 18px;
  }

  /* Header del login más compacto */
  .login-header {
    padding: 1rem 1.25rem;
  }

  /* Texto legible */
  .login-title {
    font-size: 1.1rem;
  }

  .login-subtitle {
    font-size: 0.9rem;
  }

  /* Inputs cómodos (evita zoom iOS) */
  input,
  select,
  button {
    font-size: 16px;
    width: 100%;
  }
}

/* ======================================================
   📱 DASHBOARD - Vista móvil
   ====================================================== */
@media (max-width: 768px) {

  /* Topbar en columna */
  .app-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
  }

  /* Contenido principal */
  .app-main {
    padding: 1rem;
  }

  /* MENÚ PRINCIPAL
     Escritorio: 4 columnas
     Móvil: 1 columna */
  .menu-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Cards grandes y legibles */
  .menu-card {
    width: 100%;
    padding: 1.25rem;
    border-radius: 18px;
  }

  .menu-card-title {
    font-size: 1.05rem;
  }

  .menu-card-text {
    font-size: 0.95rem;
  }
}
/* ======================================================
   📱 MÓDULO USUARIOS – RESPONSIVE (MÓVIL/TABLET)
   ====================================================== */
@media (max-width: 768px) {

  /* ==========================
     TOPBAR (Volver / Salir)
     ========================== */
  .app-topbar {
    padding: 0.9rem 1rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.4rem !important;
  }

  .app-topbar-right {
    width: 100% !important;
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    margin-top: 0.35rem !important;
  }

  .app-topbar-right .btn-topbar,
  .app-topbar-right .btn {
    width: auto !important;
    padding: 0.45rem 0.9rem !important;
  }

  .app-topbar-right form {
    width: auto !important;
    display: inline-block !important;
    margin: 0 !important;
  }

  /* ==========================
     Filtros
     ========================== */
  .usuarios-filtros-card {
    padding: 1rem !important;
  }

  .usuarios-filtros-form .uf-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
  }

  .usuarios-filtros-form .uf-group label {
    text-align: left !important;
  }

  /* Botones en fila (2 columnas) */
  .usuarios-filtros-form .uf-actions {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  .usuarios-filtros-form .uf-actions .btn {
    width: 50% !important;
    justify-content: center !important;
  }

  /* ==========================
     Tabla (scroll horizontal)
     ========================== */
  .usuarios-tabla-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.75rem !important;
  }

  .usuarios-tabla {
    min-width: 900px !important; /* fuerza scroll en móvil */
    font-size: 0.85rem !important;
    border-collapse: collapse !important;
  }

  .usuarios-tabla th,
  .usuarios-tabla td {
    white-space: nowrap !important;
  }

  /* Acciones centradas */
  .usuarios-tabla td:last-child {
    text-align: center !important;
  }
    /* ======================================================
   📱 USUARIOS – FORMULARIOS (NUEVO / EDITAR)
   ====================================================== */
@media (max-width: 768px) {

  /* Contenedor principal del formulario (aplica a nuevo/editar) */
  .usuarios-form-nuevo,
  .usuarios-form-editar,
  .usuarios-form-card,
  .usuarios-tabla-card,
  .usuarios-filtros-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Si tu formulario va dentro de una tarjeta blanca */
  .usuarios-form-nuevo,
  .usuarios-form-editar,
  .usuarios-form-card {
    padding: 1rem !important;
    border-radius: 18px !important;
  }

  /* Filas del formulario -> en columna */
  .usuarios-form-nuevo .uf-row,
  .usuarios-form-editar .uf-row,
  form .uf-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  /* Cada campo ocupa todo el ancho */
  .usuarios-form-nuevo .uf-group,
  .usuarios-form-editar .uf-group,
  form .uf-group {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Inputs/Selects grandes */
  .usuarios-form-nuevo input,
  .usuarios-form-nuevo select,
  .usuarios-form-editar input,
  .usuarios-form-editar select,
  form input,
  form select {
    width: 100% !important;
    font-size: 16px !important;
  }

  /* Checkbox no a 100% */
  input[type="checkbox"] {
    width: auto !important;
  }

  /* ==========================
     BOTONES (Cancelar / Guardar)
     ========================== */

  /* Si tienes contenedor de acciones */
  .form-actions,
  .uf-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    margin-top: 1rem !important;
    align-items: stretch !important;
  }

  /* Botones al 100% */
  .form-actions .btn,
  .uf-actions .btn,
  .btn-login,
  button.btn {
    width: 100% !important;
    justify-content: center !important;
  }
}
}
/* ======================================================
   📱 SALONES DISPONIBLES – RESPONSIVE (FIX COMPLETO)
   ====================================================== */
@media (max-width: 768px) {

  /* --------- 1) Asegurar que la tarjeta use todo el ancho --------- */
  .usuarios-filtros-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
  }

  /* --------- 2) Apilar filas (cubre uf-row y estructuras comunes) --------- */
  .usuarios-filtros-card .uf-row,
  .usuarios-filtros-card .usuarios-filtros-form .uf-row,
  .usuarios-filtros-card .form-row,
  .usuarios-filtros-card .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
  }

  /* --------- 3) Cada campo a 100% (cubre uf-group y form-group) --------- */
  .usuarios-filtros-card .uf-group,
  .usuarios-filtros-card .uf-group.uf-grow2,
  .usuarios-filtros-card .form-group,
  .usuarios-filtros-card .col,
  .usuarios-filtros-card .field {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  /* --------- 4) Inputs/Selects grandes y legibles --------- */
  .usuarios-filtros-card input,
  .usuarios-filtros-card select {
    width: 100% !important;
    font-size: 16px !important;
  }

  /* --------- 5) Botón Buscar abajo y ancho completo --------- */
  .usuarios-filtros-card .uf-actions,
  .usuarios-filtros-card .actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }

  .usuarios-filtros-card .uf-actions .btn,
  .usuarios-filtros-card .actions .btn,
  .usuarios-filtros-card button[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.85rem 1rem !important;
    white-space: nowrap !important;
  }

  /* --------- 6) Ajustes finos para date/number --------- */
  input[type="date"],
  input[type="number"] {
    font-size: 16px !important;
  }
}
/* ======================================================
   📱 CONFERENCIAS – RESPONSIVE (tabla ancha en móvil)
   Estructura real:
   main.app-main > section.usuarios-filtros-card > table.usuarios-tabla
   ====================================================== */
@media (max-width: 768px) {

  /* Scroll vertical normal */
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
  }

  /* Evitar que algún contenedor corte el contenido */
  .app-main {
    overflow: visible !important;
  }

  /* ✅ AQUÍ está la tabla en conferencias, por eso el scroll va aquí */
  .usuarios-filtros-card {
    overflow-x: auto !important;                /* scroll horizontal */
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* La tabla no se debe comprimir; forzamos ancho mínimo */
  .usuarios-filtros-card .usuarios-tabla {
    min-width: 1300px !important;               /* ajusta 1100–1500 si quieres */
    border-collapse: collapse !important;
  }

  /* Evita que el texto se parta y aplaste columnas */
  .usuarios-filtros-card .usuarios-tabla th,
  .usuarios-filtros-card .usuarios-tabla td {
    white-space: nowrap !important;
  }

  /* Footer no fijo (por si en algún punto se fijó) */
  .app-footer {
    position: static !important;
  }
}