/* =================================================================
   ASTRALITY · wiki
   Lenguaje visual tomado de la landing: mismos tokens, misma
   tipografía de display, misma receta de cristal, misma atmósfera.
   Añadido aquí: tema claro derivado de los mismos tonos, porque
   esto es una superficie de lectura larga y no una landing.
   ================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  --ast-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* tokens de la landing */
  --void:       #07060f;
  --nova:       #8b7cff;
  --nova-soft:  #b6acff;
  --solar:      #ffb454;
  --solar-deep: #1a1206;
  --ink:        #f3f1ff;
  --ink-mute:   #aaa6c9;
  --live:       #4ade80;

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
}

/* ── Oscuro: el tema canónico, idéntico a la landing ────────────── */
[data-md-color-scheme="slate"] {
  --md-hue: 252;
  --superficie: var(--void);
  --elevada-solida: #14122a;
  --borde: rgba(255,255,255,.11);
  --borde-fuerte: rgba(255,255,255,.2);

  --cristal: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  --cristal-sombra: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 60px -24px rgba(0,0,0,.65);

  --star:   #FFB13D;
  --solarr: #FF9464;
  --galaxy: #8FE8DC;
  --astral: #C79CFF;
  --helper: #5FE86F;
  --mod:    #8CA4FF;
  --admin:  #F2C94C;
  --owner:  #F0E64A;
  --sev-leve:  #57E07A;
  --sev-media: #FFC24D;
  --sev-grave: #FF8E8E;

  --md-default-bg-color:          var(--void);
  --md-default-fg-color:          var(--ink);
  --md-default-fg-color--light:   var(--ink-mute);
  --md-default-fg-color--lighter: #6f6b91;
  --md-default-fg-color--lightest: rgba(255,255,255,.11);
  --md-primary-fg-color:          var(--nova-soft);
  --md-accent-fg-color:           var(--solar);
  --md-typeset-a-color:           var(--nova-soft);
  --md-code-bg-color:             rgba(255,255,255,.055);
  --md-code-fg-color:             #ddd8ff;
  --md-footer-bg-color:           transparent;
}

/* ── Claro: base incondicional. Si el atributo de tema aún no está
      puesto, esto es lo que se ve; nada queda sin definir. ─────────── */
:root, [data-md-color-scheme="default"] {
  --superficie: #FAF9FF;
  --elevada-solida: #FFFFFF;
  --borde: #E6E2F5;
  --borde-fuerte: #CFC9E8;

  --cristal: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.74));
  --cristal-sombra: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 44px -22px rgba(23,21,44,.3);

  --star:   #8A5200;
  --solarr: #A33F0E;
  --galaxy: #0F6E63;
  --astral: #6B2BD9;
  --helper: #0E7A22;
  --mod:    #2440BE;
  --admin:  #8A6100;
  --owner:  #6F6300;
  --sev-leve:  #0B6E35;
  --sev-media: #8A4B00;
  --sev-grave: #B01B26;

  --md-default-bg-color:          #FAF9FF;
  --md-default-fg-color:          #17152C;
  --md-default-fg-color--light:   #56526F;
  --md-default-fg-color--lighter: #8B87A6;
  --md-default-fg-color--lightest: #E6E2F5;
  --md-primary-fg-color:          #5B3FD6;
  --md-accent-fg-color:           #8A4B00;
  --md-typeset-a-color:           #5B3FD6;
  --md-code-bg-color:             #F1EEFC;
  --md-code-fg-color:             #2A2350;
  --md-footer-bg-color:           transparent;
}

/* El fondo del body se propaga al lienzo y taparía la aurora, así que la
   base clara vive en html y la capa oscura la pinta la propia aurora. */
