/* =====================================================================
   albion-archmage — tema grimorio arcano
   Mobile first. Sin dependencias externas (funciona offline).
   ===================================================================== */

:root{
  --bg:#0a0812;
  --bg-2:#0f0b1c;
  --surface:#151029;
  --surface-2:#1c1533;
  --surface-3:#241a42;
  --line:#2e2350;
  --line-soft:#241b40;
  --ink:#ece7fb;
  --ink-2:#b4a9d6;
  --ink-3:#7f739f;
  --gold:#e0b862;
  --gold-dim:#a3853f;
  --arcane:#a78bfa;
  --arcane-2:#7c5cf0;
  --ember:#fb7185;
  --ok:#4ade80;
  --warn:#f59e0b;
  --danger:#ef4444;
  --r:16px;
  --r-s:11px;
  --sh:0 10px 34px rgba(0,0,0,.5);
  --sh-glow:0 0 0 1px rgba(167,139,250,.16), 0 8px 30px rgba(124,92,240,.14);
  --safe-b:env(safe-area-inset-bottom,0px);
  --tab-h:60px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  font-size:16px;
  line-height:1.6;
  padding-bottom:calc(var(--tab-h) + var(--safe-b) + 14px);
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* ------------------------------------------------------ fondo rúnico */
.rune-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(124,92,240,.20), transparent 62%),
    radial-gradient(700px 460px at 8% 12%, rgba(224,184,98,.075), transparent 60%),
    radial-gradient(800px 620px at 50% 108%, rgba(167,139,250,.11), transparent 65%),
    linear-gradient(178deg,var(--bg) 0%,var(--bg-2) 48%,#08060f 100%);
}
.rune-bg::after{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 46px,rgba(167,139,250,.028) 46px 47px),
    repeating-linear-gradient(90deg,transparent 0 46px,rgba(167,139,250,.028) 46px 47px);
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
}

/* ---------------------------------------------------------- topbar */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-top,0px));
  padding-top:calc(12px + env(safe-area-inset-top,0px));
  background:linear-gradient(180deg,rgba(10,8,18,.96),rgba(10,8,18,.80) 70%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(46,35,80,.55);
}
.brand{display:flex; align-items:center; gap:11px; min-width:0}
.brand-sigil{
  color:var(--gold); display:grid; place-items:center;
  width:40px; height:40px; flex:0 0 40px; border-radius:12px;
  background:radial-gradient(circle at 50% 40%,rgba(224,184,98,.18),rgba(224,184,98,.04));
  border:1px solid rgba(224,184,98,.28);
  animation:sigil 9s ease-in-out infinite;
}
@keyframes sigil{
  0%,100%{transform:rotate(0deg);box-shadow:0 0 0 rgba(224,184,98,0)}
  50%{transform:rotate(180deg);box-shadow:0 0 18px rgba(224,184,98,.22)}
}
.brand-txt{min-width:0}
.brand h1{
  margin:0; font-size:1.02rem; font-weight:650; letter-spacing:.4px;
  font-family:Georgia,'Times New Roman',serif;
  background:linear-gradient(92deg,#f6e9c8,var(--gold) 45%,#c9a5f5);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand p{margin:0; font-size:.665rem; color:var(--ink-3); letter-spacing:.55px; text-transform:uppercase}

.icon-btn{
  flex:0 0 42px; width:42px; height:42px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink-2); display:grid; place-items:center; cursor:pointer;
  transition:.22s cubic-bezier(.34,1.4,.64,1);
}
.icon-btn:active{transform:scale(.9); color:var(--gold); border-color:var(--gold-dim)}

/* ------------------------------------------------------------ main */
main{padding:4px 15px 28px; max-width:720px; margin:0 auto}
.view{animation:viewIn .34s cubic-bezier(.22,.9,.3,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
[hidden]{display:none !important}

.view-head{margin:18px 2px 16px}
.view-head h2{
  margin:0 0 3px; font-size:1.5rem; font-weight:640; letter-spacing:-.2px;
  font-family:Georgia,serif; color:#f4eeff;
}
.view-head p{margin:0; color:var(--ink-3); font-size:.87rem}

.sub-h{
  margin:26px 2px 12px; font-size:1.02rem; font-weight:640;
  font-family:Georgia,serif; color:var(--gold);
}

/* ------------------------------------------------------------ HERO */
.hero{margin-top:14px}
.eyebrow{
  margin:0 0 9px 2px; font-size:.68rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold-dim); font-weight:640;
}
.hero-card{
  position:relative; overflow:hidden;
  background:linear-gradient(158deg,var(--surface-3),var(--surface) 62%);
  border:1px solid var(--line); border-radius:20px; padding:20px 18px 18px;
  box-shadow:var(--sh),var(--sh-glow);
}
.hero-card::before{
  content:''; position:absolute; top:-64px; right:-64px; width:190px; height:190px;
  border-radius:50%; background:radial-gradient(circle,rgba(167,139,250,.24),transparent 68%);
  animation:orb 7s ease-in-out infinite;
}
@keyframes orb{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.22);opacity:1}}
.hero-phase{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  font-size:.68rem; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  padding:4px 11px; border-radius:99px; margin-bottom:12px;
}
.hero-goal{
  position:relative; margin:0 0 9px; font-size:1.33rem; line-height:1.36; font-weight:620;
  font-family:Georgia,serif; color:#fbf8ff; letter-spacing:-.2px;
}
.hero-why{position:relative; margin:0 0 16px; color:var(--ink-2); font-size:.89rem}
.hero-bar{position:relative; height:7px; border-radius:99px; background:rgba(0,0,0,.42); overflow:hidden; margin-bottom:7px}
.hero-bar-fill{
  height:100%; border-radius:99px; width:0;
  background:linear-gradient(90deg,var(--arcane-2),var(--arcane),var(--gold));
  transition:width .75s cubic-bezier(.22,.9,.3,1);
  box-shadow:0 0 12px rgba(167,139,250,.55);
}
.hero-count{position:relative; margin:0 0 15px; font-size:.75rem; color:var(--ink-3)}

