/* =====================================================================
   RotulaPro · capa de experiencia (se carga después de app.css)
   Identidad: taller de rotulación — tinta navy + los colores de imprenta (cian, magenta, amarillo).
   Movimiento con sentido (entradas, relieve, números que cuentan) y siempre respetando «reducir movimiento».
   ===================================================================== */

/* ---------- 1 · Tokens ---------- */
:root{
  --r:8px; --r-sm:5px; --r-lg:14px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(15,39,64,.06),0 1px 1px rgba(15,39,64,.04);
  --sh-2:0 6px 18px -4px rgba(15,39,64,.14),0 2px 4px rgba(15,39,64,.05);
  --sh-3:0 18px 40px -10px rgba(15,39,64,.28);
  --ease:cubic-bezier(.22,.8,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --cmyk:linear-gradient(90deg,var(--cyan) 0 25%,var(--magenta) 25% 50%,var(--yellow) 50% 75%,var(--ink) 75% 100%);
  --tabbar-h:0px; --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}
::selection{background:var(--yellow);color:var(--ink)}
html{scrollbar-gutter:stable}
*{scrollbar-width:thin;scrollbar-color:var(--ink-4) transparent}

/* ---------- 2 · Fondo y barra CMYK ---------- */
body.app{
  background:
    radial-gradient(900px 480px at 105% -8%,rgba(0,119,200,.09),transparent 62%),
    radial-gradient(760px 420px at -10% 108%,rgba(214,0,111,.055),transparent 58%),
    radial-gradient(rgba(22,50,79,.075) 1px,transparent 1.2px) 0 0/22px 22px,
    var(--bg);
  background-attachment:fixed;
}
body::before{content:"";position:fixed;inset:0 0 auto 0;height:3px;background:var(--cmyk);z-index:120;pointer-events:none}

/* ---------- 3 · Entradas (solo al cargar la página) ---------- */
@keyframes rp-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rp-in{from{opacity:0}to{opacity:1}}
@keyframes rp-pop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes rp-slide{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes rp-row{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes rp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes rp-pulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes rp-sheen{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(260%) skewX(-18deg)}}
@keyframes rp-spin{to{transform:rotate(360deg)}}
@keyframes rp-bar{0%{width:0}60%{width:78%}100%{width:92%}}
.content>*{animation:rp-up .5s var(--ease) both}
.content>*:nth-child(2){animation-delay:.05s}.content>*:nth-child(3){animation-delay:.1s}.content>*:nth-child(4){animation-delay:.15s}
.content>*:nth-child(5){animation-delay:.2s}.content>*:nth-child(n+6){animation-delay:.25s}
.kpis>*,.stats>*,.tiles>*,.cards3>*,.cards2>*,.origen-cards>*,.pasos-sig>*,.setup>*,.plans>*,.bank-grid>*{animation:rp-up .5s var(--ease) both}
.kpis>*:nth-child(2),.stats>*:nth-child(2),.tiles>*:nth-child(2),.cards3>*:nth-child(2),.origen-cards>*:nth-child(2),.plans>*:nth-child(2),.bank-grid>*:nth-child(2){animation-delay:.07s}
.kpis>*:nth-child(3),.stats>*:nth-child(3),.tiles>*:nth-child(3),.cards3>*:nth-child(3),.origen-cards>*:nth-child(3),.plans>*:nth-child(3),.bank-grid>*:nth-child(3){animation-delay:.14s}
.kpis>*:nth-child(n+4),.stats>*:nth-child(n+4),.tiles>*:nth-child(n+4),.cards3>*:nth-child(n+4),.bank-grid>*:nth-child(n+4){animation-delay:.21s}
.tbl tbody tr{animation:rp-row .4s var(--ease) both}
.tbl tbody tr:nth-child(2){animation-delay:.03s}.tbl tbody tr:nth-child(3){animation-delay:.06s}.tbl tbody tr:nth-child(4){animation-delay:.09s}.tbl tbody tr:nth-child(5){animation-delay:.12s}
.tbl tbody tr:nth-child(6){animation-delay:.15s}.tbl tbody tr:nth-child(7){animation-delay:.18s}.tbl tbody tr:nth-child(8){animation-delay:.21s}.tbl tbody tr:nth-child(n+9){animation-delay:.24s}
.tbl tbody tr.row-new{animation:rp-up .45s var(--ease) both;animation-delay:calc(var(--i,0)*28ms)}
.lin{animation:rp-up .35s var(--ease) both}

/* Transición suave entre páginas (navegadores compatibles) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.16s ease both rp-fade-out}
::view-transition-new(root){animation:.26s ease both rp-in}
@keyframes rp-fade-out{to{opacity:0}}

/* Barra de progreso al navegar */
.nprogress{position:fixed;left:0;top:3px;height:3px;width:0;background:linear-gradient(90deg,var(--cyan),var(--magenta));z-index:121;border-radius:0 3px 3px 0;box-shadow:0 0 10px rgba(0,119,200,.6);pointer-events:none;opacity:0}
.nprogress.on{opacity:1;animation:rp-bar 7s cubic-bezier(.1,.6,.2,1) forwards}

/* ---------- 4 · Tipografía ---------- */
h1{position:relative}
.page-head h1::after{content:"";display:block;width:46px;height:4px;margin-top:.45rem;border-radius:4px;background:var(--cmyk);transform-origin:left;animation:rp-bar-in .7s var(--ease) .15s both}
@keyframes rp-bar-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.page-head p{max-width:62ch}

/* ---------- 5 · Botones con tacto ---------- */
.btn{border-radius:var(--r);position:relative;overflow:hidden;isolation:isolate;transition:transform .16s var(--ease),box-shadow .2s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(1px) scale(.985);box-shadow:none}
.btn-primary{background:linear-gradient(180deg,#0b87db 0%,var(--cyan) 100%);box-shadow:3px 3px 0 var(--ink);border-color:var(--cyan)}
.btn-primary:hover{background:linear-gradient(180deg,#0a7ec9 0%,var(--cyan-d) 100%);box-shadow:5px 5px 0 var(--ink);transform:translate(-1px,-1px)}
.btn-primary:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%) skewX(-18deg)}
.btn-primary:hover::after{animation:rp-sheen .75s var(--ease)}
.btn-ghost:hover{background:var(--cyan-l);border-color:var(--cyan);color:var(--cyan-d)}
.btn-danger:hover{box-shadow:var(--sh-2)}
.btn svg{flex:none;transition:transform .2s var(--spring)} .btn:hover svg{transform:scale(1.12)}
.btn.is-loading{pointer-events:none;color:transparent!important}
.btn.is-loading::before{content:"";position:absolute;left:50%;top:50%;width:1.1em;height:1.1em;margin:-.55em 0 0 -.55em;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:rp-spin .7s linear infinite}
.btn-ghost.is-loading::before{border-color:var(--line);border-top-color:var(--cyan)}

/* ---------- 6 · Tarjetas y paneles ---------- */
.panel,.kpi,.stat,.tile,.mini-card,.paso-sig,.plan,.bank-card,.origen-card,.scan-list li{border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.panel{border-width:1px}
.panel.table-panel{overflow:hidden}
.report-card:hover,.origen-card:hover,.card-link:hover,.plan:hover,.paso-sig:hover,.mini-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--cyan)}
.plan-hl{box-shadow:6px 6px 0 var(--yellow)} .plan-hl:hover{box-shadow:9px 9px 0 var(--yellow);transform:translate(-2px,-2px)}
.kpi{--k:var(--cyan);border-left:0;position:relative;overflow:hidden;padding-left:1.15rem}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--k);transition:width .25s var(--ease)}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,var(--k) 0%,transparent 70%);opacity:.12;transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} .kpi:hover::before{width:8px} .kpi:hover::after{opacity:.22;transform:scale(1.25)}
.kpis>.kpi:nth-child(4n+2),.grid-4>.kpi:nth-child(4n+2){--k:var(--magenta)} .kpis>.kpi:nth-child(4n+3),.grid-4>.kpi:nth-child(4n+3){--k:var(--yellow)} .kpis>.kpi:nth-child(4n),.grid-4>.kpi:nth-child(4n){--k:var(--ink)}
.kpi-alert{--k:var(--err)!important}
.kpi-val,.stat-v{transition:color .3s} .kpi-val{font-weight:800}
.stat{border-top:3px solid var(--cyan)} .stats>.stat:nth-child(4n+2){border-top-color:var(--magenta)} .stats>.stat:nth-child(4n+3){border-top-color:var(--yellow)} .stats>.stat:nth-child(4n){border-top-color:var(--ink)}
.stat:hover,.tile:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}

