/* =============================================================================
   metricas · styles.css — la disposición del Panel M (Fase 0, PM-0)
   =============================================================================
   Solo layout: colores con las variables de apps/shared/escala.css y tamaños de letra con sus clases
   (es-titulo-pagina, es-lede, es-subtitulo, es-seccion, es-detalle…). El sistema visual no admite colores,
   tamaños ni tipografías propios (apps/shared/sistema_visual.test.js). Copia de la maqueta aprobada
   (docs/maquetas/panel-m/): encabezado, barra de período, tarjeta pendiente y pie. */

/* La barra de período: la caja la pone la app; adentro, lo que dibuja apps/shared/selector_periodo.js. */
.pm-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; background: var(--es-fondo); border: 1px solid var(--es-linea); border-radius: 12px; padding: 10px 14px; }
.pm-periodo [data-periodo-rotulo] { margin-left: 4px; }
.pm-periodo [data-periodo-unidad] { flex-direction: row; align-items: center; gap: 8px; margin-left: auto; }
.pm-periodo [data-periodo-unidad] .es-select { width: auto; }
.pm-periodo .es-pildoras { gap: 4px; }

.pm-pendiente .es-chip { align-self: flex-start; }
.pm-pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* Celular (375 px): todo apilado, sin scroll de costado. */
@media (max-width: 640px) {
  .pm-periodo { flex-direction: column; align-items: stretch; }
  .pm-periodo [data-periodo-rotulo] { margin-left: 0; }
  .pm-periodo [data-periodo-unidad] { margin-left: 0; justify-content: space-between; }
  .pm-periodo .es-flechas .es-btn { flex: 1 1 0; }
  .pm-periodo .es-pildoras .es-pildora { flex: 1 1 0; }
  .pm-pie { justify-content: flex-start; }
}