/* ============ TOKENS ============ */
:root{
  --ink:#1B1B2F;
  --ink-soft:#5B5A78;
  --bg:#F6F5FF;
  --surface:#FFFFFF;
  --surface-2:#ECE9FF;
  --brand:#4B3FFF;
  --brand-dark:#332AC2;
  --coral:#FF6B4A;
  --green:#17B978;
  --amber:#FF9F1C;
  --border:#E4E1FA;
  --shadow: 0 8px 24px rgba(75,63,255,0.12);
  --radius-lg: 22px;
  --radius-md: 14px;
  --font-head: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3{font-family:var(--font-head); margin:0 0 8px; line-height:1.15;}
p{margin:0 0 8px; color:var(--ink-soft); line-height:1.5;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
.hidden{display:none !important;}

/* ============ STATUS BAR ============ */
#status-bar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:8px;
  padding:10px 16px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  font-size:13px; font-weight:600;
}
#status-dot{width:9px; height:9px; border-radius:50%; background:var(--ink-soft); flex-shrink:0;}
#status-bar.online #status-dot{background:var(--green); box-shadow:0 0 0 4px rgba(23,185,120,0.15);}
#status-bar.offline #status-dot{background:var(--amber); box-shadow:0 0 0 4px rgba(255,159,28,0.15);}
#status-text{flex:1; color:var(--ink-soft);}
#token-pill{
  display:flex; align-items:center; gap:4px;
  background:var(--surface-2); color:var(--brand-dark);
  padding:4px 10px; border-radius:999px; font-weight:700;
}

/* ============ SCREENS ============ */
.screen{display:none;}
.screen.active{display:block;}