.btn-primary{
  position:relative; width:100%; min-height:50px; border:0; border-radius:13px;
  background:linear-gradient(96deg,var(--arcane-2),#9b7af5);
  color:#fff; font-size:.97rem; font-weight:640; cursor:pointer;
  letter-spacing:.2px; box-shadow:0 6px 22px rgba(124,92,240,.42);
  transition:.2s cubic-bezier(.34,1.4,.64,1);
  font-family:inherit;
}
.btn-primary:active{transform:scale(.965); box-shadow:0 3px 12px rgba(124,92,240,.4)}
.btn-primary[disabled]{opacity:.42; box-shadow:none}

.btn-ghost{
  width:auto; min-height:44px; padding:0 17px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  font-size:.86rem; font-weight:600; cursor:pointer; font-family:inherit;
  transition:.2s cubic-bezier(.34,1.4,.64,1);
}
.btn-ghost:active{transform:scale(.96); border-color:var(--arcane)}
.btn-ghost.wide{width:100%; margin-top:16px}

/* ------------------------------------------------------ quick grid */
.quick-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:16px 0}
.quick{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 4px 12px; border-radius:15px; cursor:pointer; font-family:inherit;
  background:var(--surface); border:1px solid var(--line-soft); color:var(--ink-2);
  transition:.22s cubic-bezier(.34,1.4,.64,1);
}
.quick:active{transform:scale(.93); background:var(--surface-2); border-color:var(--arcane); color:var(--ink)}
.quick-ico{font-size:1.28rem; line-height:1; color:var(--gold)}
.quick-t{font-size:.665rem; line-height:1.28; text-align:center; font-weight:600}

/* ----------------------------------------------------------- panel */
.panel{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:17px 16px; margin:14px 0;
}
.panel h3{
  margin:0 0 10px; font-size:1.02rem; font-weight:640;
  font-family:Georgia,serif; color:var(--gold);
}
.panel p{margin:0 0 10px; font-size:.885rem; color:var(--ink-2)}
.panel p:last-of-type{margin-bottom:0}
.panel strong{color:var(--ink); font-weight:640}
.verdict{border-left:3px solid var(--gold)}
.verdict .btn-ghost{margin-top:13px}

