/* =====================================================================
   FINTECH CLARO (rediseño 2.0). Fuente de verdad: DESIGN.md en la raíz.
   Inspirado en Mercury y Stripe: lienzo pálido, superficies blancas con filete, tinta marino y un solo
   índigo de acción. Va al final de todas las hojas: redefine los tokens --a-* que usa el resto del código
   y corrige lo que las capas anteriores fijaron a mano (arcoíris, colores por módulo, cifras de color).
   ===================================================================== */
:root{
 --f-primary:#4b5ae6;--f-primary-hover:#3f4bd0;--f-primary-press:#343fb5;--f-tint:#eef0fd;--f-tint-2:#e2e5fc;
 --f-canvas:#f6f8fb;--f-surface:#fff;--f-hairline:#e3e8ee;--f-hairline-2:#cfd8e3;
 --f-ink:#0d253d;--f-ink-2:#425466;--f-muted:#5b6b82;
 --f-ok:#1f7a4d;--f-ok-bg:#e7f5ee;--f-warn:#9a5b00;--f-warn-bg:#fff4e0;--f-bad:#b4232c;--f-bad-bg:#fdecec;
 --f-shadow:0 1px 2px rgba(13,37,61,.05);--f-raised:0 8px 24px rgba(13,37,61,.08);
 --f-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable","Segoe UI","Inter",system-ui,sans-serif;
 /* Tokens del sistema anterior → nuevos valores */
 --a-primary:var(--f-primary);--a-focus:var(--f-primary);--a-on-dark-link:#aab3ff;
 --a-ink:var(--f-ink);--a-ink-80:var(--f-ink-2);--a-muted:var(--f-muted);--a-disabled:#8a97a8;
 --a-canvas:var(--f-surface);--a-parchment:var(--f-canvas);--a-pearl:#f9fafc;
 --a-hairline:var(--f-hairline);--a-divider:var(--f-hairline);--a-chip:#eef1f5;
 --a-r-sm:8px;--a-r-md:10px;--a-r-lg:14px;
 --a-text:var(--f-font);--a-display:var(--f-font);
 --a-rainbow:none;--ok-blue:var(--f-primary)
}

/* ---------- Base ---------- */
html body::before{display:none!important}
html body{font-size:15px!important;line-height:1.5;letter-spacing:0!important;color:var(--f-ink);}
html body,html #app,html .shell,html main,html #content{background:var(--f-canvas)!important}
html b,html strong,html th,html h1,html h2,html h3,html h4{font-weight:600!important}
html .page-top h1,html #content>h1{font-size:32px!important;line-height:1.15!important;letter-spacing:-.02em!important;color:var(--f-ink)!important}
html .page-top p{font-size:15px!important;letter-spacing:0!important;color:var(--f-muted)!important}
html .panel h2,html .card h2,html #content section>h2,html .fund-card h2,html .dialog-head h2,html .empty h2,html .rp-h{font-size:18px!important;line-height:1.3!important;letter-spacing:-.01em!important}
html small,html .hint,html .agent-hint,html #content small,html td small,html label{font-size:13px!important;letter-spacing:0!important}
html label{color:var(--f-ink-2)!important;font-weight:500!important}
html .grad,html .hero h2 .grad,html .login h1 strong,html .login-brand h1 strong,html .welcome .grad,html #content .rp-slide h2 .grad{
 background:none!important;color:var(--f-primary)!important;-webkit-text-fill-color:currentColor!important}
html :focus-visible{outline:2px solid var(--f-primary)!important;outline-offset:2px!important}

/* ---------- Botones: un solo índigo sólido; el resto, tinte ---------- */
html button,html .button,html a.button{
 font:500 14px/1.2 var(--f-font)!important;letter-spacing:0!important;min-height:40px;padding:10px 18px!important;border-radius:9999px!important;
 border:1px solid transparent!important;background:var(--f-tint)!important;color:var(--f-ink)!important;transition:background-color .15s ease,transform .1s ease}
