/* ====== Saldos bancarios — estilos propios sobre app.css ====== */

.cabecera-saldos {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.cabecera-saldos h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cabecera-saldos .dia-largo { text-transform: capitalize; color: var(--humo); font-size: .95rem; margin-top: 2px; }
.selector-dia { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.selector-dia input[type=date] { width: auto; }

/* ---- filtro de entidades ---- */
.filtro-entidades { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip-filtro {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .88rem; font-weight: 600;
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--linea); background: var(--nieve); color: var(--humo);
  cursor: pointer; transition: background .13s, border-color .13s, color .13s;
}
.chip-filtro:hover { background: var(--linea-suave); color: var(--tinta); }
.chip-filtro.activo { background: var(--tinta); color: var(--nieve); border-color: var(--tinta); }
.chip-filtro .punto { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* ---- sello de banco (monograma con color de marca) ---- */
.sello-banco {
  flex: none; width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; letter-spacing: -.02em;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 43, .06);
}
.cuenta-fila { display: flex; align-items: center; gap: 12px; }

/* ---- tarjetas grandes (consolidado) ---- */
.rejilla-hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; margin-bottom: 14px;
}
.hero-tarjeta {
  background: var(--nieve); border: 1px solid var(--linea); border-radius: var(--r-l);
  padding: 20px 22px; box-shadow: var(--sombra);
}
.hero-tarjeta.destacada {
  background: linear-gradient(135deg, var(--turquesa) 0%, var(--turquesa-hondo) 100%);
  border-color: transparent; color: var(--nieve);
}
.hero-tarjeta .rotulo { font-size: .8rem; font-weight: 600; color: var(--humo); margin-bottom: 8px; }
.hero-tarjeta.destacada .rotulo { color: rgba(255,255,255,.85); }
.hero-tarjeta .cifra-grande {
  font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.hero-tarjeta .pie { font-size: .82rem; margin-top: 8px; color: var(--humo); }
.hero-tarjeta.destacada .pie { color: rgba(255,255,255,.85); }

/* ---- variaciones ---- */
.var { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.var-sube { color: var(--turquesa-hondo); }
.var-baja { color: var(--rojo); }
.var-cero { color: var(--humo-claro); }
.hero-tarjeta.destacada .var-sube,
.hero-tarjeta.destacada .var-baja,
.hero-tarjeta.destacada .var-cero { color: var(--nieve); }
.var .flecha { font-size: .85em; }

/* ---- bloque por entidad ---- */
.entidad-bloque { margin-bottom: 26px; }
.entidad-cab {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.entidad-punto { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.entidad-cab h2 { font-size: 1.15rem; }
.entidad-cab .entidad-total {
  margin-left: auto; text-align: right;
}
.entidad-cab .entidad-total strong {
  display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.entidad-cab .entidad-total span { font-size: .78rem; color: var(--humo); }

.tabla-saldos td.num, .tabla-saldos th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-saldos .saldo-cel { font-weight: 700; font-size: .98rem; }
.tabla-saldos tr.alerta td { background: var(--rojo-tenue); }
.tabla-saldos tr.alerta .saldo-cel { color: var(--rojo); }
.tabla-saldos .banco-chip { font-size: .78rem; color: var(--humo); display: block; }
.tabla-saldos tfoot td {
  font-weight: 700; background: var(--fondo); border-top: 2px solid var(--linea);
}
.sin-dato { color: var(--humo-claro); font-style: italic; }

.chip-alerta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--rojo-tenue); color: var(--rojo); border: 1px solid #fecaca;
}

/* ---- resumen de pólizas (cuadro aparte) ---- */
.resumen-polizas {
  background: var(--nieve); border: 1px solid var(--linea);
  border-left: 4px solid #8b5cf6; border-radius: var(--r-l);
  padding: 18px 22px; margin-bottom: 26px; box-shadow: var(--sombra);
}
.rp-cab { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.rp-cab h3 { font-size: 1.05rem; }
.rp-cab .etiqueta { margin-left: auto; }
.rp-cifras { display: flex; gap: 34px; flex-wrap: wrap; }
.rp-dato strong { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.rp-dato span { font-size: .8rem; color: var(--humo); }

/* ---- bloque de pólizas dentro de una entidad ---- */
.polizas-bloque { margin-top: 14px; }
.polizas-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.polizas-cab h3 { font-size: .98rem; }
.polizas-cab .polizas-tot { margin-left: auto; text-align: right; }
.polizas-cab .polizas-tot strong { display: block; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.polizas-cab .polizas-tot span { font-size: .76rem; color: var(--humo); }
.tabla-polizas thead th { background: #f5f3ff; }
.tabla-polizas tr.poliza-vencida td { background: var(--rojo-tenue); }
.chip-porvencer {
  display: inline-flex; align-items: center;
  font-size: .72rem; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill);
  background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe;
}

/* ---- franja de alertas global ---- */
.franja-alertas {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r-m);
  background: var(--ambar-tenue); border: 1px solid #fde68a; color: #b45309;
  font-size: .9rem; margin-bottom: 22px;
}

/* ---- minigráfica de tendencia ---- */
.spark-tarjeta { padding: 18px 22px; }
.spark-tarjeta h3 { font-size: 1rem; margin-bottom: 4px; }
.spark-wrap { width: 100%; overflow: hidden; }
.spark { width: 100%; height: 150px; display: block; }
.spark-eje { font-size: .68rem; fill: var(--humo-claro); }

/* ---- barras de la semana ---- */
.sem-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 560px) { .sem-grid { grid-template-columns: repeat(2, 1fr); } }
.sem-dia {
  border: 1px solid var(--linea); border-radius: var(--r-m); padding: 12px 14px; background: var(--nieve);
}
.sem-dia.hoy { border-color: var(--turquesa); background: var(--turquesa-tenue); }
.sem-dia.max { box-shadow: inset 0 0 0 2px #a7f3d0; }
.sem-dia.min { box-shadow: inset 0 0 0 2px #fecaca; }
.sem-dia .d { font-size: .78rem; color: var(--humo); text-transform: capitalize; }
.sem-dia .m { font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; }

.leyenda-extremos { display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; margin-top: 12px; }
.leyenda-extremos span { display: inline-flex; align-items: center; gap: 6px; }
.punto-leyenda { width: 10px; height: 10px; border-radius: 2px; }

/* ---- captura (panel) ---- */
.captura-grupo { margin-bottom: 24px; }
.captura-entidad-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.captura-fila-input { width: 150px; text-align: right; }
.captura-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--r-m); margin-top: 8px; font-weight: 700;
}
.barra-guardar {
  position: sticky; bottom: 0; background: var(--nieve); border-top: 1px solid var(--linea);
  padding: 14px 0; margin-top: 10px; display: flex; gap: 12px; align-items: center;
}
.sello-guardado { font-size: .84rem; color: var(--humo); }