/* ---------- 7 · Etiquetas, chips y avisos ---------- */
.badge{border-radius:var(--r-pill);padding:.14rem .6rem .14rem .5rem;display:inline-flex;align-items:center;gap:.35rem;line-height:1.3}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;opacity:.85}
.badge-azul::before{background:var(--yellow);opacity:1}
.badge-rojo::before,.badge-ambar::before{animation:rp-pulse 2s ease-out infinite}
.tag{border-radius:var(--r-pill);padding:.08rem .55rem}
.chip{transition:transform .18s var(--ease),background-color .2s,border-color .2s,color .2s,box-shadow .2s;cursor:pointer}
.chip:hover{transform:translateY(-1px);border-color:var(--cyan);color:var(--cyan-d);box-shadow:var(--sh-1)}
.chip.on{box-shadow:0 4px 10px -3px rgba(22,50,79,.5);animation:rp-pop .35s var(--spring)}
.chip.on:hover{color:#fff}
.chips{row-gap:.5rem}
.flash{position:relative;display:flex;align-items:flex-start;gap:.7rem;padding:.8rem 2.6rem .8rem .9rem;border-radius:var(--r);box-shadow:var(--sh-2);animation:rp-slide .45s var(--spring) both;transition:opacity .6s,transform .6s}
.flash::before{content:"i";flex:none;width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center;font:700 .8rem/1 var(--font);color:#fff;background:var(--cyan);margin-top:.05rem}
.flash-ok::before{content:"✓";background:var(--ok)} .flash-error::before{content:"!";background:var(--err)}
.flash-out{transform:translateY(-8px)}
.flash .flash-x{position:absolute;right:.5rem;top:.5rem;width:1.7rem;height:1.7rem;border:0;border-radius:50%;background:transparent;color:inherit;font-size:1.2rem;line-height:1;cursor:pointer;opacity:.55;transition:opacity .2s,background .2s}
.flash .flash-x:hover{opacity:1;background:rgba(22,50,79,.08)}
.callout{border-radius:var(--r);box-shadow:var(--sh-1)}

/* ---------- 8 · Formularios ---------- */
input,select,textarea{border-radius:var(--r);transition:border-color .2s,box-shadow .2s,background-color .2s}
input:focus,select:focus,textarea:focus{background:#fff}
.field label,.field .label{transition:color .2s} .field:focus-within>label,.field:focus-within>.label{color:var(--cyan-d)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B8199' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;background-size:1.1rem;padding-right:2rem}
select[multiple]{background-image:none;padding-right:.7rem}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--err);background:var(--err-l)}
input[type=checkbox],input[type=radio]{transition:transform .15s var(--spring)} input[type=checkbox]:active,input[type=radio]:active{transform:scale(.88)}
.check,.radio{transition:color .2s} 
input[type=date]{min-height:42px}
.seg-opt>span{transition:border-color .2s,box-shadow .2s,background-color .2s,transform .2s var(--ease)} .seg-opt:hover>span{transform:translateY(-1px);border-color:var(--ink-4)}
.picker-list{border-radius:var(--r);animation:rp-slide .2s var(--ease) both}
.lin{border-radius:var(--r-lg);transition:border-color .2s,box-shadow .25s}
.lin:focus-within{box-shadow:var(--sh-2),var(--focus)}

/* ---------- 9 · Tablas ---------- */
.tbl th{position:sticky;top:0;z-index:1;background:#fff;letter-spacing:.02em;text-transform:none}
.tbl tbody tr{transition:background-color .2s,box-shadow .2s}
.tbl tbody tr:hover{background:linear-gradient(90deg,rgba(0,119,200,.07),rgba(0,119,200,.02) 60%);box-shadow:inset 3px 0 0 var(--cyan)}
.tbl td{transition:color .2s} .row-link{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .25s var(--ease),color .2s;padding-bottom:1px}
.row-link:hover{background-size:100% 2px}
.table-wrap{border-radius:inherit;background:
  linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) 0 0/36px 100% no-repeat local,
  linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) 100% 0/36px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(15,39,64,.2),transparent) 0 0/10px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(15,39,64,.2),transparent) 100% 0/10px 100% no-repeat scroll}
