/* HelloLatinos Partner Program · estilo limpio: blanco, texto neutro y un solo acento en degradado (azul → rojo) */
:root{--blue:#1800ad;--blue-l:#f0eeff;--red:#ff3131;--red-d:#d42222;--red-l:#fff1f1;--ink:#17171c;--text:#3d3d47;--mut:#84848f;--line:#ececf0;--line2:#dcdce3;--soft:#f6f6f8;--side:#fafafb;
--ok:#12804a;--ok-l:#e9f6ef;--warn:#8f6200;--warn-l:#fff5d9;
--grad:linear-gradient(115deg,#1800ad 0%,#4a22d4 45%,#b32a8f 78%,#ff3131 100%);--grad-btn:linear-gradient(135deg,#1800ad,#4a22d4);
--font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}[hidden]{display:none!important}
body{margin:0;background:#fff;color:var(--text);font:400 15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);line-height:1.25;margin:0;letter-spacing:-.015em}
h1{font-size:1.6rem;font-weight:700}h2{font-size:1.05rem;font-weight:600}h3{font-size:.95rem;font-weight:600}
strong,b{font-weight:600;color:var(--ink)}p{margin:.25rem 0}code{background:var(--soft);border-radius:5px;padding:.05rem .3rem;font-size:.85em}
.mut{color:var(--mut)}.small{font-size:.85rem}.center{text-align:center;display:block;width:100%}.boot{text-align:center;margin-top:30vh;color:var(--mut)}
.meta{font-size:.82rem;color:var(--mut);margin:.1rem 0 0}.cap{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:1rem 0 .4rem}
a{color:var(--blue)}.plink{color:var(--ink);text-decoration:none;font-weight:600}.plink:hover{color:var(--blue);text-decoration:underline}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.2em}

/* estructura: barra lateral en computador, barra superior en celular */
.app{display:flex;min-height:100vh}
.side{flex:none;width:248px;height:100vh;position:sticky;top:0;display:flex;flex-direction:column;gap:1rem;padding:1.1rem .8rem;background:var(--side);border-right:1px solid var(--line)}
.logo{height:36px;width:auto;align-self:flex-start;margin-left:.4rem}
.nav{display:flex;flex-direction:column;gap:2px}
.tab{display:flex;align-items:center;gap:.65rem;width:100%;border:0;background:none;border-radius:8px;padding:.5rem .65rem;font:500 .92rem var(--font);color:var(--text);cursor:pointer;text-align:left;white-space:nowrap}
.tab .ic{color:var(--mut);font-size:1.05rem}.tab:hover{background:#efeff3}
.tab.on{background:var(--blue-l);color:var(--blue);font-weight:600}.tab.on .ic{color:var(--blue)}
.badge{margin-left:auto;background:var(--red);color:#fff;border-radius:999px;font-size:.7rem;font-weight:700;min-width:1.25rem;line-height:1.25rem;padding:0 .35rem;text-align:center}
.priv{margin:auto 0 0 .65rem;color:var(--mut)}.priv+.me{margin-top:.5rem}.me{margin-top:auto;display:flex;align-items:center;gap:.5rem;padding:.6rem .4rem 0;border-top:1px solid var(--line)}
.me-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}.me-t strong{font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.me-t span{font-size:.76rem;color:var(--mut)}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border:0;border-radius:8px;background:none;color:var(--mut);cursor:pointer;font-size:1.05rem;flex:none}.icon-btn:hover{background:#efeff3;color:var(--ink)}
.wrap{flex:1;min-width:0;max-width:1040px;margin:0 auto;padding:1.75rem 2rem 6rem}
@media(max-width:899px){
  .app{flex-direction:column}
  .side{width:100%;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;padding:.55rem .9rem 0;padding-top:calc(.55rem + env(safe-area-inset-top));background:#fff;border-right:0;border-bottom:1px solid var(--line);z-index:5}
  .logo{height:30px;margin:0;align-self:center}.priv{display:none}.me{margin:0 0 0 auto;padding:0;border:0;min-width:0}.me-t{text-align:right}.me-t span{display:none}
  .nav{order:3;width:calc(100% + 1.8rem);margin:0 -.9rem;padding:0 .9rem;flex-direction:row;gap:.15rem;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
  .tab{width:auto;flex:none;border-radius:0;padding:.6rem .55rem;border-bottom:2px solid transparent;font-size:.88rem;gap:.4rem}.tab:hover{background:none}
  .tab.on{background:none;border-bottom-color:var(--blue)}.badge{margin-left:.1rem}
  .wrap{width:100%;padding:1.1rem 1rem 6.5rem}
}

/* encabezados de página */
.head{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem}.head p{max-width:62ch;margin-top:.3rem}
.cover{margin-bottom:1.5rem}
.cover-bg{height:104px;border-radius:14px;background:radial-gradient(40% 90% at 85% 0%,rgba(255,255,255,.22),transparent),var(--grad)}
.cover-in{padding:0 .25rem}.cover-in>h1{margin-top:.9rem;font-size:1.75rem}.cover-in>.avatar{margin-top:-34px;box-shadow:0 0 0 4px #fff}.cover-in>.avatar+h1{margin-top:.6rem}
.cover-in>p{margin-top:.3rem}.acts{margin-top:.9rem}
.sec{margin-top:2.25rem}.sec-h{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.sec-h h2{display:flex;align-items:center;gap:.5rem}.sec-h h2 .ic{color:var(--mut)}
.back{display:inline-flex;align-items:center;gap:.35rem;margin-bottom:.75rem;padding-left:0;color:var(--mut)}.back:hover{color:var(--ink)}

/* contenedores */
.grid2{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}.gap{margin-top:.75rem}
.stack>*+*{margin-top:.75rem}.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem}.card>h3{margin-bottom:.4rem}
.card-h{display:flex;flex-wrap:wrap;gap:.5rem .75rem;align-items:flex-start;justify-content:space-between}
.card.late{border-left:3px solid var(--red)}.done{opacity:.55}
.stats{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem}
.stat .l,.fact .l{font-size:.8rem;color:var(--mut);display:flex;align-items:center;gap:.4rem}
.stat .n{font-size:1.5rem;font-weight:650;color:var(--ink);letter-spacing:-.02em;line-height:1.25;margin-top:.3rem}.stat.alert .n{color:var(--red-d)}
.stat .sub,.fact .sub{font-size:.78rem;color:var(--mut);margin-top:.1rem}.stat .plans,.fact .plans{margin-top:.45rem}
.facts{display:grid;gap:1rem 1.25rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.fact .n{font-size:1.05rem;font-weight:600;color:var(--ink);margin-top:.1rem}.facts+.plans{margin-top:1rem}
.list{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.item{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;padding:.75rem 1rem}.item+.item{border-top:1px solid var(--line)}.item:hover{background:var(--side)}
.grow{flex:1 1 220px;min-width:0}.item .acts{margin:0}.amt{white-space:nowrap}
.callout{display:flex;gap:.7rem;background:var(--soft);border-radius:10px;padding:.85rem 1rem;font-size:.92rem}.callout>.ic{color:var(--blue);font-size:1.15rem;margin-top:.15rem}
.msg{background:var(--soft);border-radius:8px;padding:.65rem .85rem;margin:.7rem 0;font-size:.9rem;color:var(--text)}.pre{white-space:pre-wrap;word-break:break-word}
.note-line{font-size:.85rem;background:var(--soft);border-radius:8px;padding:.45rem .7rem;margin:.6rem 0}.note-line.warn{background:var(--warn-l);color:var(--warn)}
.note{border-top:1px solid var(--line);padding-top:.7rem;margin-top:.8rem}
.empty{text-align:center;padding:2rem 1rem;color:var(--mut);border:1px dashed var(--line2);border-radius:12px;font-size:.9rem}.empty b{display:block;color:var(--ink);margin-bottom:.15rem}
.big{font-size:1.2rem;font-weight:650;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}.down{color:var(--red-d)}
.total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:.9rem 0 .3rem}.total span{font-size:.85rem;color:var(--mut)}
.total strong{font-size:1.5rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
dl{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1.25rem;margin:.5rem 0;font-size:.92rem}dt{color:var(--mut)}dd{margin:0;word-break:break-word;color:var(--ink)}
.slist{list-style:none;margin:.6rem 0 0;padding:0}.slist li{display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:baseline;padding:.45rem 0;border-top:1px solid var(--line);font-size:.92rem}
.slist .r{margin-left:auto;font-weight:600;color:var(--ink);text-align:right}
.track{height:8px;border-radius:999px;background:var(--soft);overflow:hidden;margin:.6rem 0}.fill{height:100%;background:var(--grad);border-radius:999px}
.avatar{width:68px;height:68px;border-radius:16px;object-fit:contain;background:linear-gradient(135deg,#f0eeff,#fff1f1);display:grid;place-items:center;font-size:1.6rem;font-weight:700;color:var(--blue);flex:none}
img.avatar{background:#fff}.avatar.sm{width:38px;height:38px;border-radius:10px;font-size:1rem}
.flag{width:20px;height:14px;border-radius:2px;vertical-align:-2px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}

/* botones: un solo botón principal por pantalla; el resto, secundarios */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--grad-btn);color:#fff;border:1px solid transparent;border-radius:9px;padding:.58rem 1rem;font:600 .9rem var(--font);cursor:pointer;text-decoration:none;box-shadow:0 1px 2px rgba(24,0,173,.25);transition:filter .15s,background .15s}
.btn:hover{filter:brightness(1.12)}.btn:disabled{opacity:.55;cursor:wait}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line2);box-shadow:none}.btn.ghost:hover{background:var(--soft);filter:none}
.btn.danger{background:#fff;color:var(--red-d);border-color:#ffd2d2;box-shadow:none}.btn.danger:hover{background:var(--red-l);filter:none}
.btn.red{background:var(--red-d);box-shadow:none}.btn.sm{padding:.38rem .7rem;font-size:.82rem;border-radius:8px}
.link{background:none;border:0;color:var(--blue);font:500 .88rem var(--font);cursor:pointer;padding:.3rem 0}.link:hover{text-decoration:underline}
.fab{position:fixed;right:1.25rem;bottom:calc(1.25rem + env(safe-area-inset-bottom));z-index:6;padding:.8rem 1.2rem;border-radius:999px;background:var(--grad);box-shadow:0 8px 24px rgba(24,0,173,.28)}
.seg{display:inline-flex;background:var(--soft);border-radius:8px;padding:2px}.seg button{border:0;background:none;border-radius:6px;padding:.25rem .6rem;font:500 .8rem var(--font);color:var(--mut);cursor:pointer}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1)}
details.fold{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.75rem}
.fold summary{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--blue);list-style:none}.fold summary::-webkit-details-marker{display:none}

/* formularios */
label{display:block;font-weight:500;font-size:.85rem;color:var(--ink);margin:.85rem 0 .3rem}
input,select,textarea{width:100%;font:400 .95rem var(--font);padding:.58rem .75rem;border:1px solid var(--line2);border-radius:9px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(24,0,173,.12);outline:none}
input[type=file]{padding:.45rem}textarea{min-height:100px;resize:vertical}.hint{font-size:.8rem;color:var(--mut);margin-top:.3rem}
.inline{display:flex;gap:.75rem;flex-wrap:wrap}.inline>*{flex:1 1 170px}.form-end{margin-top:1rem}
.check{display:inline-flex;gap:.5rem;align-items:center;margin:0;font-weight:500;cursor:pointer}.check input{width:18px;height:18px;accent-color:var(--blue);flex:none;padding:0}

/* etiquetas de estado */
.chip{display:inline-flex;align-items:center;gap:.35rem;border-radius:6px;padding:.1rem .5rem;font-size:.77rem;font-weight:500;background:var(--soft);color:var(--text);white-space:nowrap}
.chip.ok::before,.chip.warn::before,.chip.red::before,.chip.blue::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.ok{background:var(--ok-l);color:var(--ok)}.chip.warn{background:var(--warn-l);color:var(--warn)}.chip.red{background:var(--red-l);color:var(--red-d)}.chip.blue{background:var(--blue-l);color:var(--blue)}

/* gráficos y ranking */
.plot{width:100%;height:auto;display:block}.bar{fill:#dedbf7}.val{font:600 8px var(--font);fill:var(--ink)}.axis{font:500 7.5px var(--font);fill:var(--mut)}
.lb{list-style:none;margin:.6rem 0 0;padding:0}.lb li{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;border-top:1px solid var(--line)}
.lb .pos{width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:600;background:var(--soft);color:var(--text);flex:none}.lb .pos.top{background:var(--grad);color:#fff}
.lb .name{flex:1;min-width:0}.lb .num{font-weight:600;color:var(--ink)}

/* ingreso y ventanas */
.login{min-height:100vh;display:grid;place-items:center;padding:1.5rem;position:relative}
.login-bg{position:absolute;inset:0;background:radial-gradient(55% 45% at 12% 8%,rgba(24,0,173,.17),transparent),radial-gradient(50% 45% at 92% 92%,rgba(255,49,49,.15),transparent),var(--side)}
.login .box{position:relative;width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:2rem 1.75rem;box-shadow:0 20px 50px rgba(23,23,28,.08)}
.login img{width:170px;display:block;margin:0 auto 1.25rem}.login h1{text-align:center;font-size:1.4rem}.login p.sub{text-align:center;color:var(--mut);margin:.4rem 0 .6rem;font-size:.9rem}
.login .btn{width:100%;margin-top:1.25rem;padding:.75rem;background:var(--grad)}.login .link{margin-top:.8rem}
.overlay{position:fixed;inset:0;background:rgba(23,23,28,.45);display:grid;place-items:end center;z-index:20}
.modal{background:#fff;width:100%;max-width:520px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:1.4rem 1.4rem calc(1.5rem + env(safe-area-inset-bottom));box-shadow:0 24px 60px rgba(23,23,28,.25)}.modal h2{font-size:1.2rem;margin-bottom:.5rem}
@media(min-width:640px){.overlay{place-items:center}.modal{border-radius:18px}}
#toast{position:fixed;left:50%;bottom:calc(5.5rem + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:10px;font-weight:500;font-size:.88rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30;max-width:90vw;text-align:center}
#toast.show{opacity:1}#toast.err{background:var(--red-d)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}