/* ============================================================
   BRB NETWORK · TEMA CLARO — blanco con azul marino
   Va DESPUÉS de app.css, usability.css y network.css: manda este.
   El rail se queda en azul marino profundo; el contenido es blanco.
   ============================================================ */

:root{
  /* se conservan los nombres del Hub para no reescribir 80 KB de CSS,
     pero cambia lo que significan: ink = fondo, paper = tinta */
  --ink:#eef3f9;
  --ink-2:#e6edf6;
  --surface:#ffffff;
  --surface-2:#ffffff;
  --paper:#0d1b2e;
  --muted:#5b6b83;
  --dim:#8fa0b8;
  --champagne:#1e4d8f;
  --champagne-hi:#2f6fc4;
  --bronze:#14335e;
  --signal:#1c8a5a;
  --danger:#c2412f;
  --hairline:rgba(13,27,46,.09);
  --goldline:rgba(30,77,143,.22);
  /* propios */
  --marino:#0d1b2e;
  --marino-2:#132c49;
  --azul:#1e4d8f;
  --azul-hi:#2f6fc4;
  --papel:#ffffff;
}

html,body{background:var(--ink);color:var(--paper)}
.noise{display:none}
::selection{background:rgba(47,111,196,.22)}

/* ---------- RAIL: azul marino profundo ---------- */
.rail{
  background:linear-gradient(180deg,var(--marino),#0a1524);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 24px 70px rgba(13,27,46,.18);
}
.rail .brand-words{color:#fff}
.rail .brand-words small{color:#8fa8c9}
.rail-nav button{color:#9fb3ce}
.rail-nav button:hover{color:#fff;background:rgba(255,255,255,.07)}
.rail-nav button.active{color:#fff;background:rgba(47,111,196,.30)}
.rail-profile{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.rail-profile b{color:#fff}
.rail-profile small,.rail-profile .mini-arrow{color:#8fa8c9}
.brand-orbit{box-shadow:inset 0 0 0 1px rgba(120,170,235,.5)}
.brand-orbit i{background:var(--azul-hi)}
.nav-sep{background:rgba(255,255,255,.10)}

/* ---------- TOPBAR ---------- */
.topbar{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(20px);
  box-shadow:inset 0 0 0 1px var(--hairline), 0 8px 30px rgba(13,27,46,.06);
}
.crumb span{color:var(--dim)}
.crumb b{color:var(--paper)}
.status-chip{background:rgba(30,77,143,.08);box-shadow:inset 0 0 0 1px rgba(30,77,143,.16);color:var(--azul)}
.status-chip i{background:var(--signal)}
.icon-btn{background:rgba(13,27,46,.05);box-shadow:inset 0 0 0 1px var(--hairline);color:var(--paper)}
.icon-btn:hover{background:rgba(30,77,143,.10)}

/* ---------- SUPERFICIES ---------- */
.panel{
  background:#fff;
  box-shadow:0 1px 2px rgba(13,27,46,.04), 0 10px 34px rgba(13,27,46,.07);
}
.bezel{background:transparent;box-shadow:none;padding:0}
.tap:hover{box-shadow:0 2px 6px rgba(13,27,46,.06), 0 22px 54px rgba(13,27,46,.12)}
.skeleton{background:linear-gradient(100deg,#e9eff7 20%,#f5f8fc 40%,#e9eff7 60%);background-size:220% 100%}

/* ---------- TIPOGRAFÍA ---------- */
.display,.section-title,h1,h2,h3{color:var(--paper)}
.display em,.section-title em{color:var(--azul)}
.lede{color:#48586f}
.muted{color:var(--muted)}
.gold-text{color:var(--azul)}
.eyebrow{color:var(--azul)}
a,.text-link{color:var(--azul)}

/* ---------- BOTONES ---------- */
.btn-primary{background:var(--marino);color:#fff}
.btn-primary:hover{background:var(--azul)}
.btn-gold{background:linear-gradient(135deg,var(--azul-hi),var(--azul));color:#fff}
.btn-gold:hover{background:linear-gradient(135deg,#3f80d6,#22599f)}
.btn-dark{background:#fff;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(13,27,46,.16)}
.btn-dark:hover{background:#f4f8fd;color:var(--azul)}
.btn-icon{background:rgba(255,255,255,.22)}
.btn-dark .btn-icon{background:rgba(13,27,46,.07)}

/* ---------- FORMULARIOS ---------- */
.field label{color:var(--muted)}
.field input,.field textarea,.field select{
  background:#f7fafd;color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(13,27,46,.14);
}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:inset 0 0 0 2px var(--azul)}
.field input::placeholder,.field textarea::placeholder{color:#a9b7c9}
.form-error{color:var(--danger)}

/* ---------- ACCESO ---------- */
.auth-screen{background:#fff}
.auth-visual{background:linear-gradient(135deg,#e8eef7,#f6f9fc)}
.auth-visual::after{
  background:url("/assets/img/claro-oficina.png") center/cover no-repeat;
  opacity:1;mix-blend-mode:normal;
}
.auth-copy{color:var(--paper)}
.auth-copy .lede{color:#42536b}
.auth-panel{background:#fff}
.auth-switch{color:var(--muted)}
.auth-switch button{color:var(--azul)}
.brand-mark .brand-words{color:var(--paper)}
.brand-mark .brand-words small{color:var(--muted)}
.auth-panel .brand-orbit{box-shadow:inset 0 0 0 1px rgba(30,77,143,.45)}

/* ---------- CABECERAS CON IMAGEN ---------- */
.visual-head{box-shadow:inset 0 0 0 1px var(--hairline);border:0}
.visual-head::before{
  background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.86) 46%,rgba(255,255,255,.25) 100%),
             linear-gradient(0deg,rgba(255,255,255,.6),transparent 60%);
}
.visual-head p{color:#42536b;text-shadow:none}
.academy-visual{background-image:url("/assets/img/claro-biblioteca.png")}
.credential-visual{background-image:url("/assets/img/claro-junta.png")}
.concierge-visual{background-image:url("/assets/img/claro-junta.png")}
.network-visual{background-image:url("/assets/img/claro-oficina.png")}
.meta-pill{background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px var(--hairline);color:var(--muted)}

/* ---------- NAV MÓVIL ---------- */
.mobile-nav{
  background:rgba(13,27,46,.95);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 18px 45px rgba(13,27,46,.28);
}
.mobile-nav button{color:#93a7c2}
.mobile-nav button.active{color:#fff}
.mobile-ring span{background:var(--azul-hi);color:#fff;box-shadow:0 0 0 6px #0d1b2e}

/* ---------- SALA DE CONSULTA ---------- */
.chat{background:var(--ink)}
.chat .sala-head{background:#fff;box-shadow:inset 0 -1px 0 var(--hairline)}
.sala-id small{color:var(--signal)}
.relojBar{background:rgba(13,27,46,.07)}
.relojBar i{background:linear-gradient(90deg,var(--azul),var(--azul-hi))}
.relojBar i.porfin{background:linear-gradient(90deg,#c98a1e,#e0a53c)}
.burbuja.yo{background:linear-gradient(135deg,var(--azul-hi),var(--azul));color:#fff}
.burbuja.el{background:#fff;box-shadow:0 1px 2px rgba(13,27,46,.05),0 6px 20px rgba(13,27,46,.06);color:var(--paper)}
.burbuja.el b{color:var(--azul)}
.nota{color:var(--dim)}
.escribiendo{background:#fff;box-shadow:0 6px 20px rgba(13,27,46,.07)}
.escribiendo i{background:var(--azul)}
.sala-composer{background:#fff;box-shadow:inset 0 1px 0 var(--hairline)}
.sala-composer textarea{background:#f7fafd;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(13,27,46,.14)}
.sala-composer textarea:focus{box-shadow:inset 0 0 0 2px var(--azul)}
.btn-send{background:linear-gradient(135deg,var(--azul-hi),var(--azul));color:#fff}
.sala-av{box-shadow:0 0 0 2px #fff,inset 0 0 0 1px var(--goldline)}
.salir-arriba{color:var(--muted)}

/* ---------- LOBBY / CUPO ---------- */
.cupo-orbit{box-shadow:inset 0 0 0 1px rgba(30,77,143,.28)}
.cupo-orbit::before{box-shadow:inset 0 0 0 1px rgba(30,77,143,.12)}
.cupo-orbit b{color:var(--azul)}
.demo-viva{background:linear-gradient(120deg,rgba(47,111,196,.10),transparent 58%),#fff}
.demo-punto{color:var(--signal)}
.demo-punto i{background:var(--signal)}
.hero{background:linear-gradient(135deg,rgba(47,111,196,.10),transparent 65%),#fff}

/* ---------- EXPEDIENTE / DATOS ---------- */
.exp-cat h4{color:var(--azul)}
.dato{box-shadow:inset 0 -1px 0 var(--hairline)}
.dato .k{color:var(--dim)}
.dato .cita{color:var(--muted);box-shadow:inset 1px 0 0 var(--goldline)}
.dato .pie button{color:var(--azul)}
.barra{background:rgba(13,27,46,.08)}
.barra i{background:linear-gradient(90deg,var(--azul),var(--azul-hi))}
.pr{color:#3c4d64}
.ses-fila{box-shadow:inset 0 -1px 0 var(--hairline)}
.ses-fila:hover{background:#f7fafd}
.ses-fila .n{color:var(--dim)}
.empty{color:var(--muted)}

/* ---------- MEMBRESÍAS ---------- */
.plan{background:#fff}
.plan.actual{box-shadow:0 1px 2px rgba(13,27,46,.04),0 10px 34px rgba(13,27,46,.07),inset 0 0 0 2px var(--azul)}
.plan.top{background:linear-gradient(160deg,rgba(47,111,196,.09),transparent 60%),#fff}
.plan-flag{background:var(--azul);color:#fff}
.plan-n{color:var(--azul);opacity:.35}
.plan-gancho{color:#48586f}
.plan-cifra{box-shadow:inset 0 -1px 0 var(--hairline)}
.plan-cifra b{color:var(--azul)}
.plan-benef li{color:#3c4d64}
.plan-benef li::before{background:var(--azul)}
.plan-precio{color:var(--paper)}

/* ---------- MURO DE CONVERSIÓN ---------- */
.muro{background:linear-gradient(160deg,rgba(47,111,196,.10),transparent 70%),#fff;
  box-shadow:0 1px 2px rgba(13,27,46,.04),0 10px 34px rgba(13,27,46,.08),inset 0 0 0 1px rgba(30,77,143,.20)}
.muro-logros div{box-shadow:inset 0 -1px 0 var(--hairline)}
.muro-logros b{color:var(--azul)}

/* ---------- ACADEMIA ---------- */
.vthumb{background-color:#dde6f1;box-shadow:inset 0 0 0 1px var(--hairline)}
.vthumb::after{background:linear-gradient(180deg,transparent 55%,rgba(13,27,46,.45))}
.vplay{background:rgba(255,255,255,.92);color:var(--azul);box-shadow:inset 0 0 0 1px rgba(30,77,143,.3)}
.vcheck{background:var(--signal);color:#fff}
.vtit{color:var(--paper)}
.vcard.visto .vtit{color:var(--muted)}
.carril::-webkit-scrollbar-thumb{background:rgba(30,77,143,.25)}
.reproductor{background:rgba(13,27,46,.55);backdrop-filter:blur(10px)}
.repro-in{background:#fff;box-shadow:0 40px 90px rgba(13,27,46,.28)}
.repro-head{box-shadow:inset 0 -1px 0 var(--hairline)}
.doc-body{color:#3c4d64}
.avatar-live{background:rgba(13,27,46,.62);backdrop-filter:blur(14px)}
.av-marco{background:#0d1b2e;box-shadow:0 34px 80px rgba(13,27,46,.4)}
.av-top b{color:#fff}
.av-fin{background:rgba(255,255,255,.96)}
.av-nota{color:#e6edf6}
.avatar-live .icon-btn{background:rgba(255,255,255,.9)}

/* ---------- VARIOS ---------- */
.avatar{background:#dbe5f2;color:var(--marino);box-shadow:0 0 0 2px #fff,inset 0 0 0 1px var(--goldline)}
.rail .avatar{box-shadow:0 0 0 2px var(--marino),inset 0 0 0 1px rgba(255,255,255,.2)}
#toast{background:var(--marino);color:#fff}
.lnk{color:var(--muted)}
.regalo{background:rgba(47,111,196,.08);box-shadow:inset 0 0 0 1px rgba(30,77,143,.22);border:0;color:var(--paper)}
.nivel{background:#fff}
.nivel.actual{box-shadow:inset 0 0 0 2px var(--azul)}
.nivel-n{color:var(--azul)}
.serie-tit{color:var(--paper)}

/* ============ MÓDULOS NUEVOS ============ */

/* pastilla de novedades en el rail */
.pastilla{margin-left:auto;min-width:19px;height:19px;padding:0 6px;border-radius:99px;display:grid;place-items:center;
  background:var(--azul-hi);color:#fff;font-size:10px;font-weight:700;font-style:normal}

/* ---------- MURO ---------- */
.muro-lista{display:grid;gap:16px;margin-top:16px}
.post{background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 1px 2px rgba(13,27,46,.04),0 10px 34px rgba(13,27,46,.07)}
.post.fijado{box-shadow:0 1px 2px rgba(13,27,46,.04),0 10px 34px rgba(13,27,46,.09),inset 0 0 0 2px var(--azul)}
.post-img{aspect-ratio:21/9;background:#dde6f1 center/cover no-repeat}
.post-cuerpo{padding:26px 30px}
.post-alto{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.post-tipo{padding:4px 11px;border-radius:99px;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(30,77,143,.10);color:var(--azul)}
.post-tipo.t-invitacion{background:rgba(28,138,90,.12);color:#177a4f}
.post-tipo.t-logro{background:rgba(201,138,30,.14);color:#9a6a12}
.post-fijo,.post-nuevo{padding:4px 10px;border-radius:99px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.post-fijo{background:rgba(13,27,46,.07);color:var(--muted)}
.post-nuevo{background:var(--azul-hi);color:#fff}
.post-fecha{margin-left:auto;color:var(--dim);font-size:11px}
.post h2{margin:0 0 10px;font-family:var(--serif);font-size:clamp(22px,2.3vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.15}

/* ---------- CREDENCIAL DE LA EMPRESA ---------- */
.credencial{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:30px 34px;border-radius:24px;
  background:linear-gradient(120deg,var(--marino),var(--marino-2) 70%);color:#fff;
  box-shadow:0 14px 44px rgba(13,27,46,.22)}
.cred-logo{width:78px;height:78px;flex:0 0 auto;border-radius:18px;overflow:hidden;display:grid;place-items:center;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.cred-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.cred-logo span{font-family:var(--serif);font-size:34px;color:#fff}
.cred-txt{flex:1;min-width:200px}
.cred-txt .eyebrow{color:#8fb4e6}
.cred-txt h1{margin:2px 0 4px;font-family:var(--serif);font-size:clamp(26px,3vw,36px);font-weight:500;letter-spacing:-.02em;color:#fff}
.cred-txt p{margin:0;color:#a9c0dd;font-size:13.5px}
.cred-num{text-align:right;display:grid;gap:6px;justify-items:end}
.cred-num small{color:#8fb4e6;font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.cred-num b{font-family:var(--serif);font-size:34px;font-weight:500;line-height:.9;color:#fff}
.credencial .meta-pill{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#dce8f7}

/* ---------- FORMULARIO DE PERFIL ---------- */
.form2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 16px}
.logo-fila{display:flex;align-items:center;gap:20px;padding-bottom:22px;margin-bottom:8px;
  box-shadow:inset 0 -1px 0 var(--hairline);flex-wrap:wrap}
.logo-box{width:92px;height:92px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;overflow:hidden;
  background:#f2f6fb;box-shadow:inset 0 0 0 1px var(--hairline);color:var(--dim);font-size:11px}
.logo-box img{width:100%;height:100%;object-fit:contain}

/* ---------- SERVICIOS ---------- */
.serv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;margin-top:16px}
.serv{display:grid;gap:9px;align-content:start;padding:26px;text-align:left;border:0;cursor:pointer;
  font:inherit;color:inherit;transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.serv:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(13,27,46,.06),0 22px 54px rgba(13,27,46,.12)}
.serv-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(30,77,143,.10);color:var(--azul)}
.serv-ico svg{width:21px;height:21px}
.serv b{font-size:16px;line-height:1.3}
.serv-desc{color:var(--muted);font-size:13px;line-height:1.6}

/* ---------- LA CARTA ---------- */
.carta{position:fixed;inset:0;z-index:90;display:grid;place-items:start center;overflow-y:auto;padding:24px 16px;
  background:rgba(13,27,46,.55);backdrop-filter:blur(12px)}
.carta-hoja{position:relative;width:min(760px,100%);background:#fff;border-radius:26px;padding:clamp(30px,5vw,58px);
  box-shadow:0 40px 100px rgba(13,27,46,.32)}
.carta-x{position:absolute;top:18px;right:18px}
.carta-sello{margin-bottom:22px}
.carta-sello .brand-orbit{width:52px;height:52px}
.carta-hoja p{font-size:15.5px;line-height:1.85;color:#33455e;margin:0 0 16px}
.carta-lista{display:grid;gap:12px;margin:22px 0}
.carta-lista div{padding:16px 20px;border-radius:16px;background:#f4f8fd;font-size:14.5px;line-height:1.7;color:#33455e;
  box-shadow:inset 3px 0 0 var(--azul)}
.carta-firma{margin-top:26px!important;font-size:15px!important}
.carta-pie{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:26px 0 22px;padding-top:16px;
  box-shadow:inset 0 1px 0 var(--hairline);color:var(--muted);font-size:12px}
.carta-pie b{color:var(--azul);font-size:14px}
.carta-hoja .btn{width:100%;justify-content:center}
@media (max-width:820px){ .carta{padding:14px 10px} .credencial{padding:24px} .cred-num{text-align:left;justify-items:start} }

/* el nombre de la marca en el rail no se veía */
.rail .brand-mark{color:#fff}
.rail .brand-words{color:#fff!important}
.rail .brand-words small{color:#8fb4e6!important}

/* ---------- RICARDO, el cerrador ---------- */
.ric{position:fixed;inset:0;z-index:95;display:grid;place-items:end center;padding:0;
  background:rgba(13,27,46,.45);backdrop-filter:blur(8px)}
.ric-in{width:min(560px,100%);height:min(720px,92dvh);display:grid;grid-template-rows:auto 1fr auto auto;
  background:#eef3f9;border-radius:24px 24px 0 0;overflow:hidden;box-shadow:0 -20px 70px rgba(13,27,46,.32)}
.ric-head{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#fff;
  box-shadow:inset 0 -1px 0 var(--hairline)}
.ric-av{width:42px;height:42px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--azul-hi),var(--azul));color:#fff;font-weight:700;font-size:17px}
.ric-id{flex:1;min-width:0;line-height:1.3}
.ric-id b{display:block;font-size:15px}
.ric-id small{color:var(--muted);font-size:11.5px}
.ric-msgs{overflow-y:auto;padding:22px 20px;display:flex;flex-direction:column;gap:14px}
.ric-msgs .burbuja{max-width:88%;font-size:14.5px}
.ric-composer{display:flex;align-items:flex-end;gap:10px;padding:14px 18px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));background:#fff;box-shadow:inset 0 1px 0 var(--hairline)}
.ric-composer textarea{flex:1;min-height:48px;max-height:120px;padding:13px 18px;resize:none;border:0;border-radius:24px;
  background:#f2f6fb;color:var(--paper);font:inherit;font-size:15px;box-shadow:inset 0 0 0 1px rgba(13,27,46,.13)}
.ric-composer textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--azul)}
.ric-composer .btn-send{width:48px;height:48px;font-size:19px}

/* tarjeta de pago dentro del chat */
.pago-card{align-self:flex-start;max-width:92%;width:340px;padding:18px 20px;border-radius:18px;background:#fff;
  box-shadow:0 1px 2px rgba(13,27,46,.05),0 8px 26px rgba(13,27,46,.10),inset 0 0 0 2px var(--azul)}
.pago-card.ok{box-shadow:0 1px 2px rgba(13,27,46,.05),0 8px 26px rgba(13,27,46,.10),inset 0 0 0 2px var(--signal)}
.pago-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.pago-cab span{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--azul)}
.pago-card.ok .pago-cab span{color:var(--signal)}
.pago-cab b{font-family:var(--serif);font-size:25px;font-weight:500;color:var(--paper)}
.pago-con{font-size:13.5px;color:var(--muted);margin-bottom:14px;line-height:1.5}
.pago-card .btn{width:100%;justify-content:center}
.pago-med{margin-top:9px;text-align:center;font-size:10.5px;color:var(--dim);letter-spacing:.04em}
.pago-ok{color:var(--signal);font-weight:600;font-size:14px}

/* cómo se paga */
.ric-pagar{padding:14px 20px;background:#e4edf8;box-shadow:inset 0 1px 0 var(--hairline)}
.ric-pagar b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin-bottom:5px}
.ric-pagar p{margin:0;font-size:12.5px;line-height:1.65;color:#3c4d64}
@media (min-width:821px){ .ric{place-items:center; padding:20px} .ric-in{border-radius:24px} }

/* ---------- EL CÍRCULO: pasaporte + directorio ---------- */
.estrellas i{font-style:normal;color:#d5dee9;font-size:15px;letter-spacing:1px}
.estrellas i.on{color:#e0a53c}
.estrellas.grande i{font-size:24px}

.pasaporte{padding:28px 30px;background:linear-gradient(150deg,rgba(47,111,196,.10),transparent 62%),#fff}
.pasaporte.n-oro{background:linear-gradient(150deg,rgba(224,165,60,.16),transparent 62%),#fff}
.pasaporte.n-platino{background:linear-gradient(150deg,rgba(13,27,46,.12),transparent 62%),#fff}
.pas-alto{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pas-nivel{padding:5px 13px;border-radius:99px;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  background:var(--marino);color:#fff}
.pas-nivel.n-plata{background:#7d8ea3}.pas-nivel.n-oro{background:#b98520}.pas-nivel.n-platino{background:#0d1b2e}
.pas-nivel.chico{margin-left:auto;font-size:8.5px;padding:4px 10px}
.pas-estado{margin-left:auto;font-size:10.5px;color:var(--muted)}
.pas-estado.e-verificado{color:var(--signal);font-weight:600}
.pas-estado.e-observado{color:var(--danger)}
.pasaporte h2{margin:0 0 12px;font-family:var(--serif);font-size:28px;font-weight:500}
.pas-rep{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pas-rep b{font-family:var(--serif);font-size:30px;color:var(--paper)}
.pas-rep .muted{font-size:12.5px}
.pas-checks{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.chk{padding:6px 12px;border-radius:99px;font-size:11.5px;background:#f2f6fb;color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--hairline)}
.chk.ok{background:rgba(28,138,90,.10);color:#177a4f;box-shadow:inset 0 0 0 1px rgba(28,138,90,.25);font-weight:600}

.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.tarjeta-dir{padding:24px 26px;display:grid;gap:10px;align-content:start}
.dir-alto{display:flex;align-items:center;gap:12px}
.dir-logo{width:48px;height:48px;flex:0 0 auto;border-radius:12px;overflow:hidden;display:grid;place-items:center;
  background:#eef3f9;box-shadow:inset 0 0 0 1px var(--hairline)}
.dir-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.dir-logo span{font-family:var(--serif);font-size:22px;color:var(--azul)}
.dir-id{flex:1;min-width:0;line-height:1.3}
.dir-id b{display:block;font-size:15.5px}
.dir-id small{color:var(--muted);font-size:11.5px}
.dir-rep{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11.5px}
.dir-rep .ver{color:var(--signal);font-weight:600}
.dir-giro{font-size:12px;color:var(--azul);font-weight:600}
.dir-pres{margin:0;font-size:13.5px;line-height:1.6;color:#3c4d64}
.dir-linea{font-size:12.5px;color:#3c4d64;padding:7px 0;box-shadow:inset 0 -1px 0 var(--hairline)}
.dir-linea span{display:inline-block;min-width:56px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.dir-pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}

.cal-stars{display:flex;gap:6px;justify-content:center;margin:18px 0}
.cal-stars button{background:none;border:0;font-size:36px;color:#d5dee9;cursor:pointer;line-height:1;padding:0}
.cal-stars button.on{color:#e0a53c}

/* precios de membresía */
.plan-precios{display:grid;gap:10px;margin:4px 0 6px}
.pmes,.panual{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pmes b,.panual b{font-family:var(--serif);font-size:30px;font-weight:500;color:var(--paper);line-height:1}
.panual b{color:var(--azul)}
.pmes span,.panual span{font-size:12px;color:var(--muted)}
.panual i{font-style:normal;padding:3px 9px;border-radius:99px;background:rgba(28,138,90,.12);color:#177a4f;
  font-size:10px;font-weight:700;letter-spacing:.06em}
.plan-cta{display:grid;gap:9px;justify-items:start;width:100%}
.plan-cta .btn{width:100%;justify-content:center}

/* switch de cobro mensual / anual — se tiene que LEER */
.switch-cobro{display:inline-flex;gap:5px;padding:5px;border-radius:99px;background:#fff;margin:18px 0 4px;
  box-shadow:0 1px 2px rgba(13,27,46,.05),0 6px 20px rgba(13,27,46,.07),inset 0 0 0 1px var(--hairline)}
.switch-cobro button{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border:0;border-radius:99px;
  background:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease)}
.switch-cobro button:hover{color:var(--paper)}
.switch-cobro button.on{background:var(--marino);color:#fff}
.switch-cobro button i{font-style:normal;padding:3px 9px;border-radius:99px;font-size:10px;font-weight:700;
  background:rgba(28,138,90,.14);color:#177a4f;letter-spacing:.04em}
.switch-cobro button.on i{background:rgba(255,255,255,.18);color:#bfe6d2}

.precio-vivo{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.precio-vivo b{font-family:var(--serif);font-size:40px;font-weight:500;color:var(--paper);line-height:1}
.precio-vivo .per-txt{font-size:13px;color:var(--muted)}
.precio-nota{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.5}
.precio-nota b{color:#177a4f}
@media (max-width:820px){ .switch-cobro{width:100%} .switch-cobro button{flex:1;justify-content:center;padding:11px 12px;font-size:12.5px} }

/* IVA y nota fiscal */
.precio-vivo .iva{font-size:12px;font-weight:600;color:var(--azul);
  padding:3px 9px;border-radius:99px;background:rgba(30,77,143,.10)}
.nota-fiscal{margin:20px 0 0;font-size:12px;line-height:1.7;color:var(--muted);
  padding:14px 18px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--hairline)}
.nota-fiscal b{color:var(--paper)}

/* campana de notificaciones */
.top-actions{display:flex;align-items:center;gap:8px}
.campana{position:relative}
.campana.on{background:rgba(28,138,90,.12);box-shadow:inset 0 0 0 1px rgba(28,138,90,.3);color:#177a4f}
.campana-punto{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;
  background:var(--azul-hi);box-shadow:0 0 0 2px #fff;animation:latir 1.8s infinite}

/* ---------- ULTRA RESPONSIVO: va a ser app ---------- */
@media (max-width:820px){
  main{padding:14px 14px 0}
  .visual-head{min-height:230px;padding:24px 22px;border-radius:22px}
  .visual-head::before{background:linear-gradient(0deg,rgba(255,255,255,.97) 30%,rgba(255,255,255,.55));}
  .visual-head .hero-meta{position:static;margin-top:12px;flex-wrap:wrap}
  .section-title{font-size:clamp(26px,7.5vw,34px)}
  .display{font-size:clamp(34px,11vw,52px)}
  .dash-grid,.exp-grid,.planes,.serv-grid,.dir-grid{grid-template-columns:1fr!important}
  .panel{border-radius:20px}
  .credencial{flex-direction:column;align-items:flex-start;text-align:left;gap:14px}
  .cred-num{align-items:flex-start}
  .form2{grid-template-columns:1fr}
  .view-head{flex-direction:column;align-items:flex-start;gap:10px;margin:20px 0 16px}
  .topbar .crumb span{display:none}
  .ses-fila{flex-wrap:wrap;gap:10px;padding:16px}
  .ses-fila .text-link{margin-left:auto}
  .carril{margin:0 -14px;padding:0 14px 12px}
  .vcard{width:min(240px,68vw)}
  .plan{padding:26px 22px}
  .precio-vivo b{font-size:34px}
  .carta-hoja{padding:26px 20px;border-radius:20px}
  .carta-hoja p{font-size:14.5px}
  .pago-card{width:100%}
  .post-cuerpo{padding:20px 22px}
  .nota-fiscal{font-size:11.5px;padding:12px 14px}
}
@media (max-width:420px){
  .switch-cobro button i{display:none}
  .cred-num b{font-size:28px}
  .estrellas i{font-size:13px}
  .dir-pie{flex-direction:column;align-items:stretch}
  .dir-pie .btn{width:100%;justify-content:center}
}
/* que nada desborde nunca en un teléfono */
img,video,iframe{max-width:100%}
.pr,.dir-pres,.burbuja,.post-cuerpo{overflow-wrap:anywhere}

/* ---------- EL ACCESO ---------- */
.brand-mark{display:flex;align-items:center;gap:13px}
.auth-box .brand-mark{margin-bottom:30px}
.brand-orbit{position:relative;width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center}
.brand-orbit::after{content:"";position:absolute;inset:7px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(30,77,143,.28)}
.brand-orbit i{width:7px;height:7px;border-radius:50%;background:var(--azul-hi)}
.rail .brand-orbit i{background:#5c9ae8}
.rail .brand-orbit::after{box-shadow:inset 0 0 0 1px rgba(120,170,235,.35)}

@media (max-width:820px){
  /* en el teléfono el panel es toda la pantalla: se le da carácter con la foto arriba */
  .auth-screen{display:block;background:#fff}
  .auth-visual{display:block;position:relative;min-height:38dvh;height:38dvh;
    background:url("/assets/img/claro-oficina.png") center/cover no-repeat}
  .auth-visual::after{display:none}
  .auth-visual::before{content:"";position:absolute;inset:0;
    background:linear-gradient(0deg,#fff 2%,rgba(255,255,255,.55) 55%,rgba(255,255,255,.15))}
  .auth-copy{display:block;position:absolute;left:22px;right:22px;bottom:14px;max-width:none;z-index:2}
  .auth-copy .eyebrow{margin-bottom:8px}
  .auth-copy .display{font-size:clamp(30px,9vw,40px);line-height:.95}
  .auth-copy .lede{display:none}
  .auth-panel{display:block;min-height:auto;padding:22px 22px calc(34px + env(safe-area-inset-bottom))}
  .auth-box{max-width:none}
  .auth-box .brand-mark{margin-bottom:20px}
  .auth-screen.registering .auth-visual{height:22dvh;min-height:22dvh}
  .auth-screen.registering .auth-copy .display{font-size:26px}
}

/* el Hub le mete margin-bottom:66px a .brand-words en móvil: descoloca la marca del acceso */
@media (max-width:820px){
  .auth-box .brand-mark{margin-bottom:22px!important;justify-content:flex-start}
  .auth-box .brand-words{display:block!important;margin:0!important;font-size:13px!important;line-height:1.25}
  .auth-box .brand-words small{margin-top:3px}
  .auth-box .brand-orbit{width:40px;height:40px}
}

/* ---------- MÚSICA PARA TRABAJAR ---------- */
.mus{position:fixed;inset:0;z-index:88;display:grid;place-items:center;padding:20px;
  background:rgba(13,27,46,.5);backdrop-filter:blur(10px)}
.mus-in{width:min(440px,100%);background:#fff;border-radius:22px;padding:26px 26px 20px;
  box-shadow:0 30px 80px rgba(13,27,46,.3)}
.mus-alto{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mus-sub{margin:8px 0 18px;font-size:13px;color:var(--muted);line-height:1.6}
.mus-lista{display:grid;gap:9px}
.pista{display:flex;align-items:center;gap:13px;padding:11px;border:0;border-radius:15px;cursor:pointer;
  background:#f5f8fc;text-align:left;font:inherit;color:inherit;transition:background .4s var(--ease)}
.pista:hover{background:#eaf1fa}
.pista.on{background:rgba(47,111,196,.12);box-shadow:inset 0 0 0 1px rgba(30,77,143,.28)}
.pista-cover{width:46px;height:46px;flex:0 0 auto;border-radius:11px;background:#dde6f1 center/cover no-repeat}
.pista-id{flex:1;min-width:0;line-height:1.35}
.pista-id b{display:block;font-size:14.5px}
.pista-id small{color:var(--muted);font-size:11.5px}
.pista-play{width:32px;height:32px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--azul);color:#fff;font-size:11px}

.mini-player{position:fixed;z-index:70;left:calc(var(--rail) + 48px);bottom:22px;display:flex;align-items:center;gap:11px;
  padding:9px 12px 9px 9px;border-radius:99px;background:#fff;
  box-shadow:0 10px 34px rgba(13,27,46,.18),inset 0 0 0 1px var(--hairline)}
.mp-cover{width:38px;height:38px;border-radius:50%;background:#dde6f1 center/cover no-repeat;
  animation:girar 9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.mp-id{line-height:1.25;max-width:170px}
.mp-id b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-id small{color:var(--muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.mp-btn,.mp-x{width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;font-size:11px}
.mp-btn{background:var(--azul);color:#fff}
.mp-x{background:rgba(13,27,46,.06);color:var(--muted)}
@media (max-width:820px){
  .mini-player{left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom));justify-content:flex-start}
  .mp-id{flex:1;max-width:none}
}

/* el .lnk heredado del Hub salía como caja gris: aquí es un enlace de verdad */
.lnk{background:none!important;border:0!important;padding:4px 2px!important;
  color:var(--azul);font:inherit;font-size:12.5px;font-weight:600;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;box-shadow:none!important;width:auto!important}
.lnk:hover{color:var(--marino)}
.sala-pie .lnk,.salir-arriba{color:var(--muted);font-weight:400;text-decoration:none}
.sala-pie .lnk:hover,.salir-arriba:hover{color:var(--danger);text-decoration:underline}

/* formulario de evidencia: que respire y se alinee */
.evid-form{display:grid;grid-template-columns:220px 1fr auto;gap:14px;align-items:end}
.evid-form .field{margin:0}
@media (max-width:820px){ .evid-form{grid-template-columns:1fr} .evid-form .btn{width:100%;justify-content:center} }

/* el pasaporte no debe quedar con hueco */
.pasaporte{align-content:start}
.dash-grid{align-items:start}

/* ---------- DIRECTORIO estilo Hub, en claro ---------- */
.directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:16px}
.member-directory-card{position:relative;min-height:auto;padding:0;display:flex;flex-direction:column;
  border-radius:24px;overflow:hidden;background:#fff;
  box-shadow:0 1px 2px rgba(13,27,46,.04),0 10px 34px rgba(13,27,46,.08);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.member-directory-card:hover{transform:translateY(-4px);
  box-shadow:0 2px 6px rgba(13,27,46,.06),0 24px 58px rgba(13,27,46,.14)}
.member-cover{position:relative;height:110px;background:
  linear-gradient(135deg,var(--marino),var(--marino-2) 70%)}
.member-cover::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 78% 40%,rgba(47,111,196,.45),transparent 62%)}
.member-cover-ring{position:absolute;z-index:2;left:24px;bottom:-30px;width:70px;height:70px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;background:#fff;border:0;
  box-shadow:0 0 0 4px #fff,0 8px 20px rgba(13,27,46,.16)}
.member-cover-ring img{width:100%;height:100%;object-fit:contain}
.member-cover-ring b{font-family:var(--serif);font-size:28px;color:var(--azul)}
.level-badge{position:absolute;z-index:2;top:16px;right:16px;padding:5px 12px;border-radius:99px;
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.level-badge.n-oro{background:#c99a2e;box-shadow:none}
.level-badge.n-platino{background:#fff;color:var(--marino)}
.member-cuerpo{flex:1;padding:44px 24px 20px;display:grid;gap:10px;align-content:start}
.member-card-head h3{margin:0;font-family:var(--serif);font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.member-card-head small{color:var(--muted);font-size:12px}
.member-rep{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.member-pres{margin:0;font-size:13.5px;line-height:1.6;color:#3c4d64}
.profile-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.profile-tags .meta-pill{padding:5px 11px;font-size:10px;background:#f2f6fb;color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--hairline);backdrop-filter:none}
.profile-tags .meta-pill.ver{background:rgba(28,138,90,.10);color:#177a4f;box-shadow:inset 0 0 0 1px rgba(28,138,90,.25)}
.member-linea{font-size:12.5px;color:#3c4d64;padding:8px 0;box-shadow:inset 0 -1px 0 var(--hairline)}
.member-linea span{display:inline-block;min-width:54px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.member-card-cta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:auto;padding:16px 24px;box-shadow:inset 0 1px 0 var(--hairline);background:#fbfcfe}
@media (max-width:820px){
  .directory-grid{grid-template-columns:1fr}
  .member-card-cta{flex-direction:column;align-items:stretch}
  .member-card-cta .btn{width:100%;justify-content:center}
}

/* ---------- PANEL DE RAMÓN (dentro de la app) ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px}
.kpi-c{background:#fff;border-radius:16px;padding:18px 20px;
  box-shadow:0 1px 2px rgba(13,27,46,.04),0 8px 26px rgba(13,27,46,.06)}
.kpi-c b{display:block;font-family:var(--serif);font-size:34px;font-weight:500;color:var(--azul);line-height:1}
.kpi-c span{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.mix{display:grid;gap:2px;margin-top:8px}
.mix-fila{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;
  box-shadow:inset 0 -1px 0 var(--hairline)}
.mix-fila:last-child{box-shadow:none}
.mix-fila span{font-size:14px;color:#3c4d64}
.mix-fila b{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--paper)}

.dinero{background:linear-gradient(150deg,rgba(28,138,90,.10),transparent 62%),#fff}
.dinero-n{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.dinero-n b{font-family:var(--serif);font-size:40px;font-weight:500;color:#177a4f;line-height:1}
.dinero-n span{font-size:12px;color:var(--muted)}
.dinero-n.chico b{font-size:22px;color:var(--muted)}

.tabla-wrap{padding:0;overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
.tabla th{text-align:left;padding:14px 16px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);font-weight:700;box-shadow:inset 0 -1px 0 var(--hairline);white-space:nowrap}
.tabla td{padding:13px 16px;box-shadow:inset 0 -1px 0 var(--hairline);vertical-align:middle}
.tabla tr:last-child td{box-shadow:none}
.tabla tbody tr:hover td{background:#f7fafd}
.tabla td b{display:block;font-size:14px}
.tabla td small{color:var(--dim);font-size:11px}
.tabla td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla td.chico{color:var(--muted);font-size:12px;white-space:nowrap}
.tag-plan{padding:4px 10px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.06em;
  background:#f2f6fb;color:var(--muted);white-space:nowrap}
.tag-plan.p-ejecutivo{background:rgba(30,77,143,.12);color:var(--azul)}
.tag-plan.p-elite{background:var(--marino);color:#fff}
.tag-plan.p-vencido{background:rgba(194,65,47,.12);color:var(--danger)}
.bant-n{padding:3px 9px;border-radius:99px;font-weight:700;background:#f2f6fb;color:var(--muted)}
.bant-n.t-tibio{background:rgba(201,138,30,.14);color:#9a6a12}
.bant-n.t-caliente{background:rgba(224,110,60,.16);color:#b3521f}
.bant-n.t-ardiendo{background:rgba(194,65,47,.16);color:var(--danger)}

.act-fila{display:flex;align-items:center;gap:14px;padding:13px 24px;box-shadow:inset 0 -1px 0 var(--hairline);
  font-size:13px;flex-wrap:wrap}
.act-fila:last-child{box-shadow:none}
.act-tipo{padding:4px 10px;border-radius:99px;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:#f2f6fb;color:var(--muted);white-space:nowrap}
.act-tipo.a-registro{background:rgba(47,111,196,.14);color:var(--azul)}
.act-tipo.a-senal_venta,.act-tipo.a-pago_creado{background:rgba(28,138,90,.14);color:#177a4f}
.act-tipo.a-solicita_servicio{background:rgba(201,138,30,.16);color:#9a6a12}
.act-txt{flex:1;min-width:180px;color:#3c4d64;overflow-wrap:anywhere}
.act-hora{color:var(--dim);font-size:11.5px;white-space:nowrap}
@media (max-width:820px){ .kpi-grid{grid-template-columns:repeat(2,1fr)} .kpi-c b{font-size:28px} }
/* ============================================================
   MI AVANCE · clínica empresarial
   ============================================================ */
.avance-head{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;
  padding:42px 46px;background:var(--marino);color:#fff;border-radius:8px;
  box-shadow:0 18px 48px rgba(13,27,46,.16)
}
.avance-head .eyebrow{color:#9fc1ed}.avance-head .section-title{margin:8px 0 10px;color:#fff;font-size:clamp(38px,4vw,58px);line-height:1}
.avance-head-copy p{max-width:640px;margin:0;color:#c2d0e1;font-size:14px;line-height:1.7}
.avance-score{--avance:0;position:relative;display:grid;place-content:center;width:126px;aspect-ratio:1;border-radius:50%;text-align:center;background:conic-gradient(var(--azul-hi) calc(var(--avance)*1%),rgba(255,255,255,.12) 0)}
.avance-score::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--marino);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.avance-score strong,.avance-score span{position:relative}.avance-score strong{font-family:var(--serif);font-size:32px;font-weight:600;font-variant-numeric:tabular-nums}.avance-score span{color:#9fb3ce;font-size:9px}
.avance-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:28px;background:#fff;border-radius:0 0 8px 8px;box-shadow:0 8px 28px rgba(13,27,46,.07)}
.avance-meta>div{padding:17px 24px;border-right:1px solid var(--hairline)}.avance-meta>div:last-child{border:0}
.avance-meta span,.avance-meta b{display:block}.avance-meta span{margin-bottom:4px;color:var(--dim);font-size:9px}.avance-meta b{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.avance-objective{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:42px;align-items:end;padding:32px 4px 34px;border-bottom:1px solid var(--hairline)}
.avance-objective h2{max-width:760px;margin:8px 0 0;font-family:var(--serif);font-size:clamp(28px,3vw,42px);font-weight:600;line-height:1.08;text-wrap:balance}
.avance-objective dl{display:grid;grid-template-columns:1fr 1fr;margin:0;background:#fff;border-radius:8px;box-shadow:inset 0 0 0 1px var(--hairline)}
.avance-objective dl div{padding:18px}.avance-objective dl div+div{border-left:1px solid var(--hairline)}
.avance-objective dt{color:var(--dim);font-size:9px}.avance-objective dd{margin:5px 0 0;font-size:13px;font-weight:600}
.avance-section{padding-top:36px}.avance-section>header{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:16px}
.avance-section>header h2,.avance-checkin h2,.avance-evidence h2,.avance-mentor h2{margin:5px 0 0;font-family:var(--serif);font-size:28px;font-weight:600;line-height:1.1}
.avance-section>header p{margin:0;color:var(--muted);font-size:11px}
.avance-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.avance-metric{min-width:0;padding:21px;background:#fff;border-radius:8px;box-shadow:0 8px 26px rgba(13,27,46,.06)}
.avance-metric>span{display:block;color:var(--muted);font-size:11px}.avance-metric>strong{display:block;margin:12px 0 7px;font-size:25px;font-weight:650;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.avance-metric>strong small{color:var(--muted);font-size:10px}.avance-metric>p{margin:0 0 12px;color:var(--dim);font-size:9px}
.avance-metric .text-link,.avance-action .text-link{padding:0;border:0;background:none;color:var(--azul);font:inherit;font-size:10px;cursor:pointer;text-align:left}
.avance-work-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.8fr);gap:18px;align-items:start}
.avance-actions{min-width:0}.avance-action-list{background:#fff;border-radius:8px;box-shadow:0 8px 26px rgba(13,27,46,.06);overflow:hidden}
.avance-action{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:start;padding:18px 20px;border-bottom:1px solid var(--hairline)}.avance-action:last-child{border:0}
.avance-check{display:grid;place-items:center;width:25px;height:25px;margin-top:1px;padding:0;border:1px solid rgba(30,77,143,.28);border-radius:6px;background:#f7fafd;color:#fff;cursor:pointer}.avance-check svg{width:15px}.avance-action.is-done .avance-check{background:var(--signal);border-color:var(--signal)}
.avance-action h3{margin:0;font-size:13px;font-weight:600;line-height:1.4}.avance-action p{margin:4px 0 0;color:var(--muted);font-size:9px}.avance-action.is-done h3{text-decoration:line-through;color:var(--muted)}
.avance-evidence-note{display:block;margin-top:8px;color:var(--signal);font-size:9px;line-height:1.5}
.avance-inline-form{grid-column:2/-1;display:grid;grid-template-columns:minmax(110px,1fr) minmax(110px,1fr) auto;gap:7px;margin-top:3px}.avance-inline-form[hidden]{display:none}
.avance-inline-form input{min-width:0;padding:10px 11px;border:1px solid rgba(13,27,46,.14);border-radius:6px;background:#f7fafd;color:var(--paper);font-size:11px}.avance-inline-form input:focus{outline:2px solid rgba(47,111,196,.35);outline-offset:1px}
.avance-inline-form button{padding:9px 13px;border:0;border-radius:6px;background:var(--marino);color:#fff;cursor:pointer}.avance-inline-form .form-error{grid-column:1/-1;margin:0}
.medicion-form{grid-template-columns:1fr 1fr}.medicion-form input:first-child,.medicion-form .form-error{grid-column:1/-1}
.avance-side{display:grid;gap:12px;padding-top:36px}.avance-checkin,.avance-evidence{padding:24px;background:#fff;border-radius:8px;box-shadow:0 8px 26px rgba(13,27,46,.06)}
.avance-checkin form{display:grid;gap:12px;margin-top:20px}.avance-checkin label{display:grid;gap:6px}.avance-checkin label>span,.avance-health legend{color:var(--muted);font-size:9px}
.avance-checkin textarea{width:100%;padding:11px 12px;border:1px solid rgba(13,27,46,.14);border-radius:6px;background:#f7fafd;color:var(--paper);font:inherit;font-size:12px;line-height:1.45;resize:vertical}.avance-checkin textarea:focus{outline:2px solid rgba(47,111,196,.35);outline-offset:1px}
.avance-checkin details summary{color:var(--azul);font-size:10px;cursor:pointer}.avance-checkin details label{margin-top:10px}.avance-checkin .btn{width:100%}
.avance-health{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:0;border:0}.avance-health legend{margin-bottom:7px}.avance-health label{position:relative}.avance-health input{position:absolute;opacity:0}.avance-health span{display:grid;place-items:center;min-height:38px;padding:6px;border:1px solid var(--hairline);border-radius:6px;background:#f7fafd;text-align:center;cursor:pointer}.avance-health input:checked+span{border-color:var(--azul);background:rgba(47,111,196,.1);color:var(--azul)}
.avance-evidence blockquote{margin:18px 0 8px;padding-left:15px;border-left:2px solid var(--azul);color:#35465c;font-size:12px;line-height:1.6}.avance-evidence time{color:var(--dim);font-size:9px}.avance-evidence>p{margin:15px 0 0;color:var(--muted);font-size:11px;line-height:1.6}
.avance-mentor{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:18px;padding:28px 30px;border-radius:8px;background:var(--marino);color:#fff}.avance-mentor h2{color:#fff}.avance-mentor p{max-width:620px;margin:8px 0 0;color:#aebed2;font-size:11px;line-height:1.6}.avance-mentor .eyebrow{color:#9fc1ed}.avance-mentor .btn{flex:none}
.avance-inline-empty{grid-column:1/-1;padding:28px;border:1px dashed rgba(13,27,46,.16);border-radius:8px;color:var(--muted);font-size:12px;text-align:center}
.avance-empty{display:grid;justify-items:start;max-width:820px;margin:7vh auto 0;padding:50px;background:#fff;border-radius:8px;box-shadow:0 18px 52px rgba(13,27,46,.08)}.avance-empty-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:25px;border-radius:8px;background:var(--marino);color:#fff}.avance-empty-icon svg{width:25px}.avance-empty .section-title{margin:8px 0 15px;font-size:clamp(36px,5vw,60px)}.avance-empty p{max-width:620px;margin:0 0 25px;color:var(--muted);line-height:1.7}
.avance-error{max-width:620px;margin:8vh auto;padding:34px;background:#fff;border-left:3px solid var(--danger);border-radius:6px;box-shadow:0 14px 42px rgba(13,27,46,.08)}.avance-error b{font-size:18px}.avance-error p{color:var(--muted);line-height:1.6}

@media(max-width:980px){.avance-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.avance-work-grid{grid-template-columns:1fr}.avance-side{grid-template-columns:1fr 1fr;padding-top:0}.avance-inline-form{grid-template-columns:1fr 1fr}.avance-inline-form input:first-child,.avance-inline-form .form-error{grid-column:1/-1}}
@media(max-width:820px){
  .avance-head{grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:28px 20px}.avance-head .section-title{font-size:36px}.avance-head-copy p{font-size:12px}.avance-score{width:82px}.avance-score strong{font-size:23px}
  .avance-meta>div{padding:14px 10px}.avance-meta span{font-size:8px}.avance-meta b{font-size:10px}
  .avance-objective{grid-template-columns:1fr;gap:20px;padding:26px 2px}.avance-objective h2{font-size:30px}
  .avance-section{padding-top:28px}.avance-section>header{align-items:start}.avance-section>header h2,.avance-checkin h2,.avance-evidence h2,.avance-mentor h2{font-size:25px}
  .avance-metrics{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 1px 12px}.avance-metric{flex:0 0:min(78vw,280px);scroll-snap-align:start}
  .avance-side{grid-template-columns:1fr}.avance-action{grid-template-columns:auto minmax(0,1fr)}.avance-action>.text-link{grid-column:2}.avance-inline-form{grid-column:1/-1}
  .avance-mentor{display:grid;padding:24px 20px}.avance-mentor .btn{width:100%}.avance-empty{margin:12px 0 0;padding:32px 22px}.avance-empty .section-title{font-size:38px}
}
@media(max-width:480px){.avance-head{grid-template-columns:1fr}.avance-score{position:absolute;right:28px;top:38px;width:72px}.avance-head-copy{padding-right:70px}.avance-head .section-title{font-size:31px}.avance-objective dl{grid-template-columns:1fr}.avance-objective dl div+div{border-left:0;border-top:1px solid var(--hairline)}.avance-inline-form,.medicion-form{grid-template-columns:1fr}.avance-inline-form input,.avance-inline-form input:first-child,.avance-inline-form button{grid-column:1}.avance-health{grid-template-columns:1fr}.avance-health span{justify-content:start;padding-left:11px}.avance-section>header p{display:none}}