.table-wrap .tbl th{background:transparent}
.tbl tr.sel-on{box-shadow:inset 3px 0 0 var(--magenta)}

/* ---------- 10 · Estados vacíos ---------- */
.empty{position:relative;padding:3rem 1.25rem;border-style:dashed;border-width:1.5px;background:linear-gradient(180deg,#fff,#F9FBFD)}
.empty::before{content:"";display:block;width:84px;height:84px;margin:0 auto 1rem;border-radius:50%;background:var(--cyan-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%230077C8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 6h14l8 8v26H14z'/%3E%3Cpath d='M28 6v8h8M19 24h12M19 30h12M19 36h7'/%3E%3C/svg%3E") center/46px no-repeat;box-shadow:0 0 0 10px rgba(0,119,200,.07);animation:rp-float 4s ease-in-out infinite}
.empty .btn{margin-top:.6rem}

/* ---------- 11 · Barra lateral ---------- */
.side{background:linear-gradient(180deg,#112B47 0%,#0C2036 100%);box-shadow:4px 0 24px -8px rgba(8,22,38,.45)}
.brand img{transition:transform .5s var(--spring)} .brand:hover img{transform:rotate(-8deg) scale(1.08)}
.nav a{position:relative;border-left-width:0;padding-left:.8rem;transition:background-color .2s,color .2s,transform .2s var(--ease),padding .2s var(--ease)}
.nav a::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:0 3px 3px 0;background:var(--yellow);transform:scaleY(0);transition:transform .25s var(--spring)}
.nav a svg{transition:transform .25s var(--spring),color .2s}
.nav a:hover{transform:translateX(3px)} .nav a:hover svg{transform:scale(1.15) rotate(-4deg)}
.nav a.active{background:linear-gradient(90deg,rgba(255,255,255,.13),rgba(255,255,255,.03))}
.nav a.active::before{transform:scaleY(1)} .nav a.active svg{color:var(--yellow)}
.nav a{animation:rp-in .5s var(--ease) both}
.nav a:nth-child(2){animation-delay:.03s}.nav a:nth-child(3){animation-delay:.06s}.nav a:nth-child(4){animation-delay:.09s}.nav a:nth-child(5){animation-delay:.12s}.nav a:nth-child(6){animation-delay:.15s}.nav a:nth-child(n+7){animation-delay:.18s}
.who{display:flex;align-items:center;gap:.7rem}
.avatar{flex:none;width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--ink);background:conic-gradient(from 210deg,var(--yellow),#ffe28a,var(--yellow));box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.who>div{min-width:0} .who strong,.who small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 12 · Barra superior ---------- */
.topbar{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(170%) blur(12px);backdrop-filter:saturate(170%) blur(12px);transition:box-shadow .25s,border-color .25s;top:3px}
.topbar.is-scrolled{box-shadow:0 8px 24px -12px rgba(15,39,64,.3);border-bottom-color:transparent}
.top-title{display:flex;align-items:center;gap:.55rem}
.burger{border-radius:var(--r);transition:background-color .2s,transform .15s} .burger:hover{background:var(--cyan-l)} .burger:active{transform:scale(.94)}
.burger span{transition:transform .25s var(--ease),opacity .2s;transform-origin:center}
.scrim{animation:rp-in .25s ease both;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.content{margin-inline:auto}

/* ---------- 13 · Búsqueda y filtros de documentos ---------- */
.lf{margin:0 0 1rem;display:grid;gap:.75rem}
.lf-main{display:flex;gap:.6rem;align-items:stretch;flex-wrap:wrap}
.lf-search{position:relative;flex:1 1 280px;max-width:520px;min-width:0}
.lf-search svg{position:absolute;left:.85rem;top:50%;translate:0 -50%;color:var(--ink-3);pointer-events:none;transition:color .2s}
.lf-search:focus-within svg{color:var(--cyan)}
.lf-search input{padding-left:2.5rem;height:100%;border-radius:var(--r-pill);min-height:44px}
.lf-main .btn{border-radius:var(--r-pill)}
.lf-toggle{gap:.5rem}
.lf-n{display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;padding:0 .35rem;border-radius:var(--r-pill);background:var(--magenta);color:#fff;font-size:.74rem;font-weight:800;animation:rp-pop .35s var(--spring)}
.lf-adv{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem;display:grid;gap:.9rem;box-shadow:var(--sh-1)}
.lf-adv.lf-in,.lf-adv:not([hidden]){animation:rp-slide .3s var(--ease) both}
.lf-presets{display:flex;flex-wrap:wrap;gap:.4rem}
.lf-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.lf-active{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:-.25rem 0 1rem}
.lf-x{display:inline-flex;align-items:center;gap:.35rem} .lf-x span[aria-hidden]{font-size:1.1rem;line-height:1;opacity:.7}
.lf-x:hover{border-color:var(--err);background:var(--err-l);color:var(--err)}
.pager{align-items:center;gap:.8rem 1.2rem;background:linear-gradient(180deg,#fff,#FAFCFE)}
.pager-info{margin:0;font-size:.88rem;color:var(--ink-3);flex:1 1 auto}
.pager-info strong{color:var(--ink);font-variant-numeric:tabular-nums}
.pager-nav{display:flex;gap:.25rem;list-style:none;margin:0;padding:0;align-items:center}
.pager-nav .pg{display:inline-grid;place-items:center;min-width:2.2rem;height:2.2rem;padding:0 .5rem;border-radius:var(--r);border:1.5px solid transparent;font-weight:700;font-size:.9rem;color:var(--ink-2);text-decoration:none;transition:background-color .2s,border-color .2s,transform .15s var(--ease),color .2s}
.pager-nav a.pg:hover{background:var(--cyan-l);border-color:var(--cyan);color:var(--cyan-d);transform:translateY(-1px)}
.pager-nav .pg.on{background:var(--ink);color:#fff;box-shadow:0 4px 10px -3px rgba(22,50,79,.5);animation:rp-pop .3s var(--spring)}
.pager-nav .pg.off{opacity:.35}.pager-nav .gap{color:var(--ink-4);padding:0 .15rem}
.pager-per{display:flex;align-items:center;gap:.25rem}
.pager-per .pp{padding:.2rem .55rem;border-radius:var(--r-pill);font-size:.82rem;font-weight:700;text-decoration:none;color:var(--ink-2);border:1.5px solid transparent;transition:background-color .2s,border-color .2s,color .2s}
.pager-per .pp:hover{border-color:var(--cyan);color:var(--cyan-d)} .pager-per .pp.on{background:var(--cyan-l);color:var(--cyan-d);border-color:var(--cyan)}
.pager-more{border-radius:var(--r-pill)}
.pager.is-feed .pager-nav,.pager.is-feed .pager-per{display:none}

/* ---------- 14 · Barra de acción móvil (pestañas inferiores) ---------- */
.tabbar{display:none}
@media (max-width:960px){
  :root{--tabbar-h:62px}
  body.app{padding-bottom:calc(var(--tabbar-h) + var(--safe-b))}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:35;height:calc(var(--tabbar-h) + var(--safe-b));padding:0 var(--safe-r) var(--safe-b) var(--safe-l);background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -14px rgba(15,39,64,.35)}
  .tabbar a,.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;border:0;background:none;color:var(--ink-3);font:700 .68rem/1.1 var(--font);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s}
  .tabbar svg{width:23px;height:23px;transition:transform .25s var(--spring)}
  .tabbar a::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 4px 4px;background:var(--cyan);transform:scaleX(0);transition:transform .25s var(--spring)}
  .tabbar a.active{color:var(--cyan-d)} .tabbar a.active::before{transform:scaleX(1)} .tabbar a.active svg{transform:translateY(-1px) scale(1.1)}
  .tabbar a:active svg,.tabbar button:active svg{transform:scale(.88)}
  .bulk-bar{bottom:calc(var(--tabbar-h) + var(--safe-b) + 10px)}
  .acciones{bottom:calc(var(--tabbar-h) + var(--safe-b))}
  .side{padding-bottom:calc(1rem + var(--safe-b));box-shadow:none} body.menu-open .side{box-shadow:var(--sh-3)}
  .topbar{padding-left:max(1rem,var(--safe-l));padding-right:max(1rem,var(--safe-r))}
}

/* ---------- 15 · Móvil y tablet ---------- */
@media (max-width:1100px){.lf-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
  .content{padding:1rem .9rem 1.5rem}
  h1{font-size:clamp(1.45rem,1.1rem + 2vw,1.8rem)}
  .btn{min-height:44px} .btn-sm{min-height:38px} .chip{padding:.45rem .9rem}
  .page-head{gap:.75rem} .page-head .actions{width:100%} .page-head .actions .btn{flex:1 1 auto}
  .lf-search{flex:1 1 100%;max-width:none} .lf-go{flex:1 1 auto} .lf-toggle{flex:1 1 auto}
  .lf-fields{grid-template-columns:1fr 1fr}
  .lf-presets{flex-wrap:nowrap;overflow-x:auto;margin:0 -.25rem;padding:0 .25rem .35rem;scrollbar-width:none;-webkit-overflow-scrolling:touch} .lf-presets::-webkit-scrollbar{display:none} .lf-presets .chip{flex:none}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-.9rem;padding:0 .9rem .35rem;scrollbar-width:none;-webkit-overflow-scrolling:touch} .chips::-webkit-scrollbar{display:none} .chips .chip{flex:none}
  .pager{flex-direction:column;align-items:stretch;text-align:center} .pager-info{text-align:center} .pager-nav{justify-content:center} .pager-per{justify-content:center;flex-wrap:wrap} .pager-more{width:100%;min-height:46px}
  /* tablas → tarjetas con relieve */
  .tbl tbody{display:grid;gap:.7rem;padding:.7rem}
  .tbl tr{border:1px solid var(--line);border-bottom-width:1px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-1);padding:.7rem .95rem}
  .tbl tbody tr:hover{box-shadow:var(--sh-2),inset 4px 0 0 var(--cyan)}
  .table-panel .tbl tbody{background:var(--bg)}
  .table-wrap{background:none}
  .tbl td:first-child{font-weight:700;padding-bottom:.35rem;margin-bottom:.15rem;border-bottom:1px dashed var(--line)}
  .tbl td:first-child::before{content:none}
  .tbl td{min-height:1.6rem;align-items:center}
  .tbl .sel{width:auto}
  .flash{padding-right:2.4rem}
  .popbox{border-radius:var(--r-lg);box-shadow:var(--sh-3)}
  .plans{margin:1rem 0}
}
@media (max-width:480px){
  .lf-fields{grid-template-columns:1fr}
  .kpi-val{font-size:1.45rem} .grid-3.kpis,.grid-4.kpis{grid-template-columns:1fr}
  .pager-nav .pg{min-width:2.5rem;height:2.5rem}
}
@media (min-width:1500px){.content{max-width:1400px}}
@media (min-width:1900px){.content{max-width:1560px;padding:2rem 2.5rem}}
@media (hover:none){.btn:hover,.chip:hover,.panel:hover,.kpi:hover,.stat:hover,.tile:hover,.report-card:hover,.origen-card:hover,.plan:hover{transform:none}.btn-primary:hover{transform:none;box-shadow:3px 3px 0 var(--ink)}}

/* ---------- 16 · Web pública, acceso y registro ---------- */
body.pub{background:
  radial-gradient(900px 520px at 90% -5%,rgba(0,119,200,.12),transparent 60%),
  radial-gradient(700px 420px at 0% 30%,rgba(214,0,111,.07),transparent 60%),
  radial-gradient(rgba(22,50,79,.07) 1px,transparent 1.2px) 0 0/24px 24px,var(--bg)}
.pub-head{background:rgba(255,255,255,.85);-webkit-backdrop-filter:saturate(170%) blur(12px);backdrop-filter:saturate(170%) blur(12px);border-bottom:1px solid var(--line);top:3px;transition:box-shadow .25s}
.pub-head.is-scrolled{box-shadow:0 10px 30px -14px rgba(15,39,64,.35)}
.pub-nav a{position:relative;transition:color .2s} .pub-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)} .pub-nav a:hover::after{transform:scaleX(1)}
.hero{position:relative}
body.pub::after{content:"";position:fixed;inset:-6%;z-index:-1;pointer-events:none;background:radial-gradient(420px 420px at 14% 24%,rgba(0,119,200,.26),transparent 70%),radial-gradient(380px 380px at 90% 80%,rgba(214,0,111,.16),transparent 70%),radial-gradient(300px 300px at 70% 12%,rgba(255,198,41,.16),transparent 70%);animation:rp-drift 16s ease-in-out infinite alternate}
@keyframes rp-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2.5%,-2%,0) scale(1.08)}}
.hero h1{animation:rp-up .7s var(--ease) both} .hero .lead{animation:rp-up .7s var(--ease) .08s both} .hero-cta{animation:rp-up .7s var(--ease) .16s both} .calc{animation:rp-up .8s var(--ease) .12s both}
.calc{border-radius:var(--r-lg);transition:box-shadow .3s var(--ease),transform .3s var(--ease)} .calc:hover{box-shadow:11px 11px 0 var(--yellow);transform:translate(-2px,-2px)}
.band-tint,.band-cta{position:relative;overflow:hidden}
.band-cta::before{content:"";position:absolute;inset:-40% -10% auto auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);animation:rp-float 10s ease-in-out infinite}
.feature-list article{transition:transform .25s var(--ease),border-color .25s,background-color .25s;border-radius:0 var(--r) var(--r) 0} .feature-list article:hover{transform:translateX(6px);background:rgba(255,255,255,.7)}
.faq{transition:background-color .2s;border-radius:var(--r);padding-inline:.4rem} .faq:hover{background:rgba(255,255,255,.7)} .faq summary::after{transition:transform .3s var(--spring)} .faq[open] summary::after{transform:rotate(180deg)}
.faq[open] p{animation:rp-up .35s var(--ease) both}
.auth{border-radius:var(--r-lg);animation:rp-up .6s var(--ease) both;box-shadow:8px 8px 0 var(--yellow)}
.auth h1{margin-bottom:.8rem}
.center-page .err-code{animation:rp-float 3.5s ease-in-out infinite;background:var(--cmyk);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .reveal.in{opacity:1;transform:none}
.js .reveal:nth-child(2){transition-delay:.06s}.js .reveal:nth-child(3){transition-delay:.12s}.js .reveal:nth-child(n+4){transition-delay:.18s}
.pub-foot{position:relative} .pub-foot::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--cmyk)}

