/* Chip de cuota del plan en el encabezado (js/componentes/cuota.js): dos valores chicos, 5 h y
   semanal, cada uno con el color de su severidad. */
.cuota {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

.cuota[hidden] { display: none; }

/* Último dato bueno mientras el refresco falla: se ve, pero apagado. */
.cuota.viejo { opacity: 0.55; }

.cuota-val { display: inline-flex; gap: 3px; font-weight: 600; }
.cuota-et { color: var(--muted); font-weight: 400; }
.cuota-val.tono-ok { color: var(--ok); }
.cuota-val.tono-wait { color: var(--wait); }
.cuota-val.tono-conflict { color: var(--conflict); }
.cuota-val.tono-nada { color: var(--muted); }

/* El detalle es una hoja (cuotaHoja.js) con los medidores de host.css; acá, la tarjeta de
   cada cuenta alternativa. */
.cuota-alt {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--fill);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.cuota-alt-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); }
.cuota-alt-cab b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuota-alt .host-medidor { background: var(--panel, transparent); }

/* Toasts de varias líneas (los avisos con \n). */
.toast { white-space: pre-line; }