/* public/styles/responsive.css — Bloque 20: breakpoints.
   mobile <=767px · tablet 768-1023px · desktop >=1024px */

/* ---- tablet: sidebar más angosta, contenido con menos padding ---- */
@media (max-width: 1023px){
  .mediador-app .sidebar{ width: 220px; }
  .mediador-app .main{ margin-left: 220px; }
  .mediador-app .page-content{ padding: var(--space-6) var(--space-5) var(--space-8); }
}

/* ---- tablet propiamente (768-1023, no mobile): sidebar colapsada a solo
   íconos — spec Bloque 38. Los textos se ocultan visualmente pero quedan
   para lectores de pantalla; title="" en cada item da el nombre al pasar
   el mouse. Los grupos ("Trabajo"/"Seguimiento"/"Estudio") no tienen
   sentido como texto en 56px de ancho, se ocultan. ---- */
@media (min-width: 768px) and (max-width: 1023px){
  .mediador-app .sidebar{ width: 68px; padding-left: var(--space-2); padding-right: var(--space-2); }
  .mediador-app .main{ margin-left: 68px; }
  .mediador-app .sidebar-logo{ padding-left: 4px; padding-right: 4px; }
  .mediador-app .sidebar-logo .mediador-logo-text{ display: none; }
  .mediador-app .sidebar-group-label{ display: none; }
  .mediador-app .sidebar-item{ justify-content: center; padding: 0; }
  .mediador-app .sidebar-item span:not(.sidebar-badge){ display: none; }
  .mediador-app .sidebar-item .sidebar-badge{ position: absolute; top: 2px; right: 2px; margin-left: 0; }
  .mediador-app .sidebar-item{ position: relative; }
  .mediador-app .sidebar-plan-card{ align-items: center; text-align: center; }
  .mediador-app .sidebar-plan-label, .mediador-app .sidebar-plan-link{ display: none; }
  .mediador-app .account-btn .account-name{ display: none; }
  .mediador-app .account-btn .caret{ display: none; }

  /* Bloque 38 — KPIs de a 2 en tablet (la referencia pide 4 en desktop) */
  .mediador-app .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mediador-app .dash-row-7-5, .mediador-app .dash-row-8-4, .mediador-app .dash-row-3{ grid-template-columns: 1fr; }
}

/* ---- mobile: sidebar se convierte en drawer, topbar gana botón de menú ---- */
@media (max-width: 767px){
  .mediador-app .sidebar{
    transform: translateX(-100%); width: min(280px, 84vw); box-shadow: var(--shadow-md);
  }
  .mediador-app .sidebar.open{ transform: translateX(0); }
  .mediador-app .main{ margin-left: 0; }
  .mediador-app .topbar{ padding: 0 var(--space-4); }
  .mediador-app .topbar-menu-btn{ display: inline-flex; }
  .mediador-app .topbar-logo-mobile{ display: inline-flex; margin-left: auto; }
  .mediador-app .page-content{ padding: var(--space-4) var(--space-4) calc(var(--space-9) + env(safe-area-inset-bottom, 0px)); }

  .mediador-app .card{ padding: var(--space-4); }
  .mediador-app h1{ font-size: var(--font-size-xl); }
  .mediador-app h2{ font-size: var(--font-size-lg); }

  /* landing (nueva página principal): sus propios breakpoints viven en
     landing.css, autocontenidos — acá no queda nada de ella. */
  .mediador-app .btn-lg{ height: 44px; padding: 0 var(--space-4); font-size: var(--font-size-sm); }

  .mediador-app .modal{ max-width: calc(100vw - 32px); }
  .mediador-app .modal-body, .mediador-app .modal-header, .mediador-app .modal-footer{ padding-left: var(--space-4); padding-right: var(--space-4); }

  /* comunicaciones: lista + chat pasan a ancho completo, apilados */
  .mediador-app .comms-layout{ flex-direction: column; }

  /* Bloque 38/39-fix — buscador de la topbar colapsado a ícono en mobile.
     Al tocarlo, en vez de un overlay `position:fixed` que tapaba TODA la
     topbar (incluido el botón de hamburguesa, que quedaba invisible
     debajo — bug reportado), el buscador crece DENTRO de la topbar
     (flex:1) como cualquier otro ítem del row: la hamburguesa y la
     campana siguen siendo hermanos visibles en el mismo flex, nunca
     tapados. El logo del medio se oculta mientras se busca porque no
     entra el espacio, no porque algo lo cubra. */
  .mediador-app .topbar-search-icon-btn{ display: inline-flex; }
  .mediador-app .topbar-search-wrap{ flex: 0 0 auto; max-width: none; }
  .mediador-app .topbar-search{ display: none; }
  .mediador-app .topbar-search-wrap.search-open{ flex: 1 1 auto; min-width: 0; }
  .mediador-app .topbar-search-wrap.search-open .topbar-search{ display: flex; width: 100%; }
  .mediador-app .topbar.topbar-search-active .topbar-logo-mobile{ display: none; }
  .mediador-app .topbar.topbar-search-active .topbar-search-icon-btn{ display: none; }
  .mediador-app .topbar-bell-panel{ max-width: calc(100vw - 24px); }
  .mediador-app .topbar-clock{ display: none; }
}