/* ============ ONBOARDING ============ */
#screen-onboarding.active{
  display:flex; flex-direction:column; height:100vh; height:100dvh;
}
.carousel{
  flex:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.carousel::-webkit-scrollbar{display:none;}
.slide{
  min-width:100%; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:32px 28px; gap:4px;
}
.slide-emoji{font-size:64px; margin-bottom:12px;}
.slide h1{font-size:26px; max-width:340px;}
.slide p{font-size:15px; max-width:320px;}

.register-form{
  width:100%; max-width:340px; margin-top:18px;
  display:flex; flex-direction:column; gap:14px; text-align:left;
}
.register-form label{font-size:13px; font-weight:600; color:var(--ink); display:flex; flex-direction:column; gap:6px;}
.register-form .opt{font-weight:400; color:var(--ink-soft);}
.register-form input, .register-form select{
  padding:12px 14px; border-radius:var(--radius-md); border:1.5px solid var(--border);
  font-size:15px; background:var(--surface); color:var(--ink);
}
.register-form input:focus, .register-form select:focus{outline:2px solid var(--brand); outline-offset:1px;}

.onboarding-footer{
  padding:16px 20px 24px; display:flex; align-items:center; justify-content:space-between;
  background:var(--surface); border-top:1px solid var(--border);
}
.dots{display:flex; gap:6px;}
.dots span{width:7px; height:7px; border-radius:50%; background:var(--border);}
.dots span.active{background:var(--brand); width:20px; border-radius:4px;}
.btn-next{
  background:var(--brand); color:#fff; border:none; padding:12px 26px;
  border-radius:999px; font-weight:700; font-size:15px;
}

.btn-primary{
  background:var(--brand); color:#fff; border:none; padding:14px 18px;
  border-radius:var(--radius-md); font-weight:700; font-size:15px; width:100%;
}
.btn-primary:disabled{opacity:0.45;}
.btn-secondary{
  background:var(--surface-2); color:var(--brand-dark); border:none; padding:13px 16px;
  border-radius:var(--radius-md); font-weight:700; font-size:14px; flex:1;
}
.login-toggle{width:100%; max-width:340px; margin-top:14px;}

/* ============ APP SHELL ============ */
#app-shell.active{display:block; padding-bottom:88px;}
.page{display:none; padding:20px; animation:fade .25s ease;}
.page.active{display:block;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.page-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.page-head.simple h1{font-size:21px;}
.eyebrow-greeting{font-size:13px; margin:0; color:var(--ink-soft);}
#home-nombre{font-size:24px; margin:0;}
.avatar-grade{
  width:46px; height:46px; border-radius:50%; background:var(--brand);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700;
}

.home-cards{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px;}
.home-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px 14px; text-align:left; display:flex; flex-direction:column; gap:4px;
  box-shadow:var(--shadow);
}
.hc-icon{font-size:26px;}
.hc-title{font-family:var(--font-head); font-weight:700; font-size:15px;}
.hc-sub{font-size:12px; color:var(--ink-soft);}

.mini-codigo{font-size:11px; color:var(--ink-soft); margin:2px 0 0; font-weight:600; letter-spacing:0.5px;}
#perfil-codigo-mini{cursor:pointer;}
#btn-copy-link{margin-bottom:10px;}
.bono-card{background:linear-gradient(135deg, #17B978, #0E8F5C); color:#fff;}
.bono-card p{color:rgba(255,255,255,0.85);}
.bono-card h2{color:#fff;}
.bono-card .btn-secondary{background:rgba(255,255,255,0.2); color:#fff;}

/* ============ ENCICLOPEDIA ============ */
.subject-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.subject-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px; text-align:left; box-shadow:var(--shadow); position:relative;
}
.subject-card .sc-emoji{font-size:28px;}
.subject-card .sc-name{font-family:var(--font-head); font-weight:700; font-size:15px; display:block; margin:8px 0 2px;}
.subject-card .sc-status{font-size:11px; color:var(--ink-soft);}
.subject-card .sc-download{
  margin-top:10px; width:100%; padding:8px; border-radius:10px; border:none;
  background:var(--surface-2); color:var(--brand-dark); font-weight:700; font-size:12px;
}
.subject-card.downloaded .sc-download{background:rgba(23,185,120,0.15); color:var(--green);}

.back-link{background:none; border:none; color:var(--brand); font-weight:600; padding:0 0 14px; font-size:14px;}
.topic-row{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px; margin-bottom:10px;
}
.topic-row .tr-name{font-weight:700; font-size:14px;}
.topic-row .tr-sub{font-size:12px; color:var(--ink-soft);}
.topic-row .tr-badge{font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px;}
.tr-badge.free{background:rgba(23,185,120,0.15); color:var(--green);}
.tr-badge.locked{background:rgba(75,63,255,0.12); color:var(--brand-dark);}

.solicitar-tema-card{
  background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-md);
  padding:14px; margin:14px 0 4px;
}
.stc-title{font-weight:700; font-size:13px; margin-bottom:8px;}
.stc-row{display:flex; gap:8px; margin-bottom:8px;}
.stc-row select{flex:1; padding:8px; border-radius:8px; border:1px solid var(--border); font-size:12px;}
#solicitar-tema-descripcion{width:100%; padding:10px; border-radius:8px; border:1px solid var(--border); font-size:13px; margin-bottom:8px; resize:vertical;}
#solicitar-tema-form .btn-secondary{width:100%;}

.topic-detail{position:relative;}
.tag{display:inline-block; font-size:11px; font-weight:700; color:var(--brand-dark); background:var(--surface-2); padding:4px 10px; border-radius:999px; margin-bottom:14px;}
.blurable{position:relative;}
.blurable.locked{filter:blur(7px); user-select:none; pointer-events:none;}
#enc-detail-contenido p{margin-bottom:10px;}
.auto-q{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:10px;}
.auto-q p{font-weight:600; color:var(--ink); margin-bottom:6px;}
.auto-q ul{margin:0; padding-left:18px; color:var(--ink-soft); font-size:14px;}
.auto-q .respuesta{margin-top:8px; font-size:13px; color:var(--green); font-weight:600;}

.lock-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:8px; padding:24px;
}
.lock-overlay.static{position:static; min-height:60vh;}
.lock-icon{font-size:40px;}
.lock-overlay .btn-primary,
.lock-overlay .btn-secondary{max-width:260px;}
.progress-text{font-weight:700; color:var(--brand-dark);}

.unlock-divider{display:flex; align-items:center; gap:10px; width:100%; max-width:260px; margin:6px 0; color:var(--ink-soft); font-size:12px; font-weight:700;}
.unlock-divider::before,.unlock-divider::after{content:''; flex:1; height:1px; background:var(--border);}
.unlock-alt-text{font-size:13px; color:var(--ink-soft); margin:0;}

/* ============ CAMARA IA ============ */
.notice{
  display:flex; gap:10px; align-items:flex-start; background:rgba(255,159,28,0.12);
  border:1px solid rgba(255,159,28,0.3); border-radius:var(--radius-md); padding:14px; font-size:14px;
}
.notice span{font-size:20px;}
.notice p{color:var(--ink); margin:0;}

.ai-modes{display:flex; flex-direction:column; gap:10px; margin-bottom:16px;}
.ai-mode{
  display:flex; align-items:center; gap:10px; text-align:left;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-md);
  padding:13px 14px; font-weight:600; font-size:14px; color:var(--ink);
}
.ai-mode span{font-size:20px;}
.ai-mode em{margin-left:auto; font-style:normal; font-size:12px; font-weight:700; color:var(--brand-dark);}
.ai-mode.active{border-color:var(--brand); background:var(--surface-2);}

.btn-historial-icon{background:var(--surface-2); border:none; width:38px; height:38px; border-radius:50%; font-size:17px;}

.respuesta-modos{display:flex; gap:8px; margin-bottom:16px;}
.resp-mode{
  flex:1; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-md);
  padding:9px 6px; font-weight:700; font-size:12.5px; color:var(--ink-soft);
}
.resp-mode.active{border-color:var(--brand); background:var(--surface-2); color:var(--brand-dark);}

