/*
 * css/views/cost.css — Sección Cost Balance.
 *
 * 12-oct, fase 3 del kit de estilo: extraído del <style> de index.html (mismas reglas). El orden
 * de carga (index.html) es base -> components -> views; la verificación comparó los estilos
 * calculados de toda la página antes y después.
 */

.cost-total {
  font-family: var(--font-mono); font-size: 2rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cost-total .unit { font-size: 1rem; font-weight: 500; color: var(--text-dim); }
.cost-note { font-size: 0.82rem; color: var(--text-dim); margin-top: 10px; line-height: 1.5; }

/* 26-oct, pedido del usuario (estándar de Costos v1.1, §9): avisos del total, período, encabezado de
   las tablas, confianza debajo del importe, escenarios con su diferencia y grilla de teléfono. */
.cost-updated { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; }
.cost-warns { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.cost-warn { font-size: 0.82rem; font-weight: 600; color: var(--gold-text); background: var(--gold-bg);
  border-radius: 6px; padding: 2px 8px; }
.cost-meta { font-size: 0.8rem; color: var(--text-dim); margin-top: 8px; }
.cost-table th { text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .03em; padding: 6px 10px; background: var(--surface-2); }
.cost-table td.rstate { font-variant-numeric: tabular-nums; }
.cost-conf { font-size: .75rem; color: var(--text-dim); font-weight: 400; }
.cost-delta { font-size: .8rem; color: var(--text-dim); }
.cost-table tr.cost-err td.rstate b { color: var(--err); }
@media (max-width: 600px) {
  .cost-table th { display: none; }
  .cost-table tr { display: grid; grid-template-columns: 1fr auto; }
  .cost-table td.rname { white-space: normal; }
  .cost-table td.rdetail { grid-column: 1 / -1; grid-row: 2; }
}