/* ============================================================================
   UlanBatar · Consola de la Tribu (admin) — estilos
   ============================================================================ */
:root{
  --bg-0:#0a0708; --bg-1:#120c0c; --bg-2:#1c1410;
  --ink:#e9d9b8; --gold:#f3d8a5; --gold-2:#d9a155; --ember:#ff7a2a; --red:#b8442c; --green:#6cc38a;
  --line:rgba(255,180,80,.16); --line-strong:rgba(255,180,80,.6);
  --panel:rgba(20,8,2,.5);
  --serif:'EB Garamond',Georgia,serif; --display:'Cinzel',serif; --mono:'Space Mono',monospace;
}
*{box-sizing:border-box}
body{ margin:0; min-height:100vh; color:var(--ink); font-family:var(--serif);
  background:radial-gradient(1100px 620px at 50% -8%, var(--bg-2) 0%, var(--bg-1) 46%, var(--bg-0) 100%);
  background-attachment:fixed; -webkit-font-smoothing:antialiased; padding:38px 24px 60px; }
a{ color:var(--gold-2) }
input::placeholder,textarea::placeholder{ color:rgba(233,217,184,.38) }
textarea{ font-family:var(--serif) }
button{ font-family:var(--display) }
::selection{ background:rgba(255,120,40,.3); color:#fff }

.boot{ min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px }
.boot-seal{ width:64px; height:64px; border-radius:50%; box-shadow:0 0 0 1px rgba(255,180,80,.25),0 0 22px rgba(255,120,40,.3) }
.boot-text{ font-family:var(--display); font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--gold-2) }

/* page header */
.page-head{ max-width:1060px; margin:0 auto 34px; display:flex; align-items:center; gap:14px }
.page-head img{ width:48px; height:48px; border-radius:50%; box-shadow:0 0 0 1px rgba(255,180,80,.25),0 0 22px rgba(255,120,40,.3) }
.page-head .k{ font-family:var(--display); font-size:10px; letter-spacing:.5em; text-transform:uppercase; color:var(--gold-2) }
.page-head h1{ margin:3px 0 0; font-family:var(--display); font-weight:700; font-size:25px; letter-spacing:.02em; color:var(--gold); text-transform:uppercase }
.page-head .right{ margin-left:auto; font-family:var(--display); font-size:9.5px; letter-spacing:.3em; color:rgba(233,217,184,.5); text-transform:uppercase; text-align:right }
.logout{ background:none; border:1px solid var(--line); color:var(--gold-2); padding:7px 12px; cursor:pointer;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase }

/* ───────── login ───────── */
.login{ max-width:420px; margin:8vh auto 0; text-align:center }
.login img{ width:72px; height:72px; border-radius:50%; box-shadow:0 0 0 1px rgba(255,180,80,.25),0 0 26px rgba(255,120,40,.3) }
.login .k{ font-family:var(--display); font-size:10px; letter-spacing:.5em; color:var(--gold-2); text-transform:uppercase; margin-top:18px }
.login h1{ margin:8px 0 0; font-family:var(--display); font-weight:700; font-size:24px; color:var(--gold); text-transform:uppercase; letter-spacing:.04em }
.login p{ font-family:var(--serif); font-style:italic; color:rgba(233,217,184,.6); margin:10px 0 24px }
.login form{ display:flex; flex-direction:column; gap:12px; text-align:left }
.login input{ width:100%; padding:14px 15px; background:var(--panel); border:1px solid rgba(255,180,80,.25); color:var(--gold);
  font-family:var(--serif); font-size:16px; outline:none }
.login input:focus{ border-color:var(--line-strong) }
.login button{ padding:15px; background:rgba(255,100,30,.2); border:1px solid var(--line-strong); color:var(--gold);
  font-weight:600; font-size:11px; letter-spacing:.3em; text-transform:uppercase; cursor:pointer }
.login .err{ color:var(--ember); font-family:var(--serif); font-style:italic; font-size:13px; min-height:18px }
.demo-banner{ max-width:1060px; margin:0 auto 18px; padding:10px 16px; background:rgba(217,161,85,.1);
  border:1px solid rgba(217,161,85,.4); color:var(--gold-2); font-family:var(--serif); font-size:13.5px; font-style:italic }

