/* ================================================================
   Estilos específicos por página
   ================================================================ */

/* ---------- Dashboard ---------- */
.health-ring-wrap{ display:flex; align-items:center; gap:20px; }
.health-ring{ position:relative; width:120px; height:120px; flex-shrink:0; }
.health-ring svg{ transform:rotate(-90deg); }
.health-ring .ring-bg{ fill:none; stroke:var(--surface-2); stroke-width:11; }
.health-ring .ring-val{
  fill:none; stroke:url(#ringGrad); stroke-width:11; stroke-linecap:round;
  transition:stroke-dashoffset 1.1s cubic-bezier(.25,.8,.35,1);
}
.health-ring .ring-label{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.health-ring .ring-label b{ font-size:24px; font-weight:900; }
.health-ring .ring-label span{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.health-meta{ flex:1; }
.health-meta .hm-row{ display:flex; justify-content:space-between; font-size:12.5px; padding:5px 0; }
.health-meta .hm-row b{ font-variant-numeric:tabular-nums; }

.mini-list{ display:flex; flex-direction:column; }
.due-tag{ font-size:10px; font-weight:800; padding:3px 8px; border-radius:6px; white-space:nowrap; }

/* ---------- Alertas de riesgo / sobreendeudamiento ---------- */
.riesgo-card{ border-left:4px solid var(--warn); }
.riesgo-card.alto{ border-left-color:var(--danger); background:linear-gradient(135deg, rgba(201,79,61,.05), transparent 60%); }
.riesgo-item{ display:flex; gap:11px; padding:11px 0; border-bottom:1px solid var(--border); }
.riesgo-item:last-child{ border-bottom:none; }
.riesgo-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:5px; background:var(--warn); }
.riesgo-dot.alto{ background:var(--danger); animation:pulse 1.8s infinite; }
.riesgo-tit{ font-size:13px; font-weight:800; }
.riesgo-txt{ font-size:12.5px; line-height:1.6; color:var(--text-2); margin-top:2px; }
.riesgo-acc{ font-size:12px; font-weight:600; color:var(--kap-gold-deep); margin-top:5px; }
body[data-theme="dark"] .riesgo-acc{ color:var(--kap-gold-light); }

/* ---------- Onboarding / primeros pasos ---------- */
.onboard-step{ cursor:pointer; transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.onboard-step:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--kap-gold); }
.onboard-step.done{ opacity:.72; }
.onboard-num{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:16px;
  background:var(--surface-2); color:var(--text-2); border:2px solid var(--border);
}
.onboard-step.done .onboard-num{ background:var(--grad-gold); color:#fff; border-color:transparent; animation:pop .4s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pop{ 0%{ transform:scale(.4);} 100%{ transform:scale(1);} }

/* ---------- Presupuesto ---------- */
.budget-row{ padding:13px 0; border-bottom:1px solid var(--border); }
.budget-row:last-child{ border-bottom:none; }
.budget-row .br-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; gap:10px; }
.budget-row .br-name{ font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; }
.budget-row .br-nums{ font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums; }

/* ---------- Tarjetas de crédito ---------- */
.ccard{
  border-radius:18px; padding:22px; color:#fff; position:relative; overflow:hidden;
  background:var(--grad-ink); border:1px solid rgba(176,141,51,.35);
  min-height:190px; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:var(--shadow-lift);
  transition:transform var(--t-med), box-shadow var(--t-med);
}
.ccard:hover{ transform:translateY(-5px) rotate(-.5deg); }
.ccard::before{
  content:''; position:absolute; right:-40px; top:-60px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,163,61,.25), transparent 65%);
}
.ccard .cc-bank{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--kap-gold-light); }
.ccard .cc-num{ font-size:17px; letter-spacing:.18em; font-weight:700; margin-top:14px; font-variant-numeric:tabular-nums; }
.ccard .cc-holder{ font-size:11px; color:#B9BEC7; text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }
.ccard .cc-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:10px; margin-top:16px; }
.ccard .cc-labels{ font-size:9.5px; color:#8B919B; text-transform:uppercase; letter-spacing:.1em; }
.ccard .cc-val{ font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.cc-usage{ margin-top:12px; }

/* Semáforo de uso de línea (30% / 40% / 70%) */
.ccard .cc-semaforo{
  margin-top:11px; padding:9px 11px; border-radius:10px;
  background:rgba(255,255,255,.06); border-left:3px solid var(--ok);
  font-size:11px; line-height:1.5; color:#D5D9E0;
}
.ccard .cc-semaforo b{ display:block; font-size:11.5px; margin-bottom:2px; color:#fff; }
.ccard .cc-semaforo.ideal{ border-left-color:#3FB77E; }
.ccard .cc-semaforo.ideal b{ color:#7EE0AE; }
.ccard .cc-semaforo.ok{ border-left-color:#8FB7A2; }
.ccard .cc-semaforo.warn{ border-left-color:#E8A33D; }
.ccard .cc-semaforo.warn b{ color:#F0C070; }
.ccard .cc-semaforo.danger{ border-left-color:#E05A45; background:rgba(224,90,69,.12); }
.ccard .cc-semaforo.danger b{ color:#FF9482; }

.ccard .cc-aviso{
  margin-top:10px; padding-top:9px; border-top:1px solid rgba(255,255,255,.09);
  font-size:10.5px; color:#A7ADB7; line-height:1.5;
}
.ccard .cc-aviso b{ color:var(--kap-gold-light); }
.cc-usage .progress{ background:rgba(255,255,255,.12); border-color:transparent; }

/* ---------- Préstamos ---------- */
.loan-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.loan-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0; }
.loan-meta .lm{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:9px 11px; }
.loan-meta .lm b{ display:block; font-size:13px; font-variant-numeric:tabular-nums; }
.loan-meta .lm span{ font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); }

/* ---------- Metas ---------- */
.goal-card .goal-ico{
  width:46px; height:46px; border-radius:13px; font-size:21px;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-gold); color:#fff; box-shadow:0 4px 12px rgba(176,141,51,.4);
}
.goal-pct{ font-size:26px; font-weight:900; font-variant-numeric:tabular-nums; }

/* ---------- Calendario ---------- */
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
.cal-title{ font-size:17px; font-weight:800; text-transform:capitalize; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-dow{
  text-align:center; font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-3); padding:6px 0;
}
.cal-day{
  min-height:82px; border:1px solid var(--border); border-radius:10px;
  padding:6px; background:var(--surface); cursor:pointer; position:relative;
  transition:border var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  display:flex; flex-direction:column; gap:3px; overflow:hidden;
}
.cal-day:hover{ border-color:var(--kap-gold); transform:translateY(-2px); box-shadow:var(--shadow); }
.cal-day.other{ opacity:.35; }
.cal-day.today{ border:2px solid var(--kap-gold); background:rgba(176,141,51,.06); }
.cal-day .cd-num{ font-size:11.5px; font-weight:800; color:var(--text-2); }
.cal-day.today .cd-num{ color:var(--kap-gold); }
.cal-evt{
  font-size:9.5px; font-weight:700; padding:2px 5px; border-radius:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:rgba(176,141,51,.16); color:var(--kap-gold-deep);
}
body[data-theme="dark"] .cal-evt{ color:var(--kap-gold-light); }
.cal-evt.danger{ background:rgba(201,79,61,.15); color:var(--danger); }
.cal-evt.ok{ background:rgba(46,158,107,.14); color:var(--ok); }
.cal-evt.info{ background:rgba(61,123,201,.14); color:var(--info); }
.cal-more{ font-size:9px; color:var(--text-3); font-weight:700; }
@media (max-width:720px){
  .cal-day{ min-height:58px; padding:4px; }
  .cal-evt{ display:none; }
  .cal-day .cd-dots{ display:flex; gap:2px; flex-wrap:wrap; }
  .cal-day .dot{ width:5px; height:5px; border-radius:50%; background:var(--kap-gold); }
}

/* ---------- Documentos ---------- */
.doc-card{ display:flex; align-items:center; gap:14px; }
.doc-ext{
  width:46px; height:52px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:900; letter-spacing:.04em; color:#fff;
  background:var(--grad-ink); position:relative;
}
.doc-ext.pdf{ background:linear-gradient(135deg,#E06A56,#A93E2F); }
.doc-ext.doc{ background:linear-gradient(135deg,#5B95DD,#2C5FA3); }
.doc-ext.xls{ background:linear-gradient(135deg,#3DBB84,#237A53); }
.doc-ext.img{ background:var(--grad-gold); }
.drop-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px;
  text-align:center; color:var(--text-3); font-size:13px; cursor:pointer;
  transition:all var(--t-fast);
}
.drop-zone:hover, .drop-zone.over{ border-color:var(--kap-gold); background:rgba(176,141,51,.05); color:var(--kap-gold); }

/* ---------- Asistente ---------- */
.chat-box{ display:flex; flex-direction:column; gap:12px; max-height:460px; overflow-y:auto; padding:4px 2px 10px; }
.msg{ max-width:82%; padding:12px 15px; border-radius:15px; font-size:13.5px; line-height:1.55; animation:pageIn .3s both; }
.msg.bot{ background:var(--surface-2); border:1px solid var(--border); border-bottom-left-radius:5px; align-self:flex-start; }
.msg.user{ background:var(--grad-gold); color:#fff; border-bottom-right-radius:5px; align-self:flex-end; }
.msg.bot b{ color:var(--kap-gold-deep); }
body[data-theme="dark"] .msg.bot b{ color:var(--kap-gold-light); }
.msg.bot ul{ margin:6px 0 0 18px; }
.msg.bot li{ margin:3px 0; }

/* ---------- Reportes ---------- */
.report-summary td:first-child{ font-weight:600; }
.rep-total-row td{ font-weight:900; border-top:2px solid var(--kap-gold); font-size:14px; }

/* ---------- Configuración / Perfil ---------- */
.setting-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 0; border-bottom:1px solid var(--border);
}
.setting-row:last-child{ border-bottom:none; }
.setting-row .sr-title{ font-size:13.5px; font-weight:700; }
.setting-row .sr-sub{ font-size:11.5px; color:var(--text-3); margin-top:2px; max-width:420px; }
.switch{ position:relative; width:46px; height:26px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{
  position:absolute; inset:0; border-radius:14px; background:var(--surface-2);
  border:1px solid var(--border); transition:background var(--t-fast); cursor:pointer;
}
.switch .track::after{
  content:''; position:absolute; left:3px; top:2.5px; width:19px; height:19px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); transition:transform var(--t-fast);
}
.switch input:checked + .track{ background:var(--grad-gold); border-color:transparent; }
.switch input:checked + .track::after{ transform:translateX(19px); }

.integration-card{ display:flex; gap:14px; align-items:flex-start; }
.integration-logo{
  width:44px; height:44px; border-radius:12px; flex-shrink:0; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border);
}

/* ================================================================
   Objetivo del cliente — tarjeta del panel, asistente y plan
   ================================================================ */
.objetivo-card{ border-left:4px solid var(--kap-gold); }
.objetivo-card.ok{ border-left-color:var(--ok); }
.objetivo-card.warn{ border-left-color:var(--warn); }
.objetivo-card.danger{ border-left-color:var(--danger); }
.objetivo-card.vacia{
  border-left-color:var(--kap-gold);
  background:linear-gradient(135deg, rgba(176,141,51,.07), transparent 65%);
}
.obj-vacia-body{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.obj-vacia-body .btn{ flex-shrink:0; }

.obj-head{ display:flex; align-items:center; gap:13px; }
.obj-head-ico{
  width:44px; height:44px; border-radius:12px; flex-shrink:0; font-size:21px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border);
}
.obj-head-tit{ font-size:15.5px; font-weight:800; line-height:1.25; }

.obj-cifras{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0 0; }
.obj-cifras .lm{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:9px 11px; }
.obj-cifras .lm b{ display:block; font-size:14px; font-variant-numeric:tabular-nums; }
.obj-cifras .lm span{ font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); }

.obj-resumen{ font-size:12.5px; line-height:1.65; color:var(--text-2); margin-top:13px; }
.obj-resumen b{ color:var(--text); }

/* Asistente: la rejilla de objetivos */
.obj-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px; }
.obj-card{
  display:flex; flex-direction:column; gap:5px; text-align:left; cursor:pointer;
  padding:16px 15px; border-radius:var(--radius-sm); font-family:var(--font);
  background:var(--surface); border:1.5px solid var(--border); color:var(--text);
  transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.obj-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:var(--kap-gold); }
.obj-card.activa{ border-color:var(--kap-gold); background:linear-gradient(135deg, rgba(176,141,51,.10), transparent 70%); }
.obj-card .obj-ico{ font-size:24px; line-height:1; }
.obj-card .obj-tit{ font-size:13.5px; font-weight:800; }
.obj-card .obj-desc{ font-size:11.5px; line-height:1.5; color:var(--text-3); }

/* Plan de ajustes */
.plan-ajuste{
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-2); padding:13px 14px; margin-top:10px;
}
.plan-ajuste .pa-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.plan-ajuste .pa-monto{ font-size:16px; font-weight:900; color:var(--danger); font-variant-numeric:tabular-nums; white-space:nowrap; }
.plan-ajuste .pa-monto span{ display:block; font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); text-align:right; }
.plan-ajuste .pa-detalle{ font-size:12.5px; margin-top:9px; }
.plan-ajuste .pa-motivo{ font-size:12px; color:var(--text-2); margin-top:4px; line-height:1.55; }
.plan-ajuste .pa-consejo{ font-size:12px; color:var(--kap-gold-deep); margin-top:6px; line-height:1.55; }
body[data-theme="dark"] .plan-ajuste .pa-consejo{ color:var(--kap-gold-light); }

.plan-otras{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.plan-otras .po-item{
  border:1px solid var(--border); border-left:3px solid var(--kap-gold);
  border-radius:var(--radius-sm); background:var(--surface-2); padding:12px 14px;
}
.plan-otras .po-item b{ display:block; font-size:13px; margin-bottom:4px; }
.plan-otras .po-item span{ font-size:12.5px; line-height:1.6; color:var(--text-2); }

@media (max-width:720px){
  .obj-cifras{ grid-template-columns:repeat(2,1fr); }
  .obj-vacia-body{ flex-direction:column; align-items:stretch; text-align:center; }
  .obj-grid{ grid-template-columns:1fr; }
}

/* ================================================================
   Historial crediticio (MiSentinel / SBS)
   ================================================================ */
.cred-guia .cg-txt{ font-size:12.5px; line-height:1.65; color:var(--text-2); margin-bottom:12px; }
.cred-guia .cg-pasos{ margin:0 0 14px 18px; padding:0; font-size:12.5px; line-height:1.75; color:var(--text); }
.cred-guia .cg-pasos li{ margin:4px 0; }
.cred-guia .btn{ text-decoration:none; display:inline-flex; align-items:center; }

.cred-calif{
  border:1px solid var(--border); border-left:3px solid var(--warn);
  border-radius:var(--radius-sm); background:var(--surface-2); padding:13px 14px;
}
.cred-calif.ok{ border-left-color:var(--ok); }
.cred-calif.warn{ border-left-color:var(--warn); }
.cred-calif.danger{ border-left-color:var(--danger); }
.cred-calif b{ display:block; font-size:13.5px; margin-bottom:5px; }
.cred-calif span{ font-size:12.5px; line-height:1.6; color:var(--text-2); }

.cred-cruce{ display:flex; flex-direction:column; }
.cred-cruce .cc-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--border); font-size:12.5px; color:var(--text-2);
}
.cred-cruce .cc-row:last-child{ border-bottom:none; }
.cred-cruce .cc-row b{ font-size:13.5px; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cred-cruce .cc-row.destacada{ background:var(--surface-2); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:8px; }
.cred-cruce .cc-row.destacada b{ font-size:15px; }

/* ================================================================
   Mis meses — comparación mes contra mes
   ================================================================ */
.mes-bloque{ margin-bottom:14px; }
.mes-bloque:last-child{ margin-bottom:0; }
.mes-bloque-tit{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; margin-bottom:6px; }
.mes-bloque-tit.subio{ color:var(--danger); }
.mes-bloque-tit.bajo{ color:var(--ok); }

.mes-comp{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--border);
}
.mes-comp:last-child{ border-bottom:none; }
.mes-comp .mc-cat{ min-width:0; }
.mes-comp .mc-cifras{ text-align:right; white-space:nowrap; }
.mes-comp .mc-cifras b{ display:block; font-size:13.5px; font-variant-numeric:tabular-nums; }
.mes-comp .mc-cifras span{ font-size:10.5px; color:var(--text-3); font-variant-numeric:tabular-nums; }

@media (max-width:560px){
  .mes-comp{ flex-direction:column; align-items:flex-start; gap:4px; }
  .mes-comp .mc-cifras{ text-align:left; }
}

/* Sello de valores vigentes al pie de cada calculadora */
.vigente-sello{
  margin-top:12px; padding:9px 12px; border-radius:9px;
  background:rgba(46,158,107,.08); border:1px solid rgba(46,158,107,.28);
  font-size:11.5px; line-height:1.55; color:var(--text-2);
}
.vigente-sello b{ color:var(--ok); }

/* Las tablas-resumen de dos columnas (concepto → monto) no necesitan el
   ancho mínimo de 560px de las tablas de datos: con él, en una tarjeta
   angosta los montos quedaban fuera de la vista y había que hacer
   scroll horizontal para descubrirlos. */
table.tbl.report-summary{ min-width:0; }

/* ================================================================
   Reporte en PDF con la marca — se imprime SOLO #printReporte
   ================================================================ */
#printReporte{ display:none; }
@media print{
  body > :not(#printReporte){ display:none !important; }
  #printReporte{ display:block !important; font-family:'Inter',-apple-system,sans-serif; color:#1B1E23; }
  @page{ margin:14mm 12mm; }

  #printReporte .pr-head{
    display:flex; align-items:center; gap:12px; padding-bottom:12px;
    border-bottom:3px solid #B08D33; margin-bottom:14px;
  }
  #printReporte .pr-head img{ width:44px; height:44px; }
  #printReporte .pr-marca b{ font-size:17px; letter-spacing:.02em; display:block; }
  #printReporte .pr-marca span{ font-size:10px; letter-spacing:.14em; color:#B08D33; font-weight:800; }
  #printReporte .pr-meta{ margin-left:auto; text-align:right; font-size:10.5px; color:#565C66; line-height:1.6; }

  #printReporte h3{
    font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color:#8A6B22; margin:16px 0 6px; border-bottom:1px solid #E4E6EA; padding-bottom:4px;
  }
  #printReporte table{ width:100%; border-collapse:collapse; font-size:11.5px; }
  #printReporte td, #printReporte th{ padding:5px 8px; border-bottom:1px solid #EDEFF2; }
  #printReporte td.num{ text-align:right; font-variant-numeric:tabular-nums; font-weight:700; }
  #printReporte tr.total td{ border-top:2px solid #B08D33; font-weight:900; font-size:12.5px; }
  #printReporte .pr-kpis{ display:flex; gap:10px; margin:8px 0 4px; }
  #printReporte .pr-kpi{
    flex:1; border:1px solid #E4E6EA; border-radius:8px; padding:8px 10px;
  }
  #printReporte .pr-kpi b{ display:block; font-size:15px; }
  #printReporte .pr-kpi span{ font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#565C66; }

  #printReporte .pr-foot{
    margin-top:18px; padding-top:10px; border-top:1px solid #E4E6EA;
    font-size:9.5px; color:#565C66; line-height:1.65;
  }
  #printReporte .pr-foot b{ color:#8A6B22; }
}

/* ================================================================
   ¿CALIFICO? — veredicto por producto bancario
   ----------------------------------------------------------------
   El color manda el mensaje antes de leer: verde calificas, ámbar te
   falta poco, rojo todavía no. La franja de la izquierda es lo que se
   ve de un vistazo al hacer scroll.
   ================================================================ */
.cf-explica{
  display:flex; gap:12px; align-items:flex-start;
  font-size:12.5px; color:var(--text-2); line-height:1.7;
}
.cf-explica-ico{ font-size:20px; line-height:1; flex:0 0 auto; }
.cf-explica b{ color:var(--text); }

.cf-productos{ display:grid; gap:16px; }

.cf-prod{ position:relative; overflow:hidden; padding-left:22px; }
.cf-prod::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:var(--text-3);
}
.cf-prod.si::before  { background:var(--ok); }
.cf-prod.casi::before{ background:var(--warn); }
.cf-prod.no::before  { background:var(--danger); }

.cf-prod-head{ display:flex; gap:14px; align-items:flex-start; }
.cf-prod-ico{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:21px;
}
.cf-prod-tit{ flex:1 1 auto; min-width:0; }
.cf-prod-tit h3{ font-size:16px; margin:0 0 3px; letter-spacing:-.01em; }
.cf-prod-tit p{ font-size:12.5px; color:var(--text-2); line-height:1.6; margin:0; }
.cf-prod-veredicto{ flex:0 0 auto; text-align:right; }
.cf-prod-reqs{ display:block; font-size:11px; color:var(--text-3); margin-top:5px; }

/* --- La cifra. Es lo que el cliente va a recordar, así que va con su
       advertencia pegada y no en un pie de página lejano. --- */
.cf-prod-monto{
  display:flex; flex-wrap:wrap; gap:22px; align-items:flex-end;
  margin:16px 0 4px; padding:14px 16px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.cf-monto-lbl{
  display:block; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-3); font-weight:800; margin-bottom:3px;
}
.cf-monto-val{ display:block; font-size:24px; font-weight:900; letter-spacing:-.02em; color:var(--kap-gold-deep); font-variant-numeric:tabular-nums; }
.cf-monto-val.chico{ font-size:17px; color:var(--text); }
.cf-monto-ref{ margin-left:auto; font-size:10.5px; color:var(--text-3); font-style:italic; }
.cf-prod-monto.vacio{
  display:block; font-size:12.5px; color:var(--text-2); line-height:1.65; font-style:normal;
}

/* --- Requisitos --- */
.cf-reqs{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px; }
.cf-reqs li{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; line-height:1.55; }
.cf-req-ico{
  flex:0 0 auto; width:19px; height:19px; border-radius:50%; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:900; color:#fff;
}
.cf-reqs li.ok   .cf-req-ico{ background:var(--ok); }
.cf-reqs li.casi .cf-req-ico{ background:var(--warn); }
.cf-reqs li.no   .cf-req-ico{ background:var(--danger); }
.cf-reqs li b{ display:block; font-weight:700; }
.cf-req-det{ display:block; font-size:11.5px; color:var(--text-3); }
.cf-req-fix{ display:block; font-size:12px; color:var(--text-2); margin-top:4px; line-height:1.6; }

.cf-prod-tip{ margin-top:16px; }

/* --- El plan --- */
.cf-plan{ list-style:none; margin:0; padding:0; display:grid; gap:13px; counter-reset:paso; }
.cf-plan li{ display:flex; gap:13px; align-items:flex-start; }
.cf-plan-n{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--grad-gold); color:#fff; font-weight:900; font-size:12.5px;
  display:flex; align-items:center; justify-content:center;
}
.cf-plan-cuerpo{ flex:1 1 auto; min-width:0; }
.cf-plan-cuerpo b{ display:block; font-size:13px; margin-bottom:2px; }
.cf-plan-cuerpo > span{ display:block; font-size:12.5px; color:var(--text-2); line-height:1.65; }
.cf-plan-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:7px; }
.cf-plan-desb{ font-size:11px; color:var(--text-3); }