.rule-box{
  margin-top:14px !important; padding:13px 14px; border-radius:12px;
  background:linear-gradient(120deg,rgba(239,68,68,.13),rgba(239,68,68,.05));
  border:1px solid rgba(239,68,68,.28); font-size:.845rem !important; color:#ffd9d9 !important;
}

/* ----------------------------------------------------------- zonas */
.zonas{display:flex; flex-direction:column; gap:7px}
.zona{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:10px 12px; border-radius:11px; background:var(--surface-2);
  border-left:3px solid var(--zc,var(--line));
}
.zona-c{font-size:1.05rem}
.zona-n{font-size:.8rem; font-weight:640; color:var(--ink)}
.zona-p{font-size:.7rem; color:var(--ink-3); display:block; margin-top:1px}
.zona-m{font-size:.66rem; color:var(--ink-3); text-align:right; white-space:nowrap; line-height:1.45}
.zona-m b{display:block; color:var(--gold); font-weight:640}

/* -------------------------------------------------- progreso global */
.global-progress{
  background:linear-gradient(150deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:18px;
}
.gp-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px}
.gp-top span:first-child{font-size:.75rem; text-transform:uppercase; letter-spacing:1.1px; color:var(--ink-3); font-weight:640}
.gp-top span:last-child{font-size:1.5rem; font-weight:680; font-family:Georgia,serif; color:var(--gold)}
.gp-bar{height:9px; border-radius:99px; background:rgba(0,0,0,.42); overflow:hidden}
.gp-fill{
  height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--ok),var(--arcane) 55%,var(--gold));
  transition:width .8s cubic-bezier(.22,.9,.3,1); box-shadow:0 0 14px rgba(167,139,250,.5);
}
.gp-sub{margin:9px 0 0; font-size:.76rem; color:var(--ink-3)}

/* ------------------------------------------------------------ fase */
.fase{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r); margin-bottom:13px; overflow:hidden;
  border-left:3px solid var(--fc);
}
.fase-head{
  display:flex; align-items:center; gap:12px; padding:15px 15px;
  cursor:pointer; user-select:none; background:none; border:0; width:100%;
  text-align:left; font-family:inherit; color:inherit;
}
.fase-head:active{background:var(--surface-2)}
.fase-ring{
  flex:0 0 46px; width:46px; height:46px; position:relative; display:grid; place-items:center;
}
.fase-ring svg{position:absolute; inset:0; transform:rotate(-90deg)}
.fase-ring span{font-size:.7rem; font-weight:700; color:var(--fc)}
.fase-meta{flex:1; min-width:0}
.fase-n{font-size:.63rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--fc); font-weight:700}
.fase-t{font-size:.99rem; font-weight:620; font-family:Georgia,serif; color:var(--ink); margin:1px 0 2px; line-height:1.3}
.fase-p{font-size:.72rem; color:var(--ink-3)}
.fase-chev{flex:0 0 20px; color:var(--ink-3); transition:transform .3s cubic-bezier(.22,.9,.3,1)}
.fase.open .fase-chev{transform:rotate(180deg)}