/* ---------- 17 · Accesibilidad y preferencias ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none} @view-transition{navigation:none}
}
@media (prefers-contrast:more){.panel,.kpi,.stat,.chip,input,select,textarea{border-color:var(--ink)}}
@media print{body::before,.tabbar,.nprogress{display:none!important} .content>*,.tbl tbody tr{animation:none!important} body.app{background:#fff;padding-bottom:0}}

/* celdas vacías: no mostrar etiqueta huérfana en las tarjetas móviles */
@media (max-width:720px){.tbl td:empty{display:none}}

/* los adornos desenfocados de la portada no deben crear scroll horizontal */
body.pub{overflow-x:clip}

/* objetivos táctiles cómodos y tarjetas de indicadores compactas en móvil */
@media (max-width:720px){
  .link-sm{display:inline-block;padding:.4rem 0}
  .chk{width:1.8rem;height:1.8rem;min-width:1.8rem}
  .kpi{padding:.65rem .85rem .65rem 1.1rem} .kpi-val{font-size:1.4rem}
  .kpi-txt{font-size:1.05rem}
}

/* listas con importes: el número y el importe nunca se parten; el texto intermedio se recorta */
.plain li{align-items:center}
.plain li>:first-child,.plain li>:last-child{white-space:nowrap;flex:none}
.plain li>:nth-child(2):not(:last-child){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* gráfico de barras: esquinas redondeadas, crecimiento al cargar y resalte */
@keyframes rp-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bar,.bar-now{rx:5px;ry:5px;transform-box:fill-box;transform-origin:bottom;animation:rp-grow .8s var(--ease) both;transition:fill .2s}
.bars>*:nth-child(2) .bar,.bars .bar:nth-of-type(2){animation-delay:.05s}
.bar{fill:#A9BCCE} .bar:hover{fill:var(--ink-3)} .bar-now{fill:var(--cyan)} .bar-now:hover{fill:var(--cyan-d)}

/* acceso y cabecera pública en pantallas estrechas */
.auth{width:min(420px,calc(100% - 1.8rem))} .auth-wide{width:min(640px,calc(100% - 1.8rem))}
@media (max-width:480px){
  .pub-cta .btn{white-space:nowrap;padding-inline:.8rem;font-size:.86rem;min-height:40px}
  .pub-head{padding-inline:.8rem;gap:.5rem} .pub-head .brand span{font-size:1.05rem}
}
@media (max-width:340px){.pub-head .brand span{display:none}}

/* ---------- 18 · Plantillas de PDF: galería y editor ---------- */
.tpl-uso-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.tpl-bar{margin:0 0 .4rem} .tpl-bar .chips{align-items:center;margin:0} .tpl-bar-l{margin-right:.2rem}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:1.15rem;margin-bottom:1.5rem}
.tpl-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.tpl-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--cyan)}
.tpl-thumb{display:block;padding:16px 16px 0;aspect-ratio:1/1.06;overflow:hidden;background:linear-gradient(180deg,#E6EDF4,#D6E0EA);text-decoration:none}
.tpl-img{display:block;width:100%;height:auto;background:#fff;border-radius:3px 3px 0 0;box-shadow:0 8px 22px -6px rgba(15,39,64,.38);transition:transform .45s var(--ease)}
.tpl-card:hover .tpl-img{transform:translateY(-6px) scale(1.02)}
.tpl-body{display:grid;gap:.55rem;align-content:start;padding:.9rem 1rem 1rem;flex:1}
.tpl-body h3{margin:0;font-size:1.05rem} .tpl-body p{margin:0}
.tpl-uso-badges{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.tpl-actions{display:flex;flex-wrap:wrap;gap:.4rem}
.tpl-usar{display:flex;gap:.4rem;align-items:center;margin-top:.15rem} .tpl-usar select{flex:1;min-height:36px;padding:.25rem 2rem .25rem .6rem;font-size:.85rem}

.tpl-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,540px);gap:1.4rem;align-items:start}
.tpl-controls{display:grid;gap:.8rem;min-width:0}
.tpl-sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:0 1.1rem;box-shadow:var(--sh-1);transition:box-shadow .25s}
.tpl-sec[open]{box-shadow:var(--sh-2);padding-bottom:1rem}
.tpl-sec>summary{list-style:none;cursor:pointer;font-weight:800;font-size:1rem;padding:.95rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.tpl-sec>summary::-webkit-details-marker{display:none}
.tpl-sec>summary::after{content:"";width:.6rem;height:.6rem;border-right:2.5px solid var(--cyan);border-bottom:2.5px solid var(--cyan);transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--spring)}
.tpl-sec[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.tpl-sec[open]>*:not(summary){animation:rp-in .3s ease both}
.tpl-h{margin:1rem 0 .5rem;font-size:.95rem}
.tpl-color-in{display:flex;align-items:center;gap:.6rem}
.tpl-color-in input[type=color]{width:52px;height:40px;padding:3px;cursor:pointer;border-radius:var(--r)}
.tpl-hex{font-family:var(--mono);font-size:.82rem;color:var(--ink-3)}
.tpl-paletas{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:0 0 .9rem}
.tpl-paleta{display:inline-flex;gap:2px;padding:3px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:#fff;cursor:pointer;transition:transform .2s var(--spring),border-color .2s,box-shadow .2s}
.tpl-paleta:hover{transform:translateY(-2px) scale(1.06);border-color:var(--cyan);box-shadow:var(--sh-2)}
.tpl-paleta i{display:block;width:18px;height:18px;border-radius:50%}
.tpl-sec input[type=range]{padding:0;min-height:32px;accent-color:var(--cyan);border:0;background:transparent}
.tpl-out{margin-left:.35rem;font-weight:800;color:var(--cyan-d);font-variant-numeric:tabular-nums}
.tpl-legal{background:var(--cyan-l);border-left:4px solid var(--cyan);padding:.55rem .75rem;border-radius:var(--r);margin:.8rem 0 0}
.tpl-save{position:sticky;bottom:calc(var(--tabbar-h) + var(--safe-b) + 10px);z-index:6;display:flex;flex-wrap:wrap;gap:.6rem;padding:.7rem;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.tpl-preview-col{position:sticky;top:70px;display:grid;gap:.6rem;max-height:calc(100vh - 90px);grid-template-rows:auto minmax(0,1fr) auto}
.tpl-preview-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between} .tpl-preview-bar .chips{margin:0}
.tpl-preview-bar .chip{position:relative}
.tpl-preview-bar .chip:focus-within{box-shadow:var(--focus)}
.tpl-preview{overflow:auto;display:grid;gap:14px;align-content:start;padding:14px;background:linear-gradient(180deg,#DCE4EC,#CDD8E3);border-radius:var(--r-lg);transition:opacity .2s;min-height:260px}
.tpl-preview.is-busy{opacity:.6}
.tpl-page{animation:rp-in .3s ease both} .tpl-page svg{display:block;width:100%;height:auto;background:#fff;box-shadow:0 10px 26px -8px rgba(15,39,64,.45)}
.tpl-cargando{text-align:center;padding:3rem 0}
.tpl-nota{margin:0}
.tpl-solo-movil{display:none}
@media (max-width:1100px){
  .tpl-layout{grid-template-columns:1fr}
  .tpl-preview-col{position:static;max-height:none;grid-template-rows:none}
  .tpl-preview{max-height:none;overflow:visible}
  .tpl-solo-movil{display:inline-flex}
}
@media (max-width:720px){.tpl-grid{grid-template-columns:1fr 1fr;gap:.8rem}.tpl-thumb{padding:10px 10px 0}.tpl-body{padding:.7rem}.tpl-body h3{font-size:.95rem}.tpl-actions .btn{flex:1 1 auto}.tpl-uso-grid{grid-template-columns:1fr 1fr}.tpl-sec{padding:0 .85rem}}
@media (max-width:440px){.tpl-grid{grid-template-columns:1fr}}
@media print{.tpl-save,.tpl-controls{display:none}}
/* plantillas: evitar que el contenido mínimo ensanche la rejilla en pantallas estrechas */
.tpl-layout>*,.tpl-preview-col,.tpl-preview{min-width:0}
.tpl-preview-bar .chips{flex-wrap:wrap}
@media (max-width:1100px){.tpl-layout{grid-template-columns:minmax(0,1fr)}}
/* robustez en pantallas estrechas: el contenido mínimo no debe ensanchar el diseño */
.grid-main>*,.bank-grid>*{min-width:0}
@media (max-width:1000px){.grid-main{grid-template-columns:minmax(0,1fr)}}
.flash{flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}
.bank-grid header{flex-wrap:wrap;gap:.4rem}
.stack,.stack-sm{grid-template-columns:minmax(0,1fr)} .stack>*,.stack-sm>*{min-width:0}
.tpl-colores{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.tpl-save{flex-wrap:nowrap;gap:.5rem;padding:.55rem}.tpl-save .btn{flex:1 1 0;min-width:0;padding-inline:.5rem;white-space:nowrap}}
.tpl-controls{grid-template-columns:minmax(0,1fr)} .tpl-controls>*{min-width:0}