/* ───────── console window ───────── */
.console{ max-width:1060px; margin:0 auto; border-radius:16px; overflow:hidden; border:1px solid rgba(255,180,80,.18);
  background:#0b0807; box-shadow:0 50px 100px -30px rgba(0,0,0,.85),0 0 60px rgba(255,120,40,.06) }
.titlebar{ display:flex; align-items:center; gap:12px; padding:13px 18px;
  background:linear-gradient(180deg,#1a1009,#0e0907); border-bottom:1px solid var(--line) }
.lights{ display:flex; gap:7px }
.lights span{ width:11px; height:11px; border-radius:50% }
.titlebar .seal{ width:24px; height:24px; border-radius:50%; margin-left:6px }
.titlebar .nm{ font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.34em; color:var(--gold); text-transform:uppercase }
.titlebar .adm{ margin-left:auto; font-family:var(--display); font-size:9px; letter-spacing:.26em; color:rgba(233,217,184,.45); text-transform:uppercase }

.panel{ display:grid; grid-template-columns:264px 1fr; min-height:640px }
@media (max-width:760px){ .panel{ grid-template-columns:1fr } }

/* left rail */
.rail{ border-right:1px solid rgba(255,180,80,.14); background:rgba(8,5,4,.5); display:flex; flex-direction:column }
.rail-head{ padding:15px 16px 12px; border-bottom:1px solid rgba(255,180,80,.14); display:flex; align-items:center; justify-content:space-between }
.rail-head .k{ font-family:var(--display); font-size:9.5px; letter-spacing:.3em; color:var(--gold-2); text-transform:uppercase }
.rail-head .n{ font-family:var(--display); font-size:11px; color:var(--gold) }
.rail-list{ flex:1; overflow-y:auto }
.rail-item{ display:block; width:100%; text-align:left; cursor:pointer; padding:14px 16px; background:transparent;
  border:none; border-left:3px solid transparent; border-bottom:1px solid rgba(255,180,80,.08); color:var(--ink) }
.rail-item.active{ background:linear-gradient(135deg, rgba(255,120,40,.16), rgba(196,54,20,.05)); border-left-color:var(--ember) }
.rail-item .top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px }
.rail-item .t{ font-family:var(--display); font-weight:600; font-size:13px; color:var(--ink); line-height:1.2 }
.rail-item.active .t{ color:var(--gold) }
.rail-item .meta{ font-family:var(--serif); font-style:italic; font-size:12.5px; color:rgba(233,217,184,.55); margin-top:5px }
.rail-item .cnt{ font-family:var(--display); font-size:9px; letter-spacing:.14em; color:rgba(217,161,85,.6); text-transform:uppercase; margin-top:7px }
.rail-item.active .cnt{ color:var(--gold-2) }
.rail-add{ display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; cursor:pointer;
  background:rgba(255,100,30,.1); border:none; border-top:1px solid var(--line); color:var(--gold);
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase }

.chip{ font-family:var(--display); font-size:8px; letter-spacing:.2em; text-transform:uppercase; padding:3px 8px; white-space:nowrap }
.chip.activa{ border:1px solid rgba(108,195,138,.5); color:var(--green); background:rgba(108,195,138,.1) }
.chip.borrador{ border:1px solid rgba(217,161,85,.4); color:var(--gold-2); background:rgba(217,161,85,.08) }
.chip.pasado{ border:1px solid rgba(200,200,210,.28); color:rgba(233,217,184,.5); background:rgba(255,255,255,.04) }

/* detail */
.detail{ display:flex; flex-direction:column; min-width:0 }
.detail-head{ padding:20px 24px 0 }
.dh-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap }
.dh-title{ margin:0; font-family:var(--display); font-weight:700; font-size:21px; color:var(--gold); letter-spacing:.01em; display:flex; align-items:center; gap:10px }
.dh-sub{ font-family:var(--serif); font-style:italic; font-size:14px; color:rgba(233,217,184,.65); margin-top:4px }
.dh-actions{ display:flex; gap:8px; flex-wrap:wrap }
.act{ padding:9px 13px; cursor:pointer; background:rgba(255,140,40,.05); border:1px solid rgba(255,180,80,.25); color:var(--gold);
  font-family:var(--display); font-size:9px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; gap:7px }
.act.wa{ background:rgba(108,195,138,.14); border-color:rgba(108,195,138,.4); color:#bfead0 }
.tabs{ display:flex; margin-top:18px; border-bottom:1px solid rgba(255,180,80,.14) }
.tab{ padding:10px 4px; margin-right:22px; cursor:pointer; background:none; border:none; border-bottom:2px solid transparent;
  color:rgba(233,217,184,.55); font-family:var(--display); font-size:10px; letter-spacing:.24em; text-transform:uppercase }
.tab.active{ border-bottom-color:var(--ember); color:var(--gold) }

/* builder */
.builder{ display:grid; grid-template-columns:1fr 320px; gap:28px; padding:22px 24px 28px }
@media (max-width:900px){ .builder{ grid-template-columns:1fr } }
.lbl{ font-family:var(--display); font-size:8.5px; letter-spacing:.24em; color:var(--gold-2); text-transform:uppercase; margin-bottom:5px }
.fld{ margin-bottom:13px }
.inp{ width:100%; padding:11px 12px; background:var(--panel); border:1px solid rgba(255,180,80,.25); color:var(--gold);
  font-family:var(--serif); font-size:14px; outline:none }
.inp:focus{ border-color:var(--line-strong) }
.inp.inp-err{ border-color:var(--red) }
.fld-err{ font-family:var(--serif); font-style:italic; font-size:11.5px; color:#f3b9a3; margin-top:6px }
.fld-err:empty{ display:none }
textarea.inp{ resize:vertical; line-height:1.5 }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 12px }
.modes{ display:flex; gap:8px }
.mode{ flex:1; text-align:left; cursor:pointer; padding:11px 13px; background:var(--panel); border:1px solid rgba(255,180,80,.2); color:var(--ink) }
.mode.active{ background:linear-gradient(135deg, rgba(255,120,40,.18), rgba(196,54,20,.06)); border-color:var(--line-strong) }
.mode .t{ font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.04em; text-transform:uppercase }
.mode.active .t{ color:var(--gold) }
.mode .s{ font-family:var(--serif); font-style:italic; font-size:11.5px; color:rgba(233,217,184,.55); margin-top:2px }

.accesos-box{ margin-bottom:13px; border-top:1px solid rgba(255,180,80,.14); padding-top:16px }
.toggle{ display:flex; align-items:center; gap:9px; cursor:pointer; margin-bottom:14px }
.toggle .box{ flex:none; width:22px; height:22px; border:1px solid rgba(255,180,80,.45); background:rgba(20,8,2,.6); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:13px }
.toggle .box.on{ background:rgba(108,195,138,.45) }
.comp{ display:flex; gap:6px }
.comp button{ flex:1; padding:10px; cursor:pointer; background:var(--panel); border:1px solid rgba(255,180,80,.2); color:var(--gold);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase }
.comp button.on{ background:rgba(255,120,40,.18); border-color:var(--line-strong) }
.maxcomp{ display:flex; gap:6px }
.maxcomp button{ flex:1; padding:9px 0; cursor:pointer; background:var(--panel); border:1px solid rgba(255,180,80,.2); color:var(--ink);
  font-weight:700; font-size:13px }
.maxcomp button.on{ background:rgba(255,120,40,.2); border-color:var(--line-strong); color:var(--ember) }

.tk-ed{ border:1px solid rgba(255,180,80,.18); background:rgba(20,8,2,.4); padding:12px; margin-bottom:10px }
.tk-ed.off{ opacity:.55 }
.tk-row{ display:flex; align-items:center; gap:10px }
.sw{ flex:none; width:40px; height:23px; border-radius:999px; border:1px solid rgba(255,180,80,.4); position:relative; cursor:pointer; padding:0;
  background:rgba(108,195,138,.45) }
.sw.off{ background:rgba(20,8,2,.6) }
.sw i{ position:absolute; top:2px; left:19px; width:17px; height:17px; border-radius:50%; background:var(--gold); transition:left .15s }
.sw.off i{ left:2px }
.tk-del{ flex:none; width:30px; height:30px; border:1px solid rgba(255,180,80,.2); background:transparent; color:var(--red); cursor:pointer; font-size:16px; line-height:1 }
.tk-grid{ display:grid; grid-template-columns:120px 1fr; gap:8px; margin-top:8px }
.add-tk{ width:100%; padding:11px; cursor:pointer; background:rgba(255,100,30,.08); border:1px dashed rgba(255,180,80,.35); color:var(--gold);
  font-size:9px; letter-spacing:.24em; text-transform:uppercase }

.poster-slot{ display:flex; gap:13px; align-items:center; cursor:pointer; border:1px solid rgba(255,180,80,.16); background:rgba(20,8,2,.35); padding:12px; margin-bottom:10px }
.poster-thumb{ flex:none; border:1px dashed rgba(255,180,80,.4); background:rgba(20,8,2,.5); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; color:var(--gold-2); font-size:20px }
.poster-info .name{ font-family:var(--display); font-size:9px; letter-spacing:.14em; color:var(--gold); text-transform:uppercase }
.poster-info .dim{ font-family:var(--display); font-weight:700; font-size:11px; color:var(--gold-2) }
.poster-info .action{ font-family:var(--display); font-size:8.5px; letter-spacing:.22em; color:var(--ember); text-transform:uppercase; margin-top:7px }
.poster-info .hint{ font-family:var(--serif); font-style:italic; font-size:11.5px; line-height:1.4; margin-top:6px; color:rgba(233,217,184,.6) }
.poster-info .hint.ok{ color:var(--green) } .poster-info .hint.warn{ color:#ff9a5a }

.save-row{ display:flex; gap:8px; margin-top:20px }
.save{ flex:1; padding:14px; cursor:pointer; border:1px solid var(--line-strong); background:rgba(255,100,30,.2); color:var(--gold);
  font-size:10px; letter-spacing:.28em; text-transform:uppercase }
.send{ flex:1; padding:14px; cursor:pointer; background:rgba(108,195,138,.16); border:1px solid rgba(108,195,138,.5); color:#bfead0;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase }
.sent{ flex:1; padding:14px; text-align:center; background:rgba(108,195,138,.08); border:1px solid rgba(108,195,138,.3); color:var(--green);
  font-family:var(--display); font-size:10px; letter-spacing:.24em; text-transform:uppercase }

/* share preview (right col) */
.share-prev{ }
.mini-lbl{ font-family:var(--display); font-size:8px; letter-spacing:.2em; color:rgba(233,217,184,.55); text-transform:uppercase }
.og-card{ margin-top:6px; border:1px solid rgba(255,180,80,.2); background:rgba(20,8,2,.5); overflow:hidden }
.og-img{ width:100%; aspect-ratio:1200/630; background-size:cover; background-position:center }
.og-body{ padding:11px 13px }
.og-title{ font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.02em; color:var(--gold); text-transform:uppercase; line-height:1.1 }
.og-meta{ font-family:var(--serif); font-style:italic; font-size:12.5px; color:var(--gold-2); margin-top:4px }
.og-host{ font-family:var(--display); font-size:9px; letter-spacing:.2em; color:rgba(233,217,184,.45); text-transform:uppercase; margin-top:6px }
.vert-card{ margin-top:6px; display:flex; gap:11px; border:1px solid rgba(255,180,80,.2); background:rgba(20,8,2,.5); padding:10px }
.vert-img{ flex:none; width:62px; aspect-ratio:9/16; background-size:cover; background-position:center; border:1px solid rgba(255,180,80,.18) }
.wa-msg{ white-space:pre-wrap; font-family:var(--serif); font-size:12.5px; line-height:1.5; color:rgba(233,217,184,.85);
  background:rgba(20,8,2,.5); border:1px solid rgba(255,180,80,.18); border-left:3px solid var(--green); padding:12px 14px }

/* responses tab */
.resp{ padding:22px 24px 28px }
.cupo-bar{ margin-bottom:20px; padding:16px 18px; background:rgba(20,8,2,.5); border:1px solid var(--line) }
.cupo-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap }
.cupo-k{ font-family:var(--display); font-size:9px; letter-spacing:.26em; color:var(--gold-2); text-transform:uppercase }
.cupo-n{ font-family:var(--display); font-weight:900; font-size:20px; color:var(--gold) }
.cupo-de{ font-family:var(--serif); font-style:italic; font-size:14px; color:rgba(233,217,184,.55) }
.cupo-input{ width:78px; padding:8px 10px; background:rgba(40,15,4,.6); border:1px solid rgba(255,180,80,.3); color:var(--gold);
  font-family:var(--display); font-weight:700; font-size:16px; text-align:center; outline:none }
.bar{ height:8px; border-radius:4px; background:rgba(255,255,255,.06); margin-top:14px; overflow:hidden }
.bar i{ display:block; height:100%; transition:width .4s ease }
.cupo-note{ display:flex; align-items:center; justify-content:space-between; margin-top:11px; flex-wrap:wrap; gap:8px }
.cupo-note .l{ font-family:var(--serif); font-style:italic; font-size:13px }
.cupo-note .r{ font-family:var(--display); font-size:8.5px; letter-spacing:.18em; color:rgba(233,217,184,.45); text-transform:uppercase }

.stats{ display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap }
.tile{ flex:1; min-width:120px; padding:16px 18px; background:rgba(20,8,2,.5); border:1px solid var(--line) }
.tile .num{ font-family:var(--display); font-weight:900; font-size:30px; color:var(--gold); line-height:1 }
.tile .lbl2{ font-family:var(--display); font-size:9px; letter-spacing:.24em; color:var(--gold-2); text-transform:uppercase; margin-top:8px }
.tile .byrow{ display:flex; justify-content:space-between; align-items:center; font-family:var(--serif); font-size:13.5px; color:var(--ink) }
.tile .byrow b{ font-family:var(--display); color:var(--ember) }

.empty{ padding:40px 20px; text-align:center; border:1px dashed rgba(255,180,80,.25); font-family:var(--serif); font-style:italic; font-size:15px; color:rgba(233,217,184,.55) }
.rtable{ border:1px solid rgba(255,180,80,.14) }
.rhead,.rrow{ display:grid; gap:12px; padding:11px 16px; align-items:center }
.rhead{ background:rgba(40,15,4,.5); border-bottom:1px solid var(--line); font-family:var(--display); font-size:8.5px; letter-spacing:.2em; color:var(--gold-2); text-transform:uppercase }
.rrow{ padding:12px 16px; border-bottom:1px solid rgba(255,180,80,.08) }
.rrow:last-child{ border-bottom:none }
.rrow.live{ background:rgba(255,120,40,.07) }
.rname{ font-family:var(--serif); font-size:14.5px; color:var(--gold); display:flex; align-items:center; gap:7px }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--green); flex:none; box-shadow:0 0 6px var(--green) }
.racc{ font-family:var(--display); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2) }
.rpers{ text-align:center; font-family:var(--display); font-weight:700; font-size:14px; color:var(--gold) }
.rcode{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#ff9a5a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rmail{ font-family:var(--serif); font-size:13px; color:rgba(233,217,184,.6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rwhen{ text-align:right; font-family:var(--serif); font-style:italic; font-size:12.5px; color:rgba(233,217,184,.5) }
.export-row{ display:flex; justify-content:flex-end; margin-top:14px }

/* footer note */
.foot-note{ max-width:1060px; margin:40px auto 0; padding:22px 24px; border:1px solid var(--line); background:rgba(40,15,4,.22) }
.foot-note .k{ font-family:var(--display); font-size:10px; letter-spacing:.4em; text-transform:uppercase; color:var(--gold-2); margin-bottom:10px }
.foot-note p{ margin:0; font-family:var(--serif); font-size:15px; line-height:1.65; color:rgba(233,217,184,.8) }
.foot-note .by{ display:inline-block; margin-top:14px; font-family:var(--serif); font-style:italic; font-size:12px; color:rgba(233,217,184,.45) }

.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:90; background:rgba(20,8,2,.96);
  border:1px solid var(--line-strong); color:var(--gold); font-family:var(--display); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; padding:12px 20px; opacity:0; transition:opacity .25s; pointer-events:none }
.toast.show{ opacity:1 }
.toast.err{ border-color:var(--red); color:#f3b9a3 }