/* Pestaña Métricas (metricas.js). Usa las variables de color y tipografía que
   define index.html en :root, para verse igual que el resto del portal. Primero
   para celular; en pantallas anchas las tarjetas se acomodan en más columnas. */

#tab-metricas h3 { font-family: var(--display); font-size: 1.35rem; margin: 0 0 14px; }
#tab-metricas h4 { font-size: 0.95rem; color: var(--suave); margin: 18px 0 10px; font-weight: 600; }

/* ---------- Selector de periodo ---------- */
.met-periodos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.met-periodos button,
.met-periodos select {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--panel);
  color: var(--texto);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
/* El CSS general del portal pone los select a todo el ancho; aquí va junto a
   los botones. */
.met-periodos select { width: auto; max-width: 100%; }
.met-periodos button.activo,
.met-periodos select.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.met-periodos select.activo option { color: var(--texto); background: var(--panel); }

.met-rango { font-weight: 600; margin: 0 0 16px; }
.met-rango span { color: var(--suave); font-weight: 500; }

.met-vacio { color: var(--suave); margin: 8px 0; }

/* ---------- Tarjetas con número y comparación ---------- */
.met-kpis { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .met-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .met-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.met-tile {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px;
  min-width: 0;
}
.met-tile .tile-k { letter-spacing: .03em; }
/* El número nunca se parte ("$1,250.00" en un renglón): en celular se achica
   con el ancho de la pantalla en vez de brincar de línea. */
.met-valor {
  font-family: var(--display);
  font-size: clamp(1.1rem, 4.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.1;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.met-var {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: #eceff1;
  color: var(--suave);
  white-space: nowrap;
}
.met-var.sube { background: var(--acento-claro); color: var(--acento); }
.met-var.baja { background: var(--peligro-claro); color: var(--peligro); }
.met-nota { font-size: 0.82rem; color: var(--suave); margin-top: 6px; }

/* ---------- Recoger / domicilio: barra apilada ---------- */
.met-apilada { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--bg); }
.met-apilada .tramo { display: block; height: 100%; }
.tramo.recoger, .punto-leyenda.recoger { background: var(--azul); }
.tramo.domicilio, .punto-leyenda.domicilio { background: var(--acento); }
.tramo.sin-dato, .punto-leyenda.sin-dato { background: #b0bac6; }
.met-leyenda { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.92rem; }
.punto-leyenda { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ---------- Productos más vendidos ---------- */
.met-dos { display: grid; gap: 8px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .met-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.met-lista ol { margin: 0; padding-left: 1.4em; }
.met-lista li { margin-bottom: 10px; }
.met-lista-fila { display: flex; justify-content: space-between; gap: 12px; }
.met-producto { overflow-wrap: anywhere; }
.met-barra-h { height: 6px; background: var(--bg); border-radius: 999px; margin-top: 4px; overflow: hidden; }
.met-barra-h span { display: block; height: 100%; background: var(--azul); border-radius: 999px; }

/* ---------- Horas y días: columnas ---------- */
.met-columnas {
  display: grid;
  grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
  gap: 3px;
  align-items: end;
  height: 150px;
}
.met-col { display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
/* El número y la barra comparten esta área; la barra llega a 85 % como
   máximo para que el número quepa arriba y las etiquetas queden alineadas. */
.met-col-area { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.met-col-valor { font-size: 0.7rem; color: var(--suave); line-height: 1.2; }
.met-col-barra { display: block; width: 100%; max-width: 36px; background: var(--azul); border-radius: 4px 4px 0 0; }
.met-col-etiqueta { font-size: 0.7rem; color: var(--suave); margin-top: 4px; min-height: 1.2em; white-space: nowrap; }

/* ---------- Plan ---------- */
.met-plan-cifras { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 1.05rem; }
.met-plan-barra { height: 14px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.met-plan-barra span { display: block; height: 100%; background: var(--azul); border-radius: 999px; }
.met-plan-barra.nivel-80 span { background: var(--aviso); }
.met-plan-barra.nivel-100 span { background: var(--peligro); }
.met-plan-mensajes { margin-top: 16px; }
.aviso.met-aviso-80 { background: var(--aviso-claro); color: var(--aviso); }