/* ============================================================
   DANGOFE OS LIQUID V2 — responsive.css
   Breakpoints estratégicos (layout fluido):
   - ≤1440px : compactar espaciados
   - ≤1120px : panel derecho debajo del contenido
   - ≤820px  : tablet — sidebar colapsable, tarjetas 2 col
   - ≤560px  : móvil — drawer, 1 columna, targets ≥44px
   ============================================================ */

/* ------------------------------------------------------------
   ≤ 1440px — pantallas laptop (1366×768)
   ------------------------------------------------------------ */
@media (max-width: 1440px) {
  :root {
    --app-margin: 20px;
    --fs-3xl: 2.2rem;
    --fs-2xl: 1.8rem;
  }
  .dashboard {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .hero {
    padding: var(--space-4) 0 var(--space-6);
  }
  .chart-wrap {
    height: 220px;
  }
}

/* ------------------------------------------------------------
   ≤ 1120px — el panel derecho baja (1024×768)
   ------------------------------------------------------------ */
@media (max-width: 1120px) {
  .dashboard {
    grid-template-columns: minmax(0, 1fr);
  }
  .right-panel {
    order: 10;
  }
  .right-panel__list {
    max-height: none;
  }
  .chart-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Hamburguesa oculta en escritorio */
.topbar__menu-btn {
  display: none;
}

/* ------------------------------------------------------------
   ≤ 820px — tablet (768×1024)
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  :root {
    --app-margin: 14px;
    --radius-outer: 22px;
  }

  /* Sidebar se convierte en drawer superpuesto */
  .sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-w-expanded);
    transform: translateX(-105%);
    z-index: var(--z-drawer);
    background: rgba(var(--glass-rgb), 0.88);
    border-right: 1px solid var(--border-strong);
    box-shadow: var(--shadow-pop);
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
  /* En drawer siempre se muestran etiquetas */
  .sidebar .sidebar__label,
  .sidebar .sidebar__logo-text,
  .sidebar .sidebar__status-text {
    display: block;
  }
  .sidebar .sidebar__item {
    justify-content: flex-start;
    padding-left: var(--space-4);
  }
  .sidebar .sidebar__logo {
    justify-content: flex-start;
    padding-left: var(--space-3);
  }
  .sidebar__toggle {
    display: none;
  }

  .sidebar-backdrop.is-open {
    display: block;
  }

  /* Botón hamburguesa visible */
  .topbar__menu-btn {
    display: flex;
  }

  .stat-row,
  .stat-row--mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bottom-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar {
    padding: var(--space-3) var(--space-4);
    flex-wrap: wrap;
  }
  .view-container {
    padding: 0 var(--space-4) var(--space-4);
  }
  .branch-select span {
    display: none;
  }
}

/* ------------------------------------------------------------
   ≤ 560px — móvil (430×932, 390×844, 360×800)
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  :root {
    /* Fase 2B.1 — edge-to-edge en móvil (sin márgenes ni radios externos) */
    --app-margin: 0px;
    --radius-outer: 0px;
    --fs-3xl: 1.7rem;
    --fs-2xl: 1.45rem;
    --fs-xl: 1.2rem;
  }

  .stat-row,
  .stat-row--mini,
  .bottom-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    padding: var(--space-3) 0 var(--space-5);
  }
  .hero__actions {
    width: 100%;
  }
  .hero__actions .search-bar {
    width: 100%;
    order: -1;
  }

  .topbar {
    gap: var(--space-2);
  }
  .topbar__title {
    font-size: var(--fs-lg);
  }
  .topbar__actions {
    gap: var(--space-1);
  }

  .chart-wrap {
    height: 190px;
  }

  .footer {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    text-align: center;
  }

  .calendar__day b {
    font-size: var(--fs-sm);
  }
}

/* ------------------------------------------------------------
   ≤ 380px — móviles muy estrechos (360×800)
   ------------------------------------------------------------ */
@media (max-width: 380px) {
  :root {
    /* Fase 2B.1 — se mantiene edge-to-edge */
    --app-margin: 0px;
  }
  .view-container {
    padding: 0 var(--space-3) var(--space-3);
  }
  .stat-card {
    padding: var(--space-4);
  }
}



/* ------------------------------------------------------------
   TÁCTIL — targets mínimos de 44×44px en tablet y móvil (≤820px)
   Aplica a todos los controles interactivos, incluidas las
   flechas del calendario y los botones del selector de tema.
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  .btn,
  .btn--icon,
  .tab,
  .sidebar__item,
  .period-select,
  .toast__close,
  .calendar__day {
    min-height: 44px;
  }
  .btn--icon,
  .toast__close {
    min-width: 44px;
  }
  .calendar__month .btn--icon,
  .gauge-panel .panel__header .btn--icon {
    width: 44px;
    min-height: 44px;
  }
  .theme-switch__btn {
    width: 44px;
    height: 44px;
  }
}