.fase-body{
  max-height:0; overflow:hidden;
  transition:max-height .42s cubic-bezier(.22,.9,.3,1),opacity .3s;
  opacity:0;
}
.fase.open .fase-body{max-height:2600px; opacity:1}
.fase-inner{padding:0 15px 15px}
.fase-resumen{
  font-size:.845rem; color:var(--ink-2); margin:0 0 13px; padding:11px 12px;
  background:var(--surface-2); border-radius:10px; border-left:2px solid var(--fc);
}
.fase-info{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.fi{
  font-size:.68rem; padding:5px 10px; border-radius:99px;
  background:var(--surface-2); border:1px solid var(--line-soft); color:var(--ink-2);
}
.fi b{color:var(--gold); font-weight:640}

/* ------------------------------------------------------------ tarea */
.tarea{
  display:flex; align-items:flex-start; gap:11px; padding:11px 12px; margin-bottom:7px;
  background:var(--surface-2); border:1px solid transparent; border-radius:11px;
  cursor:pointer; transition:.2s; font-family:inherit; text-align:left; width:100%; color:inherit;
}
.tarea:active{transform:scale(.985)}
.tarea.done{background:rgba(74,222,128,.075); border-color:rgba(74,222,128,.24)}
.tk{
  flex:0 0 21px; width:21px; height:21px; border-radius:6.5px; margin-top:1px;
  border:2px solid var(--line); display:grid; place-items:center;
  transition:.25s cubic-bezier(.34,1.5,.64,1);
}
.tarea.done .tk{background:var(--ok); border-color:var(--ok); transform:scale(1.06)}
.tk svg{opacity:0; transform:scale(.4); transition:.25s cubic-bezier(.34,1.6,.64,1)}
.tarea.done .tk svg{opacity:1; transform:scale(1)}
.tt{flex:1; font-size:.855rem; line-height:1.45; color:var(--ink)}
.tarea.done .tt{color:var(--ink-3); text-decoration:line-through; text-decoration-color:rgba(127,115,159,.5)}
.tn{display:block; font-size:.72rem; color:var(--gold-dim); margin-top:3px; text-decoration:none !important}

.fase-reglas{margin-top:15px; padding:12px 13px; border-radius:11px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.22)}
.fase-reglas h4{margin:0 0 8px; font-size:.74rem; text-transform:uppercase; letter-spacing:1px; color:var(--warn)}
.fase-reglas li{font-size:.815rem; color:#f5e2c0; margin-bottom:6px; line-height:1.5}
.fase-reglas ul{margin:0; padding-left:17px}
.fase-reglas li:last-child{margin-bottom:0}

/* ------------------------------------------------------------ ramas */
.legend-inv{
  font-size:.74rem; color:var(--ink-3); margin:0 2px 14px;
  display:flex; align-items:center; gap:7px;
}
.li-dot{width:26px; height:5px; border-radius:99px; background:linear-gradient(90deg,var(--arcane-2),var(--gold)); flex:0 0 26px}
.legend-inv em{color:var(--ink-2); font-style:normal}

.rama{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:15px; margin-bottom:12px; cursor:pointer; position:relative; overflow:hidden;
  transition:.24s cubic-bezier(.34,1.3,.64,1); border-left:3px solid var(--rc);
  font-family:inherit; text-align:left; width:100%; color:inherit; display:block;
}
.rama:active{transform:scale(.982); background:var(--surface-2)}
.rama.rec{box-shadow:0 0 0 1px rgba(224,184,98,.24), 0 6px 24px rgba(224,184,98,.09)}
.rama-badge{
  position:absolute; top:0; right:0; font-size:.6rem; font-weight:700; letter-spacing:.9px;
  text-transform:uppercase; padding:4px 11px; border-radius:0 0 0 11px;
  background:linear-gradient(96deg,var(--gold-dim),var(--gold)); color:#241a07;
}
.rama-top{display:flex; align-items:center; gap:11px; margin-bottom:9px}
.rama-ico{
  flex:0 0 42px; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  font-size:1.35rem; background:color-mix(in srgb,var(--rc) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--rc) 34%,transparent);
}
.rama-h{flex:1; min-width:0}
.rama-n{font-size:1.06rem; font-weight:640; font-family:Georgia,serif; color:var(--ink); line-height:1.25}
.rama-r{font-size:.735rem; color:var(--rc); font-weight:600; margin-top:1px}
.rama-fant{font-size:.825rem; color:var(--ink-2); margin:0 0 12px; line-height:1.5}
.rama-verd{
  font-size:.795rem; padding:9px 11px; border-radius:9px; margin:0 0 12px; line-height:1.5;
  background:var(--surface-2); color:var(--ink-2); border-left:2px solid var(--rc);
}
.rama.aviso .rama-verd{background:rgba(239,68,68,.1); border-left-color:var(--danger); color:#ffd6d6}
.rama-bars{display:flex; flex-direction:column; gap:8px; margin-bottom:11px}
.bar-row{display:grid; grid-template-columns:98px 1fr auto; align-items:center; gap:9px}
.bar-lbl{font-size:.685rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.6px}
.bar-track{height:5px; border-radius:99px; background:rgba(0,0,0,.4); overflow:hidden}
.bar-fill{height:100%; border-radius:99px; transition:width .7s cubic-bezier(.22,.9,.3,1)}
.bar-val{font-size:.665rem; color:var(--ink-3); min-width:34px; text-align:right}
.rama-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:11px; border-top:1px solid var(--line-soft)}
.rama-cost{font-size:.75rem; color:var(--ink-3)}
.rama-cost b{color:var(--gold); font-weight:640; font-size:.86rem}
.rama-more{font-size:.735rem; color:var(--arcane); font-weight:640}

