/* ==========================================================================
   LeadSync - Metricas
   La barra de periodos y la tabla de atencion (item 127).

   OJO CON EL ORDEN: estos ficheros se enlazan en index.html en un orden concreto y
   ese orden ES la cascada. Mover un enlace de sitio cambia que regla gana entre dos
   de la misma especificidad. Si anades uno nuevo, ponlo donde le toque, no al final.
   ========================================================================== */

/* ==========================================================================
   Métricas de atención (item 127)
   ========================================================================== */
.met-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.met-periodos {
  display: flex;
  gap: 2px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}
.met-per {
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: 6px;
  padding: 6px 11px;
  font-size: 12.5px;
  color: var(--text-dim);
  transition: background-color 120ms ease, color 120ms ease;
}
.met-per:hover { color: var(--text); }
.met-per.active {
  background: var(--bg-panel);
  color: var(--text);
  font-weight: 600;
}
.met-refresh { margin-left: auto; }
.met-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.met-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  animation: qr-row-in 180ms ease-out;
}
.met-card-val {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}
.met-card-tit {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.35;
}
.met-card-pie {
  font-size: 11px;
  color: var(--text-dim);
  opacity: .8;
  margin-top: 2px;
}

/* El aviso de lo que NO está contado va arriba y con forma propia: quien lee tiene que
   verlo antes de sacar conclusiones, no en una nota al pie que nadie lee. */
.met-aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn, #d97706) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn, #d97706) 35%, transparent);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
}
.met-aviso .ic {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--warn, #d97706);
}

/* Una tabla ancha scrollea DENTRO de su caja; la página nunca scrollea en horizontal. */

/* La tabla es una TARJETA, no texto suelto sobre el fondo (corrección del 11-08): contorno,
   esquinas redondeadas y superficie propia, como cualquier app moderna. En tema claro,
   además, sin superficie propia no se veía dónde empezaba ni acababa. */
/* LA CAJA Y LA TABLA SON EL COMPONENTE (components/tabla.css). Esta pantalla era el MODELO
   —*"había pedido que las tablas fueran como el de metricas, que es bonito"*—, así que lo que
   había aquí se subió tal cual al componente y aquí no queda nada que repetir.

   Lo que sí es de esta pantalla y se queda: */
/* Los títulos de columna EXPLICAN la métrica (llevan `title`), y el cursor lo anuncia. En
   otra tabla el encabezado no explica nada y el cursor de ayuda sobraría. */
.met-tabla th { cursor: help; }
.met-nota {
  margin-top: 12px;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .met-card { animation: none; }
}