/* responsive.css — adaptaciones para pantallas <=768px.
   Filosofía: la app es desktop-first; en tablet y abajo solo asegurar que sigue
   siendo usable (sin perder funciones), no rehacer la UI. */

@media (max-width: 768px) {
  /* Layout móvil: sidebar pasa a overlay, body se vuelve 1 columna */
  body.app-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 52px 1fr;
    grid-template-areas: "topbar" "main";
  }

  .topbar {
    padding: 0 14px;
    gap: 12px;
  }

  /* Sidebar: overlay desde la izquierda con backdrop (sigue blanca según manual) */
  .sidebar {
    position: fixed;
    left: 0;
    top: 52px;
    bottom: 0;
    width: 240px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 150;
    grid-area: unset !important;
    box-shadow: var(--shadow2);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open::after {
    content: '';
    position: fixed;
    inset: 52px 0 0 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 140;
    cursor: pointer;
  }
  /* El period chip se oculta en móvil para ahorrar espacio */
  .topbar-period { display: none; }
  /* Container con menos padding */
  main#app { padding: 20px 16px; }

  /* En móvil: el hamburger SÍ se muestra. Estilos base ya en styles.css. */
  .nav-toggle {
    display: inline-flex;
  }

  #user-bar {
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 0;
  }
  #user-bar #user-email { font-size: 11px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Grids colapsan a 1 columna */
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* Modales: ocupan toda la pantalla con padding */
  .modal {
    width: 100% !important;
    max-width: none !important;
    max-height: 90vh !important;
    margin: 0 8px;
    border-radius: var(--r);
  }
  .modal-overlay {
    padding: 16px 0;
    align-items: flex-start;
  }
  .form-row { flex-direction: column; gap: 8px; }
  .form-row > div { width: 100%; }

  /* Tablas con scroll horizontal */
  .card { padding: 12px; }
  .card > table.data,
  .card > div > table.data { display: block; overflow-x: auto; }
  table.data { font-size: 12px; }
  table.data th, table.data td { padding: 6px 8px; }

  /* Tabs scrollables horizontalmente */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .tabs .tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Turno grid */
  .turno-grid { grid-template-columns: 1fr !important; }

  /* KPI grid: 2 columnas en lugar de 3-4 */
  .kpi {
    padding: 12px;
  }
  .kpi .value { font-size: 22px; }
  .kpi .label { font-size: 11px; }

  /* Pagination en móvil: solo botones esenciales */
  .pagination {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .pagination-controls {
    justify-content: center;
    gap: 6px;
  }
  .pagination-info { text-align: center; }

  /* Breadcrumbs apretados */
  .breadcrumbs { font-size: 11px; flex-wrap: wrap; }

  /* h1 más pequeño */
  h1 { font-size: 20px; }
  h2 { font-size: 16px; }

  /* Inputs y selects más altos para tocar bien */
  input, select, textarea, button {
    font-size: 14px;
    padding: 8px 12px;
  }

  /* Listado de toast: encima del fold */
  #toast-root {
    top: auto !important;
    bottom: 16px !important;
    left: 8px;
    right: 8px;
  }
  .toast { width: 100%; max-width: none; }
}

/* Móvil pequeño (<=480px): aún más compacto */
@media (max-width: 480px) {
  .pagination-controls button { padding: 4px 6px; min-width: 28px; font-size: 11px; }
  /* Mostrar solo primer y último botón + actual en paginator */
  .pagination-btn:not(.active):not(:first-child):not(:last-child):not([data-page="1"]) {
    display: none;
  }
}

/* v3.6.0 · Tablas anchas usables en tablet/móvil: la card que contiene una
   tabla permite scroll horizontal en vez de desbordar la pantalla. */
@media (max-width: 768px) {
  .card:has(table.data) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card table.data { min-width: 640px; }
  /* Planning y calendario: el grid también scrollea horizontal */
  .planning-wrap, .cal-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}