html button:hover:not(:disabled),html .button:hover{background:var(--f-tint-2)!important}
html button:active:not(:disabled){transform:scale(.97)}
html button.primary,html .primary,html a.button.primary{background:var(--f-primary)!important;border-color:var(--f-primary)!important;color:#fff!important}
html button.primary:hover:not(:disabled),html a.button.primary:hover{background:var(--f-primary-hover)!important}
html button.primary:active:not(:disabled){background:var(--f-primary-press)!important}
html button:disabled{background:#f1f3f6!important;color:var(--a-disabled)!important;border-color:transparent!important}
html button.primary:disabled{background:#c6cbf5!important;color:#fff!important}
html button.danger,html td button.danger{background:var(--f-bad-bg)!important;color:var(--f-bad)!important}
html button.mi-armed{background:var(--f-bad)!important;color:#fff!important}
html td button,html td .actions button:not(.primary),html .toolbar button:not(.primary),html .fund-card button:not(.primary),html .chip-btn{
 font:500 13px/1.2 var(--f-font)!important;min-height:32px;padding:6px 14px!important;border-radius:9999px!important;
 background:var(--f-tint)!important;color:var(--f-ink)!important;box-shadow:none!important;border:0!important}
html #dialog-close,html #guide-close,html .close{background:#eef1f5!important;color:var(--f-ink)!important;width:36px!important;height:36px!important;min-height:36px!important}

/* ---------- Campos ---------- */
html input:not([type=checkbox]):not([type=radio]):not([type=file]),html select,html textarea{
 font:400 15px/1.3 var(--f-font)!important;letter-spacing:0!important;min-height:40px;padding:9px 12px!important;
 border:1px solid var(--f-hairline-2)!important;border-radius:10px!important;background:var(--f-surface)!important;color:var(--f-ink)!important}
html input:hover:not(:focus),html select:hover:not(:focus){border-color:#b5c1cf!important}
html input:focus,html select:focus,html textarea:focus{border-color:var(--f-primary)!important;box-shadow:0 0 0 3px rgba(75,90,230,.25)!important}
html input[type=search],html #search{border-radius:9999px!important;padding:9px 16px!important}
html input[type=checkbox],html input[type=radio]{accent-color:var(--f-primary)}

/* ---------- Superficies ---------- */
html .card,html .panel,html .tile,html .fund-card,html .form-more,html .box-flow,html .ai-review,html .agent-plan,html .steps,html .install,html .table-wrap{
 background:var(--f-surface)!important;border:1px solid var(--f-hairline)!important;border-radius:14px!important;box-shadow:var(--f-shadow)!important}
html .empty{background:var(--f-surface)!important;border:1px dashed var(--f-hairline-2)!important;border-radius:14px!important;box-shadow:none!important}
html .cards{background:none!important;border:0!important;box-shadow:none!important;display:grid!important;gap:12px!important}
html .cards .card{border:1px solid var(--f-hairline)!important;border-radius:14px!important;background:var(--f-surface)!important;padding:18px 20px!important}
html .cards .card+.card{border-left:1px solid var(--f-hairline)!important}
/* Cifras: tinta, tabulares. El color solo comunica estado. */
html .cards .card>strong,html .cards .card:nth-child(n)>strong,html .rp-kpis .card>strong{
 font:600 28px/1.1 var(--f-font)!important;letter-spacing:-.02em!important;color:var(--f-ink)!important;font-variant-numeric:tabular-nums}
html .cards .card small:first-child,html .rp-kpis .card small:first-child{font:600 12px/1.2 var(--f-font)!important;letter-spacing:.04em!important;text-transform:uppercase;color:var(--f-muted)!important}
html td,html .money,html .agent-total{font-variant-numeric:tabular-nums}
html .notice{background:var(--f-surface)!important;border:1px solid var(--f-hairline)!important;color:var(--f-ink)!important;border-radius:12px!important}
html .notice.warning{background:var(--f-warn-bg)!important;border-color:#f3dcae!important;color:#6b4100!important}
html .notice.error{background:var(--f-bad-bg)!important;border-color:#f3c7ca!important;color:#8f1a22!important}
html .fund-money,html .panel .notice,html .card .notice{background:var(--f-canvas)!important}

/* ---------- Tablas ---------- */
html .table-wrap{overflow:auto}
html .table-wrap th{font:600 12px/1.2 var(--f-font)!important;letter-spacing:.04em!important;text-transform:uppercase;color:var(--f-muted)!important;background:#fafbfd!important;padding:12px 16px!important;border-bottom:1px solid var(--f-hairline)!important}
html .table-wrap td{font-size:14px!important;padding:12px 16px!important;border-top:1px solid #eef1f5!important;color:var(--f-ink)}
html .table-wrap tbody tr:hover{background:#fafbff!important}

/* ---------- Estados ---------- */
html .pill{font:600 12px/1.3 var(--f-font)!important;letter-spacing:0!important;padding:3px 10px!important;border-radius:9999px!important;background:#eef1f5!important;color:var(--f-ink-2)!important}
html .pill.approved,html .pill.paid,html .pill.closed,html .pill.active{background:var(--f-ok-bg)!important;color:var(--f-ok)!important}
html .pill.submitted,html .pill.requested,html .pill.review{background:var(--f-tint)!important;color:var(--f-primary-press)!important}
html .pill.returned{background:var(--f-warn-bg)!important;color:var(--f-warn)!important}
html .pill.rejected{background:var(--f-bad-bg)!important;color:var(--f-bad)!important}
html .chip{background:var(--f-surface)!important;border:1px solid var(--f-hairline)!important;color:var(--f-ink)!important;font:500 13px/1.3 var(--f-font)!important}

/* ---------- Barra superior ---------- */
html .shell>header{background:rgba(255,255,255,.9)!important;border-bottom:1px solid var(--f-hairline)!important;color:var(--f-ink)!important;height:56px}
html .shell>header #breadcrumbs{color:var(--f-ink)!important;font:600 14px/1.2 var(--f-font)!important}
html .shell>header #user-name{color:var(--f-muted)!important;font:400 13px/1 var(--f-font)!important}
html .profile button,html #install{background:transparent!important;color:var(--f-ink-2)!important;min-height:36px;padding:8px 12px!important;font:500 13px/1 var(--f-font)!important}
html .profile button:hover{background:#eef1f5!important;color:var(--f-ink)!important}

/* ---------- Menú lateral ---------- */
html .sidebar{background:var(--f-surface)!important;border-right:1px solid var(--f-hairline)!important}
html .sidebar .logo{border:0!important;border-radius:10px!important;box-shadow:none!important}
html .sidebar .nav-head{font:600 11px/1 var(--f-font)!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--f-muted)!important}
html .sidebar nav a{font:500 14px/1.2 var(--f-font)!important;color:var(--f-ink-2)!important;border-radius:8px!important;min-height:36px;position:relative}
html .sidebar nav a:hover{background:#f3f5f8!important;color:var(--f-ink)!important}
html .sidebar nav a.active{background:var(--f-tint)!important;color:var(--f-primary-press)!important;font-weight:600!important}
html .sidebar nav a.active::before{content:'';position:absolute;left:-8px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--f-primary)}
/* Íconos del menú: glifo monocromo, sin cuadros de color */
html .sidebar nav a span.nav-chip,html .sidebar nav a span.nav-chip[data-ic]{background:none!important;box-shadow:none!important;color:currentColor!important;width:22px!important;height:22px!important}
html .sidebar nav a span.nav-chip svg,html .sidebar nav a span.nav-chip .ic-fill{width:18px!important;height:18px!important;filter:none!important}
html .sidebar nav a span.nav-chip svg{stroke:currentColor!important}
html .nav-badge{background:var(--f-primary)!important;color:#fff!important}

/* ---------- Íconos 3D de módulo: cuadro neutro ---------- */
html .rp-bubble[data-ic],html .ct-ic[data-ic],html .page-top .pt-ic[data-ic]{
 background:var(--f-surface)!important;box-shadow:inset 0 0 0 1px var(--f-hairline),var(--f-shadow)!important}

/* ---------- Barra inferior del celular ---------- */
@media(max-width:760px){
 html .tabbar{background:rgba(255,255,255,.96)!important;border-top:1px solid var(--f-hairline)!important;box-shadow:none!important}
 html .tabbar .tab{color:var(--f-muted)!important}
 html .tabbar .tab.active,html .tabbar .tab[aria-current]{color:var(--f-primary)!important}
 html .tabbar .tab-cam{background:var(--f-primary)!important;color:#fff!important}
 html button,html .button{min-height:44px}
 html .page-top h1,html #content>h1{font-size:28px!important}
}

/* ---------- Inicio ---------- */
html .rp-greet .rp-hello{font-size:15px!important;color:var(--f-muted)!important}
html .rp-greet h1{font-size:32px!important;letter-spacing:-.02em!important;color:var(--f-ink)!important}
html .rp-search{min-height:44px!important;border:1px solid var(--f-hairline-2)!important;background:var(--f-surface)!important;color:var(--f-muted)!important;font:400 15px/1 var(--f-font)!important;letter-spacing:0!important;box-shadow:var(--f-shadow)!important}
html .rp-search:hover{border-color:#b5c1cf!important;background:var(--f-surface)!important}
html .rp-cat{font:500 13px/1.2 var(--f-font)!important;color:var(--f-ink-2)!important}
html .rp-bubble{border-radius:14px!important}
html .rp-slide{border:1px solid var(--f-hairline)!important;border-radius:16px!important;box-shadow:var(--f-shadow)!important;
 background:radial-gradient(120% 140% at 100% 0%,var(--f-tint) 0%,rgba(238,240,253,0) 55%),var(--f-surface)!important}
html .rp-slide small{color:var(--f-primary-press)!important;font:600 12px/1.2 var(--f-font)!important;letter-spacing:.04em!important;text-transform:uppercase}
html .rp-slide h2{font:600 24px/1.2 var(--f-font)!important;letter-spacing:-.02em!important;color:var(--f-ink)!important}
html .rp-dots i{background:#d4dae3}
html .rp-dots i.on{background:var(--f-primary)}
html .rp-kpis .card{border:1px solid var(--f-hairline)!important;border-radius:14px!important;box-shadow:var(--f-shadow)!important}
html .k-blue,html .k-orange,html .k-purple,html .k-green{--k:var(--f-ink)}
html .rp-kpis .card>strong{color:var(--f-ink)!important}

/* ---------- Cosapín: solo su burbuja cambia de piel ---------- */
html .cosapin-say,html .rp-bubble-say{background:var(--f-surface)!important;border:1px solid var(--f-hairline)!important;box-shadow:var(--f-raised)!important;color:var(--f-ink)!important}

/* ---------- Diálogos ---------- */
html dialog{border:1px solid var(--f-hairline)!important;border-radius:16px!important;box-shadow:0 24px 64px rgba(13,37,61,.18)!important;color:var(--f-ink)}
html dialog::backdrop{background:rgba(13,37,61,.35)!important}
html #toast{background:var(--f-ink)!important;border-radius:10px!important;font-size:14px}

/* ---------- Ajustes tras la primera revisión ---------- */
html:root{background:var(--f-canvas)!important}
html .sidebar nav a.active span.nav-chip[data-ic]{box-shadow:none!important;background:none!important}
/* Barra inferior: sus pestañas no son botones píldora */
html .tabbar .tab,html .tabbar .tab:hover{background:none!important;border:0!important;padding:0!important;min-height:0!important;border-radius:25px!important;font:500 11px/1.1 var(--f-font)!important;color:var(--f-muted)!important;box-shadow:none!important}
html .tabbar .tab.active{background:var(--f-tint)!important;color:var(--f-primary-press)!important;font-weight:600!important}
html .tabbar .tab-cam,html .tabbar .tab-cam span{background:none!important;color:var(--f-primary)!important;font-weight:600!important}
/* Filtros: todos los controles a la misma línea base */
html .toolbar{align-items:end!important}
html .toolbar label{margin:0!important}
html .toolbar>button,html .toolbar>.button{min-height:40px!important;align-self:end}
/* Acción principal del encabezado: mismo tamaño que el resto */
html .page-top .actions>button,html .page-top .actions>.button{font-size:14px!important;padding:10px 20px!important}
/* BUG de producción: en celular .page-top es columna y el flex-basis de 360px de .pt-head se volvía ALTO
   (encabezados de módulo con ~250px de aire). El ancho mínimo solo aplica en fila. */
@media(max-width:760px){html .page-top .pt-head{flex:0 0 auto!important;min-width:0!important}}