.pips{display:flex; gap:3px}
.pip{width:7px; height:7px; border-radius:50%; background:var(--line)}
.pip.on{background:var(--rc); box-shadow:0 0 6px color-mix(in srgb,var(--rc) 60%,transparent)}

/* ----------------------------------------------------------- modal */
.modal{
  position:fixed; inset:0; z-index:70; display:grid; place-items:end center;
  background:rgba(5,4,10,.76); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:fadeIn .24s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-inner{
  position:relative; width:100%; max-width:720px; max-height:90vh; overflow-y:auto;
  background:var(--bg-2); border:1px solid var(--line); border-radius:22px 22px 0 0;
  padding:26px 17px calc(30px + var(--safe-b));
  animation:slideUp .36s cubic-bezier(.22,.9,.3,1);
  -webkit-overflow-scrolling:touch;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.modal-close{
  position:sticky; top:0; float:right; z-index:5;
  width:36px; height:36px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink-2); cursor:pointer; font-size:.95rem;
}
.modal-close:active{transform:scale(.9)}

.m-head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.m-ico{flex:0 0 50px; width:50px; height:50px; border-radius:14px; display:grid; place-items:center; font-size:1.6rem}
.m-title{font-size:1.32rem; font-weight:640; font-family:Georgia,serif; margin:0; line-height:1.2}
.m-role{font-size:.8rem; margin:2px 0 0}
.m-sec{margin:18px 0 0}
.m-sec h4{
  margin:0 0 9px; font-size:.7rem; text-transform:uppercase; letter-spacing:1.3px;
  color:var(--gold-dim); font-weight:700;
}
.spell-list{display:flex; flex-wrap:wrap; gap:6px}
.spell{
  font-size:.755rem; padding:5px 10px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--line-soft); color:var(--ink-2);
}
.arma-row{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  padding:10px 12px; border-radius:10px; background:var(--surface); margin-bottom:6px;
  border:1px solid transparent;
}
.arma-row.dest{border-color:var(--gold-dim); background:rgba(224,184,98,.08)}
.arma-n{font-size:.845rem; font-weight:600; color:var(--ink)}
.arma-e{font-size:.72rem; color:var(--ink-3); display:block; margin-top:1px}
.arma-m{font-size:.63rem; padding:3px 7px; border-radius:6px; background:var(--surface-3); color:var(--ink-3); white-space:nowrap}
.m-nota{
  font-size:.815rem; padding:12px 13px; border-radius:11px; line-height:1.55;
  background:rgba(56,189,248,.09); border:1px solid rgba(56,189,248,.22); color:#cfeaff;
}