/* --- El puente. Solo aparece cuando el banco cerró todas las puertas. --- */
.cf-puente{ border-color:var(--kap-gold); }
.cf-puente p{ font-size:13px; color:var(--text-2); line-height:1.75; margin:0 0 10px; }
.cf-puente-nota{ font-size:11.5px !important; color:var(--text-3) !important; }

@media (max-width: 720px){
  .cf-prod-head{ flex-wrap:wrap; }
  .cf-prod-veredicto{ text-align:left; width:100%; }
  .cf-prod-monto{ gap:16px; }
  .cf-monto-ref{ margin-left:0; width:100%; }
}

/* ================================================================
   LA SEÑAL TRIBUTARIA DE KAPITO — arriba de Contabilidad
   ----------------------------------------------------------------
   La franja de color es el mensaje: se lee antes que cualquier
   palabra. Kapito cambia de pose según cómo va el negocio.
   ================================================================ */
.cb-senal{ position:relative; overflow:hidden; padding-left:22px; }
.cb-senal::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:6px;
}
.cb-senal.bien::before    { background:var(--ok); }
.cb-senal.atencion::before{ background:var(--warn); }
.cb-senal.riesgo::before  { background:var(--danger); }

.cb-senal-cab{ display:flex; gap:14px; align-items:center; }
.cb-senal-kapito{ width:56px; height:auto; flex:0 0 auto; }
.cb-senal-sub{ font-size:11.5px; color:var(--text-3); margin:0; }

.cb-senal-lista{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; }
.cb-senal-lista li{
  font-size:13px; color:var(--text-2); line-height:1.7;
  padding-left:16px; position:relative;
}
.cb-senal-lista li::before{
  content:'·'; position:absolute; left:4px; top:-2px;
  font-size:19px; font-weight:900; color:var(--text-3);
}
.cb-senal-lista b{ color:var(--text); }

@media (max-width: 720px){
  .cb-senal-kapito{ width:44px; }
}

/* Marcas de los cambios del mes en el historial crediticio.
   Reutiliza la tarjeta .cb-senal, que ya trae la franja de color. */
.cb-senal-lista li .cm-ico{
  position:absolute; left:0; top:2px;
  width:16px; height:16px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:900; color:#fff; background:var(--text-3);
}
.cb-senal-lista li .cm-ico.bueno{ background:var(--ok); }
.cb-senal-lista li .cm-ico.malo { background:var(--danger); }
.cb-senal-lista li .cm-ico.ojo  { background:var(--warn); }
/* Cuando hay marca, el punto genérico sobra */
.cb-senal-lista li:has(.cm-ico)::before{ content:none; }
.cb-senal-lista li:has(.cm-ico){ padding-left:24px; }