/* ============ HISTORIAL ============ */
.historial-lista{display:flex; flex-direction:column; gap:10px;}
.historial-item{
  display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:10px 12px; text-align:left;
}
.historial-item .hi-icon{font-size:22px;}
.historial-item .hi-info{flex:1;}
.historial-item .hi-titulo{font-weight:700; font-size:13.5px;}
.historial-item .hi-fecha{font-size:11px; color:var(--ink-soft);}
.historial-empty{color:var(--ink-soft); font-size:14px; text-align:center; padding:40px 0;}
.historial-detalle-img{width:100%; border-radius:var(--radius-md); margin-bottom:12px;}
.historial-detalle-meta{font-size:12px; color:var(--ink-soft); margin-bottom:10px;}
#historial-detalle-reproducir, #historial-detalle-eliminar{width:100%; margin-top:10px;}

.upload-zone{margin-bottom:16px;}
.upload-options{display:flex; gap:10px;}
.upload-label{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border:2px dashed var(--border); border-radius:var(--radius-lg); padding:26px 12px;
  color:var(--ink-soft); font-weight:600; text-align:center;
}
.upload-icon{font-size:32px;}
#camara-preview{width:100%; border-radius:var(--radius-md); margin-top:10px; max-height:260px; object-fit:cover;}
#audio-text-input{
  width:100%; min-height:110px; border:1.5px solid var(--border); border-radius:var(--radius-md);
  padding:12px 14px; font-size:14px; margin-bottom:14px; resize:vertical;
}
.ai-result{
  margin-top:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px; font-size:14px; line-height:1.6; white-space:pre-wrap;
}
#camara-audio{width:100%; margin-top:12px;}

/* ============ CHAT ============ */
.presencia-banner{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:9px 14px; margin-bottom:16px; font-size:13px; font-weight:600;
}
.presencia-dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(23,185,120,0.15); flex-shrink:0;}
.btn-scan{
  width:100%; background:var(--surface-2); color:var(--brand-dark); border:none; padding:13px;
  border-radius:var(--radius-md); font-weight:700; font-size:14px; margin-bottom:6px;
}
.scan-hint{font-size:12px; margin-bottom:16px;}
.bt-actions{display:flex; gap:10px; margin-bottom:14px;}
.bt-status{text-align:center; font-size:13px; color:var(--ink-soft); margin-bottom:10px;}
.bt-messages{
  min-height:40vh; max-height:48vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
  margin-bottom:12px; padding:4px;
}
.bt-msg{max-width:78%; padding:9px 13px; border-radius:14px; font-size:14px;}
.bt-msg.mine{align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:4px;}
.bt-msg.theirs{align-self:flex-start; background:var(--surface-2); color:var(--ink); border-bottom-left-radius:4px;}
.bt-msg.system{align-self:center; background:transparent; color:var(--ink-soft); font-size:12px;}
.bt-form{display:flex; gap:8px;}
.bt-form input{flex:1; padding:12px 14px; border-radius:999px; border:1.5px solid var(--border);}
.bt-form button{background:var(--brand); color:#fff; border:none; padding:0 18px; border-radius:999px; font-weight:700;}

/* ============ PERFIL ============ */
.profile-card{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.profile-avatar{
  width:56px; height:56px; border-radius:50%; background:var(--coral); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:22px; font-weight:700;
}
.profile-card p{margin:0; font-size:13px;}

.tokens-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; margin-bottom:16px; box-shadow:var(--shadow);
}
.tokens-card p{margin:0 0 2px; font-size:13px;}
.tokens-card h2{margin-bottom:12px;}

.referral-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; margin-bottom:16px;
}
.rc-title{font-weight:700; color:var(--ink); font-size:14px; margin-bottom:8px;}
.progress-bar{height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin-bottom:8px;}
.progress-fill{height:100%; background:linear-gradient(90deg, var(--brand), var(--coral)); border-radius:999px; transition:width .3s ease;}
.rc-next{font-size:12px; color:var(--ink-soft); margin-bottom:14px;}

.btn-whatsapp{
  width:100%; margin-top:12px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:#25D366; color:#fff; border:none; padding:12px; border-radius:var(--radius-md);
  font-weight:700; font-size:14px;
}