html { background: #FAF9FF; }
@media (prefers-color-scheme: dark) { html { background: #07060f; } }
body { background: transparent; }

/* ── Atmósfera: aurora + estrellas, como en la landing ───────────
   La aurora se concentra arriba y un velo la apaga hacia abajo, para
   que la zona de lectura quede sobre color plano y el contraste siga
   siendo medible. */
body[data-md-color-scheme="slate"]::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* El velo usa píxeles, no porcentajes: la aurora vive en la franja
     superior —detrás de la cabecera de cristal— y a partir de 210px
     el fondo es color plano, que es donde empieza el texto. */
  background:
    linear-gradient(180deg,
      rgba(7,6,15,.10) 0px,
      rgba(7,6,15,.46) 96px,
      rgba(7,6,15,.88) 168px,
      #07060f 210px),
    radial-gradient(58vmax 58vmax at -6vmax -8vmax, rgba(91,70,255,.9) 0%, transparent 62%),
    radial-gradient(48vmax 48vmax at 106vw 4vmax, rgba(180,54,143,.7) 0%, transparent 62%),
    #07060f;
}
body[data-md-color-scheme="slate"]::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .2;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 78% 12%, #fff 60%, transparent 61%),
    radial-gradient(1.4px 1.4px at 44% 34%, #cfc8ff 60%, transparent 61%),
    radial-gradient(1px 1px at 90% 46%, #fff 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 23% 62%, #ffe2b8 60%, transparent 61%),
    radial-gradient(1px 1px at 66% 74%, #fff 60%, transparent 61%),
    radial-gradient(1.3px 1.3px at 8% 88%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 55% 92%, #cfc8ff 60%, transparent 61%);
  background-size: 520px 520px;
  animation: twinkle 7s ease-in-out infinite alternate;
}
/* Tope de opacidad calculado: por encima de .22 un punto de estrella
   deja el texto atenuado por debajo de 4.5:1. */
@keyframes twinkle { from { opacity: .09; } to { opacity: .22; } }

[data-md-color-scheme="slate"] .md-main,
[data-md-color-scheme="slate"] .md-container,
[data-md-color-scheme="slate"] .md-content { background: transparent; }

/* ── Cristal: solo capa flotante (cabecera), nunca contenido ────── */
.md-header {
  background: var(--cristal);
  border-bottom: 1px solid var(--borde);
  box-shadow: var(--cristal-sombra);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  color: var(--md-default-fg-color);
}
.md-tabs { background: transparent; border-bottom: 1px solid var(--borde); color: inherit; }
.md-header__title, .md-header__button { color: var(--md-default-fg-color); }
.md-tabs__link { opacity: 1; color: var(--md-default-fg-color--light); font-weight: 500; }
.md-tabs__link:hover { color: var(--md-default-fg-color); }
.md-tabs__link--active { color: var(--md-primary-fg-color); font-weight: 700; }

.md-search__form {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--borde);
  border-radius: 999px;
  box-shadow: none;
}
.md-search__form { background: #fff; }
[data-md-color-scheme="slate"] .md-search__form { background: rgba(255,255,255,.06); }
.md-search__input { color: var(--md-default-fg-color); }
.md-search__input::placeholder { color: var(--md-default-fg-color--lighter); }
.md-search__icon { color: var(--md-default-fg-color--light); }

@media (prefers-reduced-transparency: reduce) {
  .md-header { background: var(--elevada-solida); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body[data-md-color-scheme="slate"]::before { filter: none; background: var(--void); }
  body[data-md-color-scheme="slate"]::after { display: none; }
}

.md-header__button.md-logo img { height: 2rem; width: auto; }

/* ── Tipografía ─────────────────────────────────────────────────── */
.md-typeset { font-size: .8rem; line-height: 1.68; }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4,
.md-header__title, .md-nav__title, .md-tabs__link {
  font-family: var(--ast-display);
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--md-default-fg-color);
}
.md-typeset h1 { font-weight: 800; font-size: 2.35rem; line-height: 1.02; margin-bottom: .45em; }
.md-typeset h2 {
  font-weight: 700; font-size: 1.44rem;
  margin-top: 2.5em; padding-top: 1.1em;
  border-top: 1px solid var(--borde);
}
.md-typeset h3 { font-weight: 700; font-size: 1.08rem; }
.md-typeset p, .md-typeset li { max-width: 68ch; }
.md-typeset code { border-radius: 7px; font-size: .84em; padding: .16em .44em; }
.md-header__title, .md-nav__title, .md-tabs__link { font-weight: 700; }

/* Título degradado, como en la landing */
.md-typeset h1 {
  background: linear-gradient(100deg, #17152C 0%, #5B3FD6 52%, #A33F0E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-md-color-scheme="slate"] .md-typeset h1 {
  background: linear-gradient(100deg, var(--ink) 0%, #cfc8ff 42%, var(--solar) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Foco en ámbar, igual que la landing */
:where(a, button, input, summary, .rejilla a):focus-visible {
  outline: 2px solid #8A4B00; outline-offset: 3px; border-radius: 12px;
}
[data-md-color-scheme="slate"] :where(a, button, input, summary, .rejilla a):focus-visible {
  outline-color: var(--solar);
}

/* ── Áreas de pulsación ─────────────────────────────────────────── */
.md-nav__link, .md-tabs__link { min-height: 24px; display: flex; align-items: center; }
@media screen and (max-width: 76.1875em) { .md-nav__link { min-height: 44px; } }
.md-search__options > .md-search__icon,
.md-search__options button.md-search__icon { width: 26px !important; height: 26px !important; padding: 4px; }
.md-typeset .tabbed-control .tabbed-button { width: 26px; height: 26px; }
.md-typeset .headerlink {
  color: var(--md-default-fg-color--light);
  padding: 0 .35em; min-width: 24px; display: inline-block; text-align: center;
}
.md-typeset :hover > .headerlink, .md-typeset .headerlink:focus { color: var(--md-accent-fg-color); }

/* Cabecera del cajón lateral en móvil */
.md-nav--primary .md-nav__title,
.md-nav--primary .md-nav__title[for="__drawer"] {
  background: var(--elevada-solida);
  color: var(--md-default-fg-color);
  box-shadow: 0 1px 0 var(--borde);
}
.md-nav--primary .md-nav__title .md-nav__button,
.md-nav--primary .md-nav__title[for="__drawer"] .md-nav__button { color: var(--md-default-fg-color); }
[data-md-color-scheme="slate"] .md-nav--primary,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__list { background: var(--void); }

/* ── Tablas ─────────────────────────────────────────────────────── */
.md-grid { max-width: 71rem; }
.md-typeset__table { overflow-x: auto; }
.md-typeset table:not([class]) {
  font-size: .73rem;
  font-variant-numeric: tabular-nums;
  background: var(--cristal);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--cristal-sombra);
}
.md-typeset table:not([class]) th {
  font-family: var(--ast-display);
  font-weight: 700; font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: #5B3FD6;
  background: #F4F1FE;
  border-bottom: 1px solid var(--borde-fuerte);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  color: var(--nova-soft); background: rgba(255,255,255,.04);
}
.md-typeset table:not([class]) td { border-top: 1px solid var(--borde); }
.md-typeset table:not([class]) tr:hover { background: #F7F5FE; }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover { background: rgba(255,255,255,.035); }

/* ── Severidad ──────────────────────────────────────────────────── */
.sev { font-weight: 700; white-space: nowrap; }
.sev.leve  { color: var(--sev-leve); }
.sev.media { color: var(--sev-media); }
.sev.grave { color: var(--sev-grave); }

/* ── Fichas de rango ────────────────────────────────────────────── */
.rango {
  display: inline-block; padding: .1em .66em; border-radius: 999px;
  font-family: var(--ast-display); font-weight: 700; font-size: .8em;
  letter-spacing: .01em; white-space: nowrap;
  color: var(--astral); border: 1px solid currentColor;
}
.rango.star { color: var(--star); }   .rango.solar  { color: var(--solarr); }
.rango.galaxy { color: var(--galaxy); } .rango.astral { color: var(--astral); }
.rango.helper { color: var(--helper); } .rango.mod    { color: var(--mod); }
.rango.admin { color: var(--admin); }  .rango.owner  { color: var(--owner); }

/* ── Elemento firma: la escalera de rangos ──────────────────────── */
.escalera { display: flex; flex-direction: column; gap: .6rem; margin: 1.9rem 0 2.3rem; padding: 0; list-style: none; }
.escalera li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .95rem 1.2rem;
  background: var(--cristal);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--peldano);
  border-radius: var(--r-md);
  box-shadow: var(--cristal-sombra);
}
.escalera li .nombre { font-family: var(--ast-display); color: var(--peldano); flex: none; letter-spacing: -.03em; }
.escalera li .que { font-size: .78rem; color: var(--md-default-fg-color--light); min-width: 0; }
.escalera li:nth-child(1) { --peldano: var(--star); }
.escalera li:nth-child(2) { --peldano: var(--solarr); }
.escalera li:nth-child(3) { --peldano: var(--galaxy); }
.escalera li:nth-child(4) { --peldano: var(--astral); }
.escalera li:nth-child(1) .nombre { font-weight: 600; font-size: 1.08rem; }
.escalera li:nth-child(2) .nombre { font-weight: 700; font-size: 1.32rem; }
.escalera li:nth-child(3) .nombre { font-weight: 750; font-size: 1.6rem; }
.escalera li:nth-child(4) .nombre { font-weight: 800; font-size: 1.92rem; }
@media screen and (max-width: 500px) {
  .escalera li { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .escalera li:nth-child(4) .nombre { font-size: 1.55rem; }
}

/* ── Portada ────────────────────────────────────────────────────── */
.portada { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.9rem,2.4vw,1.6rem); padding: .3rem 0 1.5rem; }
.portada img { width: 130px; height: auto; flex: none; }
.portada .texto { flex: 1 1 300px; min-width: 0; }
.portada .texto > strong {
  display: block; font-family: var(--ast-display); font-weight: 700;
  font-size: 1.28rem; line-height: 1.24; letter-spacing: -.028em;
}
.portada .texto p { margin: .5rem 0 0; color: var(--md-default-fg-color--light); }
.portada .texto p.ip {
  margin-top: 1rem; font-family: var(--md-code-font);
  font-size: 1.28rem; font-weight: 700; color: #8A4B00; letter-spacing: -.02em;
}
[data-md-color-scheme="slate"] .portada .texto p.ip { color: var(--solar); }

/* ── Rejilla de accesos ─────────────────────────────────────────── */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px,1fr)); gap: .9rem; margin: 1.5rem 0 2.2rem; }
.rejilla p { display: contents; }
.rejilla a {
  display: block; min-height: 44px; padding: 1.15rem 1.25rem;
  background: var(--cristal);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--cristal-sombra);
  text-decoration: none !important; color: inherit !important;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s ease;
}
.rejilla a:hover { transform: translateY(-4px); border-color: #5B3FD6; }
[data-md-color-scheme="slate"] .rejilla a:hover { border-color: var(--nova); }
.rejilla a strong {
  display: block; font-family: var(--ast-display); font-weight: 700;
  font-size: 1.04rem; letter-spacing: -.028em; margin-bottom: .3rem;
  color: var(--md-primary-fg-color);
}
.rejilla a span { font-size: .78rem; line-height: 1.5; color: var(--md-default-fg-color--light); }

/* ── Avisos ─────────────────────────────────────────────────────── */
.md-typeset .admonition, .md-typeset details {
  border-radius: var(--r-md); border-width: 1px; border-left-width: 3px;
  box-shadow: var(--cristal-sombra); font-size: .76rem;
}
.md-typeset .admonition-title { font-family: var(--ast-display); font-weight: 700; letter-spacing: -.02em; }

/* ── Pie ────────────────────────────────────────────────────────── */
.md-footer, .md-footer-meta { background: transparent; border-top: 1px solid var(--borde); }
.md-footer__link { color: var(--md-default-fg-color--light); }

@media (prefers-reduced-motion: reduce) {
  .rejilla a, .rejilla a:hover { transition: none; transform: none; }
  body[data-md-color-scheme="slate"]::after { animation: none; opacity: .16; }
  * { scroll-behavior: auto !important; }
}

@media screen and (max-width: 480px) {
  .portada img { width: 90px; }
  .md-typeset h1 { font-size: 1.8rem; }
}