/* Página Seguros: demo "renewal-radar" (radar de renovaciones).
   Solo tokens de site.css. El panel .demo es navy en ambos temas: se usan --panel-*. */

[data-demo="renewal-radar"] :focus-visible{outline-color:var(--panel-accent)}

.rr-panel{display:grid;gap:18px}
.rr-panel .kpi{align-content:start}
.rr-block{display:grid;gap:10px}
.rr-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;font-size:12px;color:var(--panel-ink-2)}
.rr-head b{font-size:13px;font-weight:600;color:var(--panel-ink)}

/* Selector de distribución (ramo / aseguradora) */
.rr-seg{display:inline-flex;gap:2px;padding:3px;border-radius:7px;background:color-mix(in srgb,var(--panel-ink) 6%,transparent)}
.rr-seg button{font:500 12px/1 var(--sans);padding:7px 10px;border:0;border-radius:5px;background:none;color:var(--panel-ink-2);cursor:pointer}
.rr-seg button:hover{color:var(--panel-ink)}
.rr-seg button[aria-pressed="true"]{background:var(--panel-2);color:var(--panel-ink);box-shadow:inset 0 0 0 1px var(--panel-line)}

/* Distribución de la prima */
.rr-bars{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.rr-bars li{display:grid;gap:6px;font-size:13px;min-width:0}
.rr-bar-top{display:flex;justify-content:space-between;gap:8px}
.rr-bar-top span:first-child{color:var(--panel-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr-bar-top span:last-child{color:var(--panel-ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Plan de acción: la IA propone, el equipo aprueba */
.rr-plan li{grid-template-columns:84px minmax(0,1fr) auto;align-items:center}
.rr-plan .tag{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.rr-plan li[data-done="true"] > span:nth-child(2){color:var(--panel-ink-2)}
.rr-approve{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:96px;font:500 12px/1 var(--sans);padding:8px 10px;border-radius:6px;border:1px solid var(--panel-line);background:transparent;color:var(--panel-ink);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.rr-approve:hover{border-color:var(--panel-ink-2)}
.rr-approve svg{display:none}
.rr-approve[aria-pressed="true"]{color:var(--panel-accent);border-color:color-mix(in srgb,var(--panel-accent) 45%,transparent);background:color-mix(in srgb,var(--panel-accent) 14%,transparent)}
.rr-approve[aria-pressed="true"] svg{display:block}

@media (max-width:480px){
  .rr-bars{grid-template-columns:minmax(0,1fr)}
  .rr-plan li{grid-template-columns:auto minmax(0,1fr)}
  .rr-plan .rr-approve{grid-column:2;justify-self:start}
}