/* ----------------------------------------------------------- chips */
.chip-row{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.chip-row::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; padding:9px 15px; border-radius:99px; cursor:pointer; font-family:inherit;
  background:var(--surface); border:1px solid var(--line-soft); color:var(--ink-3);
  font-size:.8rem; font-weight:600; white-space:nowrap; transition:.22s cubic-bezier(.34,1.4,.64,1);
}
.chip:active{transform:scale(.94)}
.chip.on{background:linear-gradient(96deg,var(--arcane-2),#9b7af5); border-color:transparent; color:#fff; box-shadow:0 4px 16px rgba(124,92,240,.34)}

/* ---------------------------------------------------------- builds */
.build{animation:viewIn .3s cubic-bezier(.22,.9,.3,1)}
.build-hero{
  background:linear-gradient(155deg,var(--surface-3),var(--surface));
  border:1px solid var(--line); border-radius:var(--r); padding:17px 16px; margin-bottom:14px;
  border-left:3px solid var(--bc);
}
.build-etapa{font-size:.65rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--bc); font-weight:700}
.build-n{margin:4px 0 7px; font-size:1.22rem; font-weight:640; font-family:Georgia,serif; line-height:1.28}
.build-para{margin:0 0 13px; font-size:.85rem; color:var(--ink-2)}
.build-total{
  display:flex; align-items:baseline; gap:8px; padding-top:12px; border-top:1px solid var(--line-soft);
}
.build-total span{font-size:.72rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.9px}
.build-total b{font-size:1.34rem; font-family:Georgia,serif; color:var(--gold); font-weight:660}

.pieza{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:13px;
  padding:13px 14px; margin-bottom:9px;
}
.pieza.clave{border-color:rgba(224,184,98,.35); background:linear-gradient(140deg,rgba(224,184,98,.07),var(--surface))}
.pz-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:5px}
.pz-r{font-size:.63rem; text-transform:uppercase; letter-spacing:1.1px; color:var(--ink-3); font-weight:700}
.pz-precio{font-size:.78rem; color:var(--gold); font-weight:640; white-space:nowrap}
.pz-p{font-size:.94rem; font-weight:620; color:var(--ink); margin-bottom:4px}
.pz-h{
  font-size:.745rem; color:var(--arcane); margin-bottom:7px; padding:4px 9px;
  background:rgba(167,139,250,.1); border-radius:7px; display:inline-block;
}
.pz-pq{font-size:.805rem; color:var(--ink-2); line-height:1.5; margin:0}
.pz-ciudad{font-size:.66rem; color:var(--ink-3); margin-top:6px}

.rot{counter-reset:rot}
.rot-step{
  display:flex; gap:11px; padding:10px 12px; background:var(--surface); border-radius:11px;
  margin-bottom:7px; border:1px solid var(--line-soft);
}
.rot-num{
  flex:0 0 24px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-3); color:var(--gold); font-size:.72rem; font-weight:700;
  border:1px solid var(--line);
}
.rot-t{flex:1; font-size:.835rem; color:var(--ink-2); line-height:1.5}

.build-aviso{
  padding:13px 14px; border-radius:12px; margin-top:14px; font-size:.845rem; line-height:1.55;
  background:linear-gradient(120deg,rgba(245,158,11,.13),rgba(245,158,11,.05));
  border:1px solid rgba(245,158,11,.3); color:#ffeccb;
}

/* ---------------------------------------------------------- sesión */
.sesion-head{
  background:linear-gradient(155deg,var(--surface-3),var(--surface));
  border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:14px;
  border-left:3px solid var(--sc);
}
.sesion-dur{font-size:1.5rem; font-family:Georgia,serif; font-weight:660; color:var(--sc)}
.sesion-t{font-size:.78rem; text-transform:uppercase; letter-spacing:1.1px; color:var(--ink-3); margin-top:2px}
.sesion-d{font-size:.85rem; color:var(--ink-2); margin:10px 0 0}
.sesion-prog{margin-top:13px; padding-top:13px; border-top:1px solid var(--line-soft)}
.sp-bar{height:6px; border-radius:99px; background:rgba(0,0,0,.4); overflow:hidden; margin-bottom:6px}
.sp-fill{height:100%; border-radius:99px; background:var(--sc); transition:width .6s cubic-bezier(.22,.9,.3,1)}
.sp-t{font-size:.73rem; color:var(--ink-3)}

/* --------------------------------------------------------- registro */
.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:16px}
.stat{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:13px;
  padding:13px 10px; text-align:center;
}
.stat-v{font-size:1.24rem; font-family:Georgia,serif; font-weight:660; color:var(--gold); line-height:1.2}
.stat-l{font-size:.63rem; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-3); margin-top:3px}

