/* styles_moonknight.css */
:root{
  /* Moon Knight vibe: negros, grafito, plata fría, cian lunar */
  --bg:#05070b; --text:#e9edf4; --muted:#aeb6c7;
  --panel:#0b0f18e6; --panel2:#0f1420; --border:#2a344a;
  --accent:#7fd7ff; --accent2:#bfe7ff; --silver:#dfe6f2;
  --wknd:#121827; --wknd-border:#3a4b6b;

  --pad:clamp(12px,2vw,22px); --gap:clamp(10px,2vw,18px);
  --cell-gap:10px; --badge:28px; --radius:16px;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Noto Sans',Arial,sans-serif;
  background: #000 url('fondo.jpeg') center/cover fixed no-repeat;
}
#skyCanvas{position:fixed; inset:0; z-index:-1; pointer-events:none}

/* ===== Título 3D variante ===== */
.title3d-alt{
  margin:20px 0 8px; line-height:.86; font-weight:800;
  font-size:clamp(32px,8.2vw,70px); letter-spacing:.08em;
  background: conic-gradient(from 200deg at 50% 40%, #ffffff 0 25%, #cfe0ff 25% 55%, #9ac7ff 55% 75%, #ffffff 75% 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.5),
    0 2px 0 rgba(230,240,255,.4),
    0 12px 18px rgba(0,0,0,.55),
    0 0 50px rgba(127,215,255,.18);
  filter: drop-shadow(0 6px 24px rgba(127,215,255,.18));
}
.top{max-width:1200px; margin:22px auto 10px; padding:0 var(--pad); display:flex; align-items:center; justify-content:space-between; gap:10px}
.year-ctrl{display:flex; gap:10px; align-items:center}
.year-ctrl .y{min-width:90px; text-align:center; font-weight:800}
.year-ctrl button{cursor:pointer; border:1px solid var(--border); background:linear-gradient(180deg,#0c111d,#090e18); color:var(--text); padding:8px 12px; border-radius:12px}

.shell{max-width:1200px; margin:0 auto 100px; padding:0 var(--pad); display:grid; gap:var(--gap)}
.panel{ background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--border); border-radius:var(--radius); padding:var(--pad); box-shadow:0 28px 80px rgba(0,0,0,.35) }
.panel__title{ margin:0; font-weight:800; letter-spacing:.06em }
.center{ text-align:center }

/* ===== Lista de meses ===== */
.month-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
@media(min-width:720px){ .month-list{ grid-template-columns:repeat(4,1fr) } }
.month-btn{
  cursor:pointer; border:1px solid var(--border);
  background:linear-gradient(180deg,#0d1321,#0a0f1a);
  color:var(--text); border-radius:18px; padding:14px 16px;
  text-align:center; font-weight:800; position:relative;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow:inset 0 10px 16px rgba(255,255,255,.02), 0 10px 24px rgba(0,0,0,.28);
}
.month-btn:hover{ transform:translateY(-1px); border-color:#3d577e }
.month-btn.active{
  outline:2px solid var(--accent); outline-offset:3px;
}
.month-btn.active::after{        /* relleno interior sutil */
  content:""; position:absolute; inset:5px;
  border-radius:14px; background:linear-gradient(180deg, rgba(127,215,255,.06), rgba(127,215,255,.02));
  box-shadow:0 0 0 1px rgba(127,215,255,.08) inset;
}

/* ===== Mes ===== */
.month-grid{ display:grid; gap:12px }
.dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:var(--cell-gap); color:var(--muted); font-weight:800; letter-spacing:.08em }
.dow span{text-align:center; padding:6px 0; border-radius:10px; background:#0d1523}
.dow .wknd{ background:var(--wknd); color:#e7c6cf }

.weeks{ display:grid; gap:var(--cell-gap) }
.week{ display:grid; grid-template-columns:repeat(7,1fr); gap:var(--cell-gap) }
.day{
  position:relative; border:1px solid var(--border); border-radius:14px;
  background:linear-gradient(180deg,#0f1724,#0b1322);
  min-height:78px; display:flex; align-items:flex-start; justify-content:flex-end; padding:8px 10px; cursor:pointer;
  transition:border-color .12s ease, transform .12s ease;
}
.day:hover{ border-color:var(--accent) }
.day.is-empty{ background:#0c1320; opacity:.55; pointer-events:none }
.day.is-today{ outline:2px solid var(--accent); outline-offset:2px }
.day .date{ position:absolute; top:8px; left:8px; width:var(--badge); height:var(--badge);
  border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800;
  background:#1a2436; color:#e3eeff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) }

/* fin de semana tintado */
.week > :nth-child(6), .week > :nth-child(7){
  background:linear-gradient(180deg,var(--wknd), #151c2a);
  border-color:var(--wknd-border);
}
.week > :nth-child(6):hover, .week > :nth-child(7):hover{ border-color:#5f7aa5 }

/* ===== Modal centrado ===== */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:40 }
.modal.show{ opacity:1; pointer-events:auto }
.dialog{
  width:min(980px,96vw); max-height:85vh; background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border); border-radius:20px; overflow:auto;
  box-shadow:0 40px 120px rgba(0,0,0,.5);
}
.dialog__head{ display:flex; align-items:center; justify-content:center; padding:14px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background:inherit }
.dialog__title{ margin:0; font-weight:800; letter-spacing:.1em; color:var(--silver) }
.icon-btn{ position:absolute; right:12px; top:10px; cursor:pointer; border:1px solid var(--border); background:#0e1423; color:#e9edf4; width:38px; height:38px; border-radius:10px }
.dialog__body{ display:grid; grid-template-columns:1.2fr .8fr; gap:16px; padding:16px }
@media(max-width:900px){ .dialog__body{ grid-template-columns:1fr } }

.moon-visual{ width:100%; aspect-ratio:1; border-radius:14px; background:#0f1724; display:flex; align-items:center; justify-content:center }
#moonCanvas{ width:100%; height:auto; display:block; border-radius:50% }
.facts p{ margin:.35rem 0; color:var(--muted); font-weight:700 }
.btn{ cursor:pointer; border:1px solid var(--border); background:#0f1724; color:var(--text); border-radius:999px; padding:10px 14px; font-weight:800 }
.pager{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }

@media (prefers-reduced-motion:reduce){ #skyCanvas{display:none} }