/* =================================================================
   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;
  background:
    linear-gradient(180deg, rgba(7,6,15,.06) 0%, rgba(7,6,15,.38) 55%, rgba(7,6,15,.70) 100%),
    radial-gradient(58vmax 58vmax at -6vmax -8vmax, rgba(91,70,255,.92) 0%, transparent 62%),
    radial-gradient(48vmax 48vmax at 106vw 4vmax, rgba(180,54,143,.72) 0%, transparent 62%),
    radial-gradient(44vmax 44vmax at 20vw 112vh, rgba(255,157,61,.45) 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; }
}

/* =================================================================
   MAQUETACIÓN DE LA LANDING
   -----------------------------------------------------------------
   Barra flotante en píldora, contenido y menús sobre paneles de
   cristal. Esto es lo que permite subir la aurora: el texto deja de
   estar desnudo sobre el fondo y pasa a tener un suelo propio.
   ================================================================= */

:root {
  --ancho: min(74rem, calc(100% - 1.6rem));
  /* Cristal con suelo opaco: el brillo de la landing, pero con un
     mínimo garantizado para que el contraste sea medible. */
  --panel: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  --panel-base: #FFFFFF;
}
[data-md-color-scheme="slate"] { --panel-base: rgba(7,6,15,.74); }

/* ── Cabecera flotante ──────────────────────────────────────────── */
.md-header {
  position: fixed;
  top: .7rem; left: 0; right: 0;
  width: var(--ancho);
  margin-inline: auto;
  height: 3.3rem;
  border-radius: 999px;
  border: 1px solid var(--borde);
  z-index: 10;
}
.md-header__inner { padding: 0 .4rem 0 1.15rem; height: 3.3rem; }
.md-header__title { margin-left: .5rem; font-size: 1.05rem; }
.md-header__button.md-logo { padding: 0; margin-right: .1rem; }
.md-header__button.md-logo img { height: 1.75rem; }

.md-container { padding-top: 4.6rem; }

/* ── Pestañas: segunda píldora ──────────────────────────────────── */
.md-tabs {
  width: var(--ancho);
  margin: 0 auto 1.7rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--panel), var(--panel-base);
  box-shadow: var(--cristal-sombra);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  overflow: hidden;
}
.md-tabs__list { padding: .25rem .5rem; }
.md-tabs__link {
  margin: 0; padding: .45rem .95rem;
  border-radius: 999px;
  font-size: .76rem;
}
.md-tabs__link:hover { background: rgba(255,255,255,.08); }
[data-md-color-scheme="default"] .md-tabs__link:hover { background: rgba(91,63,214,.09); }

/* ── Contenido sobre panel de cristal ───────────────────────────── */
.md-content {
  background: var(--panel), var(--panel-base);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--cristal-sombra);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  overflow: hidden;
}
.md-content__inner { padding: 1.6rem 2.1rem 3rem; margin: 0; }
.md-content__inner::before { display: none; }

/* ── Menús laterales, también flotando ──────────────────────────── */
@media screen and (min-width: 76.25em) {
  .md-sidebar { padding-top: 0; }
  .md-sidebar__scrollwrap {
    background: var(--panel), var(--panel-base);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    box-shadow: var(--cristal-sombra);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    padding: .85rem .7rem;
    margin: 0;
  }
  .md-nav { font-size: .72rem; }
}

/* ── Pie ────────────────────────────────────────────────────────── */
.md-footer { margin-top: 1.6rem; }
.md-footer-meta { border-radius: var(--r-md); background: transparent; }

/* ── Tipografía más grande, como en la landing ──────────────────── */
.md-typeset h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); letter-spacing: -.035em; }
.md-typeset h2 { font-size: clamp(1.3rem, 2.4vw, 1.72rem); letter-spacing: -.03em; }
.md-typeset h3 { font-size: 1.14rem; }

/* Las tablas y avisos ya no necesitan su propio cristal: están
   dentro del panel. Se quedan con un borde y un fondo sutil. */