.form{display:flex; flex-direction:column; gap:13px}
.form label{display:flex; flex-direction:column; gap:6px; font-size:.755rem; text-transform:uppercase; letter-spacing:.9px; color:var(--ink-3); font-weight:640}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.form input[type=date],.form input[type=text],.form input[type=number],.form textarea{
  width:100%; padding:12px 13px; border-radius:11px; font-family:inherit; font-size:.92rem;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  text-transform:none; letter-spacing:normal; transition:.2s;
}
.form input:focus,.form textarea:focus{outline:0; border-color:var(--arcane); box-shadow:0 0 0 3px rgba(167,139,250,.16)}
.form textarea{resize:vertical; min-height:56px; line-height:1.55}
.check-line{flex-direction:row !important; align-items:center; gap:10px !important; text-transform:none !important; letter-spacing:normal !important; color:var(--ink-2) !important; font-size:.87rem !important; font-weight:500 !important}
.check-line input{width:20px; height:20px; accent-color:var(--danger); flex:0 0 20px}

.log{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:13px;
  padding:14px; margin-bottom:10px; position:relative;
  animation:viewIn .3s cubic-bezier(.22,.9,.3,1);
}
.log.murio{border-left:3px solid var(--danger)}
.log-top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px}
.log-f{font-size:.79rem; font-weight:640; color:var(--gold)}
.log-del{
  width:30px; height:30px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink-3); cursor:pointer; font-size:.78rem; flex:0 0 30px;
}
.log-del:active{transform:scale(.9); color:var(--danger); border-color:var(--danger)}
.log-q{font-size:.865rem; color:var(--ink); margin:0 0 9px; line-height:1.5}
.log-tags{display:flex; flex-wrap:wrap; gap:6px}
.log-tag{font-size:.68rem; padding:4px 9px; border-radius:7px; background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line-soft)}
.log-tag.plata{color:var(--gold)}
.log-tag.fama{color:var(--arcane)}
.log-tag.mal{color:#ffc0c0; background:rgba(239,68,68,.11); border-color:rgba(239,68,68,.24); width:100%}

.empty{
  text-align:center; padding:34px 20px; color:var(--ink-3); font-size:.87rem;
  background:var(--surface); border:1px dashed var(--line); border-radius:var(--r);
}
.empty span{display:block; font-size:1.9rem; margin-bottom:9px; opacity:.55}

/* --------------------------------------------------------- glosario */
.search-wrap{
  display:flex; align-items:center; gap:9px; padding:0 13px; margin-bottom:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:13px;
  transition:.2s;
}
.search-wrap:focus-within{border-color:var(--arcane); box-shadow:0 0 0 3px rgba(167,139,250,.14)}
.search-wrap svg{color:var(--ink-3); flex:0 0 18px}
.search-wrap input{
  flex:1; min-height:48px; background:none; border:0; color:var(--ink);
  font-family:inherit; font-size:.94rem;
}
.search-wrap input:focus{outline:0}
.clear-btn{
  width:26px; height:26px; border-radius:8px; border:0; background:var(--surface-3);
  color:var(--ink-3); cursor:pointer; font-size:.7rem; flex:0 0 26px;
}
.result-count{margin:0 2px 12px; font-size:.73rem; color:var(--ink-3)}

.gl{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:13px 14px; margin-bottom:8px;
}
.gl-t{font-size:.94rem; font-weight:640; color:var(--gold); font-family:Georgia,serif}
.gl-s{font-size:.72rem; color:var(--ink-3); font-style:italic; margin-top:1px}
.gl-d{font-size:.845rem; color:var(--ink-2); margin:7px 0 0; line-height:1.55}
mark{background:rgba(224,184,98,.28); color:var(--gold); border-radius:3px; padding:0 2px}

/* ---------------------------------------------------------- errores */
.err-group{margin-bottom:22px}
.err-gh{
  display:flex; align-items:center; gap:9px; margin:0 2px 11px;
  font-size:.7rem; text-transform:uppercase; letter-spacing:1.3px; font-weight:700; color:var(--eg);
}
.err-gh::after{content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--eg),transparent); opacity:.45}
.err{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:13px;
  padding:14px; margin-bottom:9px; border-left:3px solid var(--eg);
}
.err-t{font-size:.95rem; font-weight:640; color:var(--ink); margin:0 0 7px; line-height:1.38}
.err-d{font-size:.83rem; color:var(--ink-3); margin:0 0 10px; line-height:1.5}
.err-s{
  font-size:.83rem; color:#d6f5e0; margin:0; line-height:1.55; padding:10px 12px;
  background:rgba(74,222,128,.08); border-radius:10px; border-left:2px solid var(--ok);
}