.tier-list{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;}
.tier-row{display:flex; justify-content:space-between; padding:12px 16px; font-size:13px; border-bottom:1px solid var(--border);}
.tier-row:last-child{border-bottom:none;}
.tier-row span:first-child{color:var(--ink-soft);}
.tier-row span:last-child{font-weight:700; color:var(--brand-dark);}

/* ============ RECARGA ============ */
.pack-card{
  background:linear-gradient(135deg, var(--coral), #FF8A6B); color:#fff;
  border-radius:var(--radius-lg); padding:18px; margin-bottom:14px;
}
.pack-card p{color:rgba(255,255,255,0.85); margin-bottom:4px;}
.pack-card h2{margin:0; color:#fff;}
.nequi-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px; margin-bottom:18px; text-align:center;
}
.nequi-card h3{font-size:24px; letter-spacing:1px; margin:6px 0;}
.nequi-note{font-size:12px;}
.pago-note{font-size:12px; text-align:center; margin-top:12px;}

/* ============ NAV ============ */
#bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  display:flex; background:var(--surface); border-top:1px solid var(--border);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
#bottom-nav button{
  flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:10.5px; font-weight:600; color:var(--ink-soft); padding:6px 0;
}
#bottom-nav button span{font-size:20px;}
#bottom-nav button.active{color:var(--brand);}

/* ============ TOAST ============ */
.toast{
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:11px 20px; border-radius:999px;
  font-size:13px; font-weight:600; z-index:100; box-shadow:0 8px 20px rgba(0,0,0,0.25);
  max-width:88%; text-align:center;
}

/* ============ PLANES DE RECARGA ============ */
.planes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px;}
.plan-card{
  background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-lg);
  padding:14px 8px; text-align:center; display:flex; flex-direction:column; gap:2px;
}
.plan-card.active{border-color:var(--brand); background:var(--surface-2);}
.plan-tokens{font-family:var(--font-head); font-size:22px; font-weight:800; color:var(--brand-dark);}
.plan-label{font-size:11px; color:var(--ink-soft);}
.plan-precio{font-size:12px; font-weight:700; margin-top:4px;}
.pago-plan-resumen{font-size:13px; font-weight:600; color:var(--brand-dark); text-align:center; margin-bottom:4px;}
.nequi-qr{width:160px; height:160px; object-fit:contain; margin:10px auto; display:block; border-radius:12px; background:#fff;}
.llave-pago-row{border-top:1px dashed var(--border); margin-top:12px; padding-top:12px;}
.llave-pago-row p{margin-bottom:2px;}
.llave-pago-row h3{font-size:18px; color:var(--brand-dark);}

/* ============ ENCICLOPEDIA: refrescar temas ============ */
.topics-header-row{display:flex; align-items:center; justify-content:space-between;}
.btn-refresh-temas{background:var(--surface-2); border:none; border-radius:999px; width:34px; height:34px; font-size:16px;}

/* ============ ADMIN: pestañas internas ============ */
.admin-tabs{display:flex; gap:6px; margin-bottom:16px; overflow-x:auto;}
.admin-tab{
  background:var(--surface-2); color:var(--ink-soft); border:none; padding:8px 14px;
  border-radius:999px; font-weight:700; font-size:12.5px; white-space:nowrap;
}
.admin-tab.active{background:var(--brand); color:#fff;}
.admin-subview{display:none;}
.admin-subview.active{display:block;}

/* ============ ADMIN ============ */
.admin-hint{font-size:13px; margin-bottom:14px;}
.admin-toolbar{display:flex; gap:10px; margin-bottom:16px;}
.admin-pago-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:14px 16px; margin-bottom:12px;
}
.admin-pago-card p{margin:2px 0; font-size:13px; color:var(--ink);}
.admin-pago-card p strong{color:var(--ink-soft); font-weight:600;}
.admin-pago-actions{display:flex; gap:8px; margin-top:10px;}
.admin-pago-actions button{
  flex:1; padding:9px; border-radius:10px; border:none; font-weight:700; font-size:13px;
}
.btn-approve{background:rgba(23,185,120,0.15); color:var(--green);}
.btn-reject{background:rgba(255,107,74,0.15); color:var(--coral);}
.admin-empty{text-align:center; color:var(--ink-soft); font-size:14px; padding:30px 0;}

@media (min-width:480px){
  body{max-width:480px; margin:0 auto; box-shadow:0 0 40px rgba(0,0,0,0.06);}
  #status-bar, #bottom-nav{max-width:480px; left:50%; transform:translateX(-50%); right:auto; width:100%;}
}