/* flots · css/paginas/estudio.css
   Estudio: estilos comunes a las pantallas del estudio (solo español).
   - Encabezado de página: migas + título display (Admin/AdminPedidos/Brief) con la nota a la derecha.
   - Página base (columna con gap 28 como el <main> del diseño), cajas blancas y grillas base.
   Cada página del estudio escribe lo suyo en css/paginas/est-<pagina>.css con su prefijo. */

/* ---------- Página ---------- */
.est-pagina{
  display:flex;
  flex-direction:column;
  gap:28px;
  min-width:0;
}

/* ---------- Encabezado: título display + nota a la derecha (alineados abajo) ---------- */
.est-cabecera{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px 32px;
  min-width:0;
}
.est-cabecera-titulos{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.est-cabecera .display{ max-width:100%; }
.est-cabecera-nota{
  margin:0;
  font-size:16px;
  line-height:1.4;
  color:var(--muted);
}

/* Migas: "Pedidos / [Marca]" (14 px gris, link subrayado) */
.est-migas{
  margin:0;
  font-size:14px;
  line-height:1.4;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.est-migas a{ color:var(--muted); text-underline-offset:2px; }
.est-migas a:hover{ color:var(--ink); }
.est-migas-sep{ margin:0 .3em; }

/* ---------- Títulos de sección y cajas ---------- */
.est-seccion-titulo{
  margin:0;
  font-size:22px;
  font-weight:500;
  line-height:1.2;
}
.est-caja{
  min-width:0;
  background:var(--surface);
}

/* ---------- Grillas base ---------- */
/* Contenido + columna lateral fija (Admin: 400 px; Brief: 340 px) */
.est-grilla-lateral{
  display:grid;
  grid-template-columns:minmax(0, 1fr) var(--est-lateral, 400px);
  gap:24px;
  min-width:0;
}
/* Tres columnas iguales ("Para hoy", KPI) */
.est-grilla-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  min-width:0;
}

/* ---------- Tablet: las grillas de 2 columnas se apilan ---------- */
@media (max-width: 1199px){
  .est-grilla-lateral{ grid-template-columns:minmax(0, 1fr); }
}

/* ---------- Celular (MAdmin / MPagos) ---------- */
@media (max-width: 767px){
  .est-pagina{ gap:24px; }
  .est-cabecera{ flex-direction:column; align-items:flex-start; gap:6px; }
  .est-cabecera-titulos{ gap:8px; }
  /* Títulos del estudio en celular: 48 px como en MAdmin / MPagos */
  .est-cabecera .display-sm{ font-size:48px; }
  .est-cabecera-nota{ font-size:14px; }
  .est-seccion-titulo{ font-size:19px; }
  .est-grilla-3{ grid-template-columns:minmax(0, 1fr); gap:10px; }
}