/* ------------------------------------------------------------ tabbar */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:grid; grid-template-columns:repeat(6,1fr); gap:2px;
  padding:6px 6px calc(6px + var(--safe-b));
  background:rgba(13,10,22,.93); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line-soft);
}
.tabbar button{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:7px 2px 5px; border:0; background:none; cursor:pointer; font-family:inherit;
  color:var(--ink-3); font-size:.6rem; font-weight:600; border-radius:11px;
  transition:.22s cubic-bezier(.34,1.4,.64,1); position:relative;
}
.tabbar button .ti{font-size:1.14rem; line-height:1; transition:transform .26s cubic-bezier(.34,1.6,.64,1)}
.tabbar button:active .ti{transform:scale(.82)}
.tabbar button.active{color:var(--gold)}
.tabbar button.active .ti{transform:translateY(-1px) scale(1.12)}
.tabbar button.active::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:22px; height:2.5px; border-radius:99px; background:var(--gold);
  box-shadow:0 0 9px var(--gold);
}

/* ------------------------------------------------------------ sheets */
.sheet-backdrop{
  position:fixed; inset:0; z-index:60; background:rgba(5,4,10,.7);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:fadeIn .22s ease;
}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:61;
  background:var(--bg-2); border:1px solid var(--line); border-bottom:0;
  border-radius:22px 22px 0 0; padding:10px 15px calc(22px + var(--safe-b));
  max-width:720px; margin:0 auto;
  animation:slideUp .34s cubic-bezier(.22,.9,.3,1);
}
.sheet-grip{width:38px; height:4px; border-radius:99px; background:var(--line); margin:0 auto 14px}
.sheet h3{margin:0 0 6px; font-size:1.06rem; font-family:Georgia,serif; color:var(--gold); font-weight:640}
.sheet-note{margin:0 0 14px; font-size:.79rem; color:var(--ink-3); line-height:1.5}
.sheet-item{
  display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:0 15px;
  margin-bottom:8px; border-radius:13px; cursor:pointer; font-family:inherit;
  background:var(--surface); border:1px solid var(--line-soft); color:var(--ink);
  font-size:.9rem; font-weight:580; text-align:left;
  transition:.2s cubic-bezier(.34,1.4,.64,1);
}
.sheet-item:active{transform:scale(.975); border-color:var(--arcane)}
.sheet-item span:first-child{font-size:1.06rem; color:var(--gold); flex:0 0 20px}
.sheet-item.danger{color:#ffbdbd}
.sheet-item.danger span:first-child{color:var(--danger)}
.sheet-item.danger:active{border-color:var(--danger)}
.sheet-meta{margin-top:14px; font-size:.7rem; color:var(--ink-3); line-height:1.6; text-align:center}

/* ------------------------------------------------------------- toast */
.toast{
  position:fixed; left:50%; bottom:calc(var(--tab-h) + var(--safe-b) + 18px);
  transform:translateX(-50%); z-index:90;
  padding:13px 20px; border-radius:13px; font-size:.87rem; font-weight:600;
  background:var(--surface-3); border:1px solid var(--arcane); color:var(--ink);
  box-shadow:0 10px 34px rgba(0,0,0,.55); max-width:calc(100vw - 34px); text-align:center;
  animation:toastIn .34s cubic-bezier(.22,1.3,.4,1);
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,18px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.toast.out{animation:toastOut .28s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,12px) scale(.96)}}

/* ------------------------------------------------------------ stamp */
.stamp{
  margin:22px 2px 6px; font-size:.68rem; color:var(--ink-3); line-height:1.65;
  text-align:center; padding:12px; border-top:1px solid var(--line-soft);
}

/* ------------------------------------------------------------ tablet */
@media (min-width:620px){
  main{padding:4px 22px 34px}
  .quick-grid{gap:12px}
  .quick-t{font-size:.72rem}
  .stats-row{gap:12px}
  .tabbar{position:sticky; border-radius:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}