.md-typeset table:not([class]) {
  background: rgba(255,255,255,.035);
  box-shadow: none;
}
[data-md-color-scheme="default"] .md-typeset table:not([class]) { background: #FCFBFF; }
.md-typeset .admonition, .md-typeset details { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  }

/* ── Móvil ──────────────────────────────────────────────────────── */
@media screen and (max-width: 76.1875em) {
  :root { --ancho: calc(100% - 1rem); }
  .md-header { top: .5rem; }
  .md-container { padding-top: 4.2rem; }
  .md-tabs { display: none; }
  .md-content { border-radius: var(--r-md); }
  .md-content__inner { padding: 1.1rem 1.15rem 2.4rem; }
}

/* ── Correcciones de la maquetación ─────────────────────────────── */

/* Los paneles se salían por los lados: la rejilla de Material era más
   ancha que la píldora de la cabecera. Ahora comparten medida. */
.md-grid, .md-main__inner { max-width: var(--ancho); margin-inline: auto; }
@media screen and (min-width: 76.25em) {
  .md-main__inner { display: flex; gap: .9rem; align-items: flex-start; }
  .md-sidebar { width: 11.5rem; flex: none; margin: 0; }
  .md-sidebar--secondary { width: 11rem; }
  .md-content { flex: 1 1 auto; min-width: 0; }
  /* que el panel del menú mida lo que mide su contenido, no la página */
  .md-sidebar__scrollwrap { max-height: calc(100vh - 6rem); }
}

/* El overflow:hidden del panel recortaba el scroll lateral de las
   tablas. La curva se mantiene, el contenido ya no se corta. */
.md-content { overflow: visible; }
.md-content__inner { border-radius: inherit; }

/* Tablas dentro del panel: borde propio y esquinas suaves */
.md-typeset__table { margin: 1.2em 0; }
.md-typeset table:not([class]) {
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  overflow: hidden;
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th { background: rgba(255,255,255,.06); }

/* El menú lateral ya tiene su propio panel: fuera el fondo opaco */
[data-md-color-scheme="slate"] .md-nav--primary,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__list { background: transparent; }
@media screen and (max-width: 76.1875em) {
  [data-md-color-scheme="slate"] .md-nav--primary,
  [data-md-color-scheme="slate"] .md-nav--primary .md-nav__list { background: var(--void); }
}
.md-nav__title { background: transparent !important; box-shadow: none; padding: .3rem .6rem .5rem; }
@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__title,
  .md-nav--primary .md-nav__title[for="__drawer"] {
    background: var(--elevada-solida) !important;
    box-shadow: 0 1px 0 var(--borde);
  }
}

/* La curva de la tabla va en su envoltorio, no en la tabla: puesta en
   la tabla, el overflow:hidden recortaba las columnas de la derecha. */
.md-typeset table:not([class]) { overflow: visible; border-radius: 0; border: 0; }
.md-typeset__table {
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.md-typeset__table > table { margin: 0; width: 100%; }

/* Los paneles laterales medían toda la página aunque el menú fuera corto */
@media screen and (min-width: 76.25em) {
  .md-sidebar__scrollwrap { height: auto; max-height: calc(100vh - 6.5rem); overflow-y: auto; }
  .md-sidebar--secondary .md-sidebar__scrollwrap { height: auto; }
}

/* Títulos de los menús: sin caja ni sombra dentro del panel */
@media screen and (min-width: 76.25em) {
  .md-nav__title { box-shadow: none !important; background: transparent !important; }
}

/* Material da a la tabla un inline-block con márgenes propios que la
   sacaban del panel por la derecha. Se ata al ancho disponible. */
.md-typeset__table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}
.md-typeset__table > table:not([class]) { display: table; width: 100%; min-width: 0; }

/* Un poco más de aire horizontal para el contenido: con esto la tabla
   de sanciones cabe entera en pantallas normales en vez de scrollear. */
.md-content__inner { padding-inline: 1.7rem; }
@media screen and (min-width: 76.25em) {
  .md-sidebar--secondary { width: 10rem; }
}

/* Cuando la tabla sí es más ancha que su hueco, que se note que se
   puede arrastrar: un desvanecido en el borde derecho. */
.md-typeset__table { position: relative; }
.md-typeset__table::after {
  content: "";
  position: absolute; inset-block: 1px; right: 1px; width: 2.2rem;
  pointer-events: none;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: linear-gradient(90deg, transparent, var(--desvanecido));
  opacity: 0; transition: opacity .2s;
}
:root { --desvanecido: #FCFBFF; }
[data-md-color-scheme="slate"] { --desvanecido: #15132c; }
.md-typeset__table.ast-scroll::after { opacity: 1; }

/* El nowrap de las sanciones obligaba a la columna a medir lo que la
   frase más larga («Permaban de la cuenta extra · +5d a la principal»,
   437px) y dejaba sin sitio a la columna de detalles. Que envuelva. */
.sev { white-space: normal; text-wrap: balance; }

/* Los paneles laterales medían 676px aunque su menú midiera 131:
   Material fija la altura del scrollwrap. Que se ajusten al contenido. */
@media screen and (min-width: 76.25em) {
  .md-sidebar__scrollwrap {
    height: auto !important;
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
  }
}

/* La cabecera de la tabla había perdido su tinte al quitarle el borde */
.md-typeset__table > table:not([class]) th {
  background: #F4F1FE;
  border-bottom: 1px solid var(--borde-fuerte);
}
[data-md-color-scheme="slate"] .md-typeset__table > table:not([class]) th {
  background: rgba(255,255,255,.07);
}

/* En móvil el panel ocupa casi todo el ancho y le queda justo encima
   el lóbulo magenta de la aurora: con el suelo al 74% el texto
   atenuado caía a 2,71:1. Subido al 88%, medido. */
[data-md-color-scheme="slate"] { --panel-base: rgba(7,6,15,.88); }

/* Las etiquetas de pestañas se salían 29px en móvil al dejar de
   recortar el panel. Que scrolleen dentro de su propia caja. */
.md-typeset .tabbed-set { max-width: 100%; }
.md-typeset .tabbed-labels {
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.md-typeset .tabbed-labels::-webkit-scrollbar { display: none; }
.md-typeset .tabbed-content { max-width: 100%; overflow-x: auto; }

/* Material saca las etiquetas de pestañas del contenedor con márgenes
   negativos calculados sobre SU padding. Con el padding del panel esa
   cuenta ya no cuadra y se salían 29px. Se quedan dentro. */
@media screen and (max-width: 76.1875em) {
  .md-typeset .tabbed-labels {
    margin-inline: 0;
    padding-inline: 0;
    width: auto;
    max-width: 100%;
    scroll-padding-inline: 0;
  }
}

/* La regla de Material gana por especificidad; se la iguala. */
.md-typeset .tabbed-set > .tabbed-labels,
.md-typeset .tabbed-set > input + .tabbed-labels {
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}