:root{
  --bg:#0D0A12; --bg2:#0A0810; --s1:#17121F; --s2:#211A2B; --line:#2A2135; --line2:#3A2F47;
  --text:#F3EDE6; --soft:#D2C8DA; --muted:#B3A8BD; --faint:#8E829B;
  --ember:#FF8A3D; --ember-t:#FFB27D; --blood:#FF4D5E; --blood-t:#FF7A88; --gold:#FFD166; --ok:#7FD46B;
  --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Chakra Petch',system-ui,sans-serif;font-size:16px;line-height:1.5;overflow-x:hidden}
a{color:var(--ember-t)}a:hover{color:#FFD0AE}
code,.mono{font-family:'JetBrains Mono',monospace}
code{color:var(--ember-t)}
.px{font-family:'Pixelify Sans',monospace;letter-spacing:.5px}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;line-height:1.1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* cielo */
.sky{position:absolute;inset:0 0 auto 0;height:900px;pointer-events:none;overflow:hidden;z-index:0}
.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:1px;opacity:.3;animation:twinkle 3s ease-in-out infinite}
.meteor{position:absolute;width:140px;height:2px;background:linear-gradient(90deg,#FFE2C2,rgba(255,138,61,0));border-radius:2px;opacity:0;animation:streak 9s linear infinite}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.9}}
@keyframes streak{0%{transform:translate(0,0) rotate(-35deg);opacity:0}8%{opacity:1}30%{transform:translate(-520px,360px) rotate(-35deg);opacity:0}100%{opacity:0}}

/* cabecera */
.top{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(13,10,18,.85);backdrop-filter:blur(8px)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.logo{width:36px;height:36px;background:var(--ember);border-radius:4px;display:grid;place-items:center;box-shadow:0 0 18px rgba(255,138,61,.5);animation:flick 3s infinite}
.logo span{width:14px;height:14px;background:var(--bg);border-radius:2px;transform:rotate(45deg)}
.brand-name{display:block;font-size:24px;font-weight:700;line-height:1}
.brand-sub{display:block;font-size:12px;color:var(--muted);letter-spacing:2px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto}
.tabs a{min-height:44px;display:inline-flex;align-items:center;padding:10px 16px;border-radius:8px;border:1px solid transparent;color:#E6DDEE;font-weight:600;text-decoration:none;transition:background .2s,color .2s}
.tabs a:hover{background:#241C2F;color:#fff}
.tabs a[aria-current="page"]{border-color:var(--ember);background:#2A1D16;color:var(--ember-t)}
.status{display:flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--s1);font-size:14px;font-weight:600}
.dot{width:9px;height:9px;border-radius:50%;background:var(--faint)}
.status.on .dot{background:#54E68C;animation:pulseDot 2s infinite}
.status.off .dot{background:var(--blood)}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(84,230,140,.6)}70%{box-shadow:0 0 0 8px rgba(84,230,140,0)}}
@keyframes flick{0%,100%{opacity:1}45%{opacity:.85}50%{opacity:.6}55%{opacity:.9}}

#notice:empty{display:none}
.notice{margin-top:18px;margin-bottom:-14px;display:inline-flex;font-size:13px;color:var(--muted);border:1px dashed var(--line2);border-radius:6px;padding:4px 10px}
main{position:relative;z-index:1;padding-top:36px;padding-bottom:80px;outline:none}
.view{display:flex;flex-direction:column;gap:40px}
.lead{margin:8px 0 0;color:var(--soft);font-size:17px;max-width:680px}
.h-page{font-size:52px}
.h-sec{font-size:32px}
.sub{margin:4px 0 0;color:var(--muted)}
.row-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.card{border:1px solid var(--line);background:var(--s1);border-radius:var(--r);padding:22px;transition:transform .2s,border-color .2s}
.card.hov:hover{transform:translateY(-4px);border-color:#5A4870}
.grid{display:grid;gap:16px}
.g-auto-220{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.g-auto-280{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.g-fill-260{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.g-fill-320{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid #33293F;background:transparent;color:#E6DDEE;font-weight:600;font-size:14px}
.pill[aria-pressed="true"]{border-color:var(--ember);background:var(--ember);color:#1A0E06}
.pill:hover{border-color:#5A4870}
.chip{font-size:13px;padding:5px 10px;border-radius:6px;background:var(--s2);border-left:3px solid var(--c,var(--ember))}
.tag{font-size:13px;padding:6px 12px;border-radius:999px;background:#24121B;border:1px solid #4A2532}
.btn{min-height:44px;display:inline-flex;align-items:center;padding:10px 18px;border-radius:8px;border:1px solid var(--ember);background:transparent;color:var(--ember-t);font-weight:600;text-decoration:none}
.btn:hover{background:#2A1D16}
.btn.solid{background:var(--ember);color:#1A0E06;font-weight:700}
.empty{padding:36px;text-align:center;border:1px dashed var(--line2);border-radius:var(--r);color:var(--muted)}

/* héroe */
.hero{position:relative;border:1px solid #3B2433;border-radius:20px;background:#170E16;padding:40px;display:flex;flex-wrap:wrap;align-items:center;gap:40px;overflow:hidden}
.hero.live{border-color:var(--blood);box-shadow:0 0 0 1px var(--blood),0 0 60px rgba(255,77,94,.25)}
.hero-txt{flex:1 1 460px;min-width:0;position:relative;display:flex;flex-direction:column;gap:18px}
.kicker{font-size:13px;letter-spacing:3px;color:var(--blood-t)}
.hero h1{font-size:clamp(40px,7vw,64px);color:#FFE9EC}
.hero p{margin:0;max-width:560px;color:#D9C9CF;font-size:17px}
.now{font-size:12px;font-weight:700;background:var(--blood);color:#1A0A0E;padding:3px 10px;border-radius:999px;animation:flick 1.6s infinite}
.timer{display:flex;flex-wrap:wrap;gap:12px}
.tbox{min-width:92px;padding:14px 12px 10px;border-radius:12px;background:#24121B;border:1px solid #4A2532;text-align:center}
.tbox b{display:block;font-family:'Pixelify Sans',monospace;font-size:44px;line-height:1;color:#FF6B7A;font-weight:700}
.tbox span{display:block;font-size:12px;letter-spacing:2px;color:#C7A9B2;margin-top:6px}
.ember{position:absolute;bottom:0;width:5px;height:5px;background:#FF5A6B;border-radius:1px;opacity:0;animation:floatUp 5s ease-out infinite}
@keyframes floatUp{0%{transform:translateY(0) scale(1);opacity:0}15%{opacity:1}100%{transform:translateY(-260px) scale(.4);opacity:0}}
.moonbox{flex:0 0 auto;position:relative;width:320px;height:320px;display:grid;place-items:center;margin:0 auto}
.ring{position:absolute;inset:0;border:1px dashed rgba(255,90,110,.35);border-radius:50%;animation:spin 26s linear infinite}
.ring i{position:absolute;top:-5px;left:50%;width:10px;height:10px;background:var(--blood);border-radius:2px}
.ring2{position:absolute;inset:34px;border:1px solid rgba(255,90,110,.2);border-radius:50%;animation:spin 40s linear infinite reverse}
.ring2 i{position:absolute;bottom:-4px;left:30%;width:8px;height:8px;background:#FF9B57;border-radius:2px}
.moon{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FF8A8F 0%,#E0344B 45%,#8E1328 100%);position:relative;overflow:hidden;animation:moonGlow 4s ease-in-out infinite}
.moon.pale{background:radial-gradient(circle at 35% 30%,#FFFFFF 0%,#D9D3E6 50%,#8C83A3 100%);animation:none;box-shadow:0 0 70px 10px rgba(220,215,255,.2)}
.moon i{position:absolute;border-radius:50%;background:rgba(90,8,24,.32)}
.moon.pale i{background:rgba(60,50,90,.18)}
@keyframes moonGlow{0%,100%{box-shadow:0 0 60px 10px rgba(255,60,80,.35),0 0 140px 40px rgba(255,40,60,.18)}50%{box-shadow:0 0 90px 22px rgba(255,60,80,.55),0 0 200px 70px rgba(255,40,60,.25)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* reloj */
.view > *, .grid > *, .row-head > *{min-width:0}
.clock-section{display:flex;flex-direction:column;gap:18px;width:100%;min-width:0}
.day-track{width:100%;min-width:0}
.upcoming-status{display:flex;flex-direction:column;gap:6px;padding:14px 18px}
.upcoming-status span{color:var(--soft);font-size:14px}
.clock{font-size:15px;padding:8px 14px;border-radius:8px;background:var(--s1);border:1px solid var(--line)}
.daybar{position:relative;width:100%;height:64px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(90deg,#3C6EA8 0%,#79B4E6 22%,#79B4E6 42%,#E8875A 50%,#2A1F4A 56%,#120E22 70%,#120E22 92%,#E8875A 98%)}
.daybar .mk{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.7)}
.daybar .bm{position:absolute;top:0;bottom:0;left:53.3%;width:7.1%;background:rgba(255,77,94,.28);border-left:2px solid var(--blood)}
.orb{position:absolute;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid #fff;transition:left 1s linear}
.dayl{position:relative;height:36px;font-size:12px;color:var(--muted);margin-top:8px}
.dayl span{position:absolute;top:0;white-space:nowrap;text-align:center;transform:translateX(-50%)}
.dayl span:nth-child(1){left:0;transform:none;text-align:left}
.dayl span:nth-child(2){left:25%}
.dayl span:nth-child(3){left:50%}
.dayl span:nth-child(4){left:75%}
.dayl span:nth-child(5){right:0;transform:none;text-align:right}
.dayl b{display:block;font-weight:400}
.dayl small{display:block;font-size:11px}
.roll-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.roll-h b{font-size:18px}
.roll-t{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700}
.phases{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.ph{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 2px;border-radius:10px;text-align:center;font-size:12px;color:var(--muted);line-height:1.2}
.ph.today{background:#241C2F}
.ph.blood{background:#2A1119;color:#FF9AA5}
.ph .disc{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2)}

/* contadores */
.count{position:relative;overflow:hidden}
.count::after{content:"";position:absolute;right:-20px;top:-20px;width:90px;height:90px;border-radius:50%;background:var(--c);opacity:.12}
.count b{display:block;font-family:'Pixelify Sans',monospace;font-size:48px;line-height:1;color:var(--c)}
.count .l{margin-top:8px;font-weight:600}
.count .s{font-size:13px;color:var(--muted)}

/* eventos */
.ev{display:flex;flex-direction:column;gap:8px;padding:18px}
.ev-h{display:flex;align-items:center;gap:12px}
.glyph{width:40px;height:40px;border-radius:8px;background:var(--c);display:grid;place-items:center;flex:0 0 auto;font-family:'Pixelify Sans',monospace;font-weight:700;color:#120D18}
.ev-n{font-weight:700;font-size:17px;line-height:1.2}
.ev-m{font-size:12px;color:var(--c);letter-spacing:1px}
.ev-d{font-size:14px;color:#CFC4D8}
.ev-s{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px;margin-top:auto}
.hist{display:flex;flex-direction:column;gap:8px;border-top:4px solid var(--c)}
.meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted)}
.hist .t{font-size:20px;font-weight:700}
.res{font-weight:700}

/* comandos */
.search{flex:0 1 380px;min-width:260px;display:flex;flex-direction:column;gap:6px}
.search label{font-size:13px;color:var(--muted)}
.search input{min-height:48px;padding:12px 16px;border-radius:10px;border:1px solid var(--line2);background:var(--s1);color:var(--text);font-size:16px;font-family:'JetBrains Mono',monospace}
.grp-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.grp-h i{width:12px;height:12px;border-radius:3px;background:var(--c)}
.grp-h h2{font-size:22px}
.grp-h span{font-size:13px;color:var(--muted)}
.cmd{text-align:left;min-height:44px;padding:16px 18px;border-radius:12px;border:1px solid var(--line);background:var(--s1);color:var(--text);display:flex;flex-direction:column;gap:6px;transition:border-color .2s,transform .2s}
.cmd:hover{border-color:var(--ember);transform:translateY(-2px)}
.cmd-top{display:flex;justify-content:space-between;gap:10px;align-items:center;width:100%}
.cmd-top code{font-size:16px;font-weight:700}
.cmd-top small{font-size:12px;color:var(--faint);font-weight:600}
.cmd.copied .cmd-top small{color:var(--ok)}
.cmd-d{font-size:14px;color:#CFC4D8}

/* crónica */
.split{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.split > .main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:22px}
.split > aside{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:18px}
.tl{list-style:none;margin:0;padding:0 0 0 28px;position:relative;display:flex;flex-direction:column;gap:16px}
.tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl li{position:relative}
.tl li::before{content:"";position:absolute;left:-26px;top:20px;width:16px;height:16px;border-radius:4px;background:var(--c);box-shadow:0 0 12px var(--c)}
.first{font-size:11px;font-weight:700;letter-spacing:1px;padding:2px 8px;border-radius:4px;background:var(--gold);color:#2A1C00}
.prog{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:12px 0 16px}
.prog i{display:block;height:100%;background:var(--gold);width:0;transform-origin:left}
.firsts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.firsts li{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px}
.firsts li.on{background:var(--s2)}
.firsts li.off{opacity:.55}
.firsts li i{width:22px;height:22px;border-radius:5px;background:var(--c);flex:0 0 auto}
.firsts b{display:block;font-size:14px}
.firsts small{display:block;font-size:12px;color:var(--muted)}
.juan{border:1px solid #4A3A10;background:#1D170A;text-align:center}
.juan b{display:block;font-family:'Pixelify Sans',monospace;font-size:56px;line-height:1;color:var(--gold)}

/* estadísticas */
.bars{display:flex;flex-direction:column;gap:12px}
.barrow{display:grid;grid-template-columns:150px minmax(0,1fr) 52px;gap:12px;align-items:center;font-size:14px}
.track{height:22px;background:var(--s2);border-radius:4px;overflow:hidden}
.track i{display:block;height:100%;border-radius:4px;background:var(--c);transform-origin:left;width:var(--w)}
.feed{display:flex;flex-direction:column;gap:10px}
.feed div{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--s2);border-radius:10px}
.feed i{width:10px;height:10px;margin-top:7px;border-radius:2px;background:var(--c);flex:0 0 auto}
.feed small{display:block;font-size:12px;color:var(--muted)}
.tablebox{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:620px;font-size:15px}
th{text-align:left;color:var(--muted);font-size:13px;font-weight:600;padding:10px 8px}
td{padding:12px 8px;border-top:1px solid var(--line)}
td.pos{font-family:'Pixelify Sans',monospace;font-size:20px}

/* pie */
.foot{position:relative;z-index:1;border-top:1px solid var(--line);background:var(--bg2)}
.foot-in{padding-top:28px;padding-bottom:28px;display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted)}
.foot-name{color:var(--text);font-size:18px}
.foot-links{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

@media (max-width:760px){
  .wrap{padding:0 16px}
  .hero{padding:24px;gap:24px}
  .moonbox{width:220px;height:220px}
  .moon{width:140px;height:140px}
  .tbox{min-width:70px}.tbox b{font-size:34px}
  .h-page{font-size:40px}
  .barrow{grid-template-columns:96px minmax(0,1fr) 40px}
  .phases{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hide-sm{display:none}
  .top-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .brand{grid-row:1;grid-column:1;min-width:0;gap:8px}
  .brand-name{font-size:20px}
  .brand-sub{font-size:9px;letter-spacing:1px}
  .logo{width:28px;height:28px;flex-shrink:0}
  .status{grid-row:1;grid-column:2;margin-left:0;font-size:12px;padding:6px 8px;gap:6px}
  .tabs{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .tabs a{justify-content:center;padding:8px 2px;font-size:12px}
  .daybar{height:48px}
  .dayl{height:20px}
  .dayl b{display:none}
  .dayl small{font-size:11px}
  .hero h1{font-size:clamp(30px,8vw,42px);overflow-wrap:anywhere}
  .card{padding:18px}
  .clock{max-width:100%;overflow-wrap:anywhere}
  .foot-links{max-width:100%}
  .foot-in{padding-top:24px;padding-bottom:24px}
}
@media (max-width:360px){
  .brand-name{font-size:17px}
  .brand-sub{font-size:8px}
  .hero{padding:18px}
  .moonbox{width:180px;height:180px}
  .ring2{inset:22px}
  .moon{width:120px;height:120px}
  .phases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .barrow{grid-template-columns:80px minmax(0,1fr) 28px;gap:6px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}