/* =============================================================
   IVEIRA PODOLOGÍA - Estilos responsive
   ============================================================= */

/* ---------- Tablets ---------- */
@media (max-width: 1100px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }

  .pos-layout {
    grid-template-columns: 1fr;
  }

  .catalog-grid {
    max-height: 360px;
  }

  .calendar-table .calendar-hora-col {
    width: 60px;
  }
}

@media (max-width: 992px) {
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* ---------- Sidebar off-canvas en móvil/tablet ---------- */
@media (max-width: 880px) {
  .sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
    box-shadow: var(--shadow-hover);
  }

  body.sidebar-mobile-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-collapsed .sidebar {
    width: var(--sidebar-width);
  }

  body.sidebar-collapsed .sidebar-header .sidebar-brand,
  body.sidebar-collapsed .sidebar-profile .profile-info,
  body.sidebar-collapsed .sidebar-nav .nav-label,
  body.sidebar-collapsed .sidebar-nav .nav-section-title {
    opacity: 1;
    width: auto;
    height: auto;
  }

  body.sidebar-collapsed .sidebar-nav a.nav-link {
    justify-content: flex-start;
    padding: 12px 14px;
  }

  .main,
  body.sidebar-collapsed .main {
    margin-left: 0;
  }

  .sidebar-overlay {
    display: block;
  }
}

@media (min-width: 881px) {
  .sidebar-overlay { display: none; }
}

/* ---------- Header y contenido en pantallas pequeñas ---------- */
@media (max-width: 768px) {
  .topbar {
    padding: 0 16px;
  }

  .topbar-title h1 {
    font-size: 17px;
  }

  .topbar-title span {
    display: none;
  }

  .content {
    padding: 18px 16px 40px;
  }

  .user-info {
    display: none;
  }

  .user-box .fa-chevron-down {
    display: none;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .stat-card {
    padding: 16px;
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .stat-icon {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  .stat-info .stat-value { font-size: 21px; }

  .chart-card .chart-wrapper { height: 220px; }

  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box { min-width: 0; }

  .toolbar-filters {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .input-date { width: 100%; }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .swal-form-grid {
    grid-template-columns: 1fr;
  }

  .page-header {
    align-items: stretch;
  }

  .page-header .btn {
    width: 100%;
  }

  .catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .login-card { padding: 28px 22px; }
}

/* ---------- Login responsive ---------- */
@media (max-width: 900px) {
  .login-banner {
    display: none;
  }

  .login-card .login-logo-mobile {
    display: flex;
  }

  .login-form-side {
    padding: 24px;
  }
}

/* ---------- Tablas con scroll horizontal en móvil ---------- */
@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-table {
    min-width: 540px;
  }

  /* Acciones de tabla: apilar verticalmente en pantallas muy pequeñas */
  .table-actions {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Page header: apilar si hay varios botones */
  .page-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .page-header > div:last-child {
    width: 100%;
    justify-content: flex-end;
  }

  /* Modales SweetAlert2 a ancho completo */
  .swal2-popup {
    width: 96vw !important;
    max-width: 96vw !important;
    padding: 20px 16px !important;
  }

  .swal2-html-container {
    font-size: 13px !important;
  }

  /* Grilla formulario en SweetAlert: 1 columna */
  .swal-form-grid {
    grid-template-columns: 1fr !important;
  }

  .swal-field-full {
    grid-column: 1 / -1;
  }

  /* Inputs de SweetAlert2 */
  .swal2-input,
  .swal2-select,
  .swal2-textarea {
    font-size: 14px !important;
  }

  /* Botones de acción del modal apilados */
  .swal-detalle-acciones {
    flex-direction: column;
    gap: 8px;
  }

  .swal-detalle-acciones .btn {
    width: 100%;
  }

  /* Tabs y filtros */
  .toolbar-filters {
    flex-wrap: wrap;
  }

  /* Calendario */
  .calendar-table {
    min-width: 600px;
  }

  .calendar-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabla de citas: columnas mínimas */
  .calendar-table .calendar-hora-col {
    width: 50px;
    min-width: 50px;
  }

  /* Stat cards en 1 columna en móvil muy pequeño */
  .stat-card {
    min-width: 0;
  }

  /* Grilla de evidencias */
  .evidencias-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  /* Eliminar padding extra lateral en mobile */
  .content {
    padding: 14px 12px 40px;
  }

  /* Tabla asistente: badge estado con tiempo */
  #tabla-asistente-body .badge {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .swal2-popup {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  .data-table {
    min-width: 480px;
  }

  /* Topbar */
  .topbar {
    padding: 0 12px;
  }

  .topbar-title h1 {
    font-size: 15px;
  }

  /* Acciones flotantes apiladas */
  .page-header .btn {
    font-size: 12px;
    padding: 8px 12px;
  }

  /* Paginación */
  #paginacion-controles button {
    min-width: 30px;
    padding: 4px 6px;
    font-size: 12px;
  }
}