/* ═══════════════════════════════════════════════════════════════
   ZelixHost Free — hoja de estilo
   Los naranjas y amarillos de la marca ZelixHost: naranja para todo lo
   que es marca (botones, links, títulos) y amarillo para "andando / listo".
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Colores ───────────────────────────────────────────────────
   Tres modos: oscuro (negro brillante, ver más abajo), medio (default) y claro.
   Este primer bloque es la base que heredan todos. Todo el sitio sale de estas
   variables; el interruptor está arriba a la derecha y guarda la
   elección en el navegador (`data-theme` en el <html>). */
:root, :root[data-theme="dark"] {
  --bg: #1f2126;            /* gris oscuro parejo */
  --bg-2: #26292f;          /* barra superior */
  --card: #2a2d34;          /* tarjetas */
  --card-solid: #2a2d34;
  --card-2: #343841;        /* botones neutros */
  --soft: #24272d;          /* superficies dentro de una tarjeta */
  --hover: #33373f;
  --input-bg: #23262c;
  --line: #3a3f49;
  --line-strong: #4c525e;
  --tx: #e6e8ec;
  --tx-dim: #a0a6b1;
  --naranja: #ffb432;       /* el naranja de la marca ZelixHost */
  --naranja-2: #e69a1c;     /* el mismo naranja un tono abajo (hover, bordes) */
  --on-naranja: #26190a;    /* texto ENCIMA del naranja: va oscuro o no se lee */
  --ok: #ffe500;            /* amarillo "andando / listo" (esto era el verde) */
  --amber: #e0a33c;
  --amber-2: #efc04e;
  --violet: #7c6cd6;
  --cyan: #4fb3cc;
  --red: #e05c5c;
  --yellow: #e0b23c;
  --blue: #5b93d3;
  --msg-err: #f0b4b4;
  --msg-ok: #f0dc9a;
  --msg-info: #bcd4ee;
  --console-bg: #17191d;    /* la consola queda oscura en los dos modos */
  --console-tx: #c9ced6;
  --radius: 10px;
  --glow-naranja: none;
  --glass: rgba(38,41,47,.66);   /* pastillas traslúcidas encima de la foto de la portada */
  color-scheme: dark;
}

/* Modo medio (2026-09-25, pedido de Antu: "el negro se ve medio mal"). Hay
   cuatro paletas para elegir; `medio` es la que usa el botón. Se prueban con
   ?tema=medio-calido (etc.) en cualquier página. Las --at-* pintan el marco
   del panel (barras, tarjeta del server): ver "Modo medio del panel" al final. */
/* gris neutro (2026-09-25: antes pizarra azulada, Antu lo quería "más gris") */
:root[data-theme="medio"] {
  --card-solid: #3b3b3b;
  --bg: #313131;
  --bg-2: #383838;
  --card: #3b3b3b;
  --card-2: #494949;
  --soft: #363636;
  --hover: #444444;
  --input-bg: #343434;
  --line: #4f4f4f;
  --line-strong: #636363;
  --tx: #ededed;
  --tx-dim: #b1b1b1;
  --console-bg: #232323;
  --at-top: #2a2a2a;
  --at-top-line: #232323;
  --at-chip: #373737;
  --at-chip-line: #494949;
  --at-chip-hover: #424242;
  --at-side: #343434;
  --at-side-line: #2a2a2a;
  --at-srv: #3b3b3b;
  --at-srv-line: #2f2f2f;
  --at-nav-tx: #d7d7d7;
  --at-nav-hover: #3e3e3e;
  --at-nav-sel: #454545;
  --at-card: #4a4a4a;
  --at-card-sub: #c9c9c9;
  --at-card-btn: #5b5b5b;
  --at-card-btn-hover: #666666;
  --at-off: #525252;
  --at-off-tx: #e1e1e1;
  --glass: rgba(56,56,56,.7);
  color-scheme: dark;
}

/* grafito cálido: gris con un toque marrón, va con el naranja */
:root[data-theme="medio-calido"] {
  --bg: #2d2a27;
  --bg-2: #35312d;
  --card: #38342f;
  --card-2: #46413b;
  --soft: #312d2a;
  --hover: #413c36;
  --input-bg: #302c29;
  --line: #4d4741;
  --line-strong: #625b53;
  --tx: #f0ebe4;
  --tx-dim: #b5aca1;
  --console-bg: #1f1c1a;
  --at-top: #272421;
  --at-top-line: #1f1c1a;
  --at-chip: #36322e;
  --at-chip-line: #4a443e;
  --at-chip-hover: #403b35;
  --at-side: #2f2b28;
  --at-side-line: #262320;
  --at-srv: #38342f;
  --at-srv-line: #2b2825;
  --at-nav-tx: #ddd6cc;
  --at-nav-hover: #3a3531;
  --at-nav-sel: #443e38;
  --at-card: #47413b;
  --at-card-sub: #cfc6ba;
  --at-card-btn: #57504a;
  --at-card-btn-hover: #625a53;
  --at-off: #4d4640;
  --at-off-tx: #e6e0d8;
  --glass: rgba(53,49,45,.72);
  color-scheme: dark;
}

/* gris Discord: el mismo gris de la app de Discord */
:root[data-theme="medio-discord"] {
  --bg: #313338;
  --bg-2: #2b2d31;
  --card: #383a40;
  --card-2: #404249;
  --soft: #2e3035;
  --hover: #3f4147;
  --input-bg: #1e1f22;
  --line: #43454b;
  --line-strong: #55585f;
  --tx: #f2f3f5;
  --tx-dim: #b5bac1;
  --console-bg: #1e1f22;
  --at-top: #2b2d31;
  --at-top-line: #232428;
  --at-chip: #383a40;
  --at-chip-line: #45474d;
  --at-chip-hover: #404249;
  --at-side: #2b2d31;
  --at-side-line: #232428;
  --at-srv: #313338;
  --at-srv-line: #26282c;
  --at-nav-tx: #dbdee1;
  --at-nav-hover: #35373c;
  --at-nav-sel: #404249;
  --at-card: #404249;
  --at-card-sub: #c4c9ce;
  --at-card-btn: #4e5058;
  --at-card-btn-hover: #5c5e66;
  --at-off: #4e5058;
  --at-off-tx: #e3e5e8;
  --glass: rgba(43,45,49,.72);
  color-scheme: dark;
}

/* piedra: gris medio de verdad, bastante más claro que el oscuro */
:root[data-theme="medio-piedra"] {
  --bg: #3f4247;
  --bg-2: #474a50;
  --card: #4a4d53;
  --card-2: #575b62;
  --soft: #44474c;
  --hover: #52565d;
  --input-bg: #3b3e43;
  --line: #5c6067;
  --line-strong: #70757d;
  --tx: #f3f4f6;
  --tx-dim: #c0c4ca;
  --console-bg: #25272b;
  --at-top: #36393e;
  --at-top-line: #2e3034;
  --at-chip: #464a50;
  --at-chip-line: #5a5e65;
  --at-chip-hover: #50545a;
  --at-side: #3a3d42;
  --at-side-line: #313338;
  --at-srv: #45484e;
  --at-srv-line: #36393e;
  --at-nav-tx: #e2e4e8;
  --at-nav-hover: #464a50;
  --at-nav-sel: #52565d;
  --at-card: #565a61;
  --at-card-sub: #d3d6db;
  --at-card-btn: #676c74;
  --at-card-btn-hover: #737880;
  --at-off: #5d6168;
  --at-off-tx: #eceef1;
  --glass: rgba(71,74,80,.72);
  color-scheme: dark;
}

/* azul marino: profundo y sobrio, estilo panel de pagos */
:root[data-theme="medio-marino"] {
  --bg: #172131;
  --bg-2: #1c2739;
  --card: #1f2b3f;
  --card-2: #2a3850;
  --soft: #1b2536;
  --hover: #26334a;
  --input-bg: #152030;
  --line: #2d3b53;
  --line-strong: #3d4d68;
  --tx: #e8eef7;
  --tx-dim: #97a6bd;
  --console-bg: #0f1622;
  --at-top: #131c2a;
  --at-top-line: #0f1622;
  --at-chip: #1f2b3f;
  --at-chip-line: #2d3b53;
  --at-chip-hover: #26334a;
  --at-side: #182233;
  --at-side-line: #121a27;
  --at-srv: #1f2b3f;
  --at-srv-line: #16202f;
  --at-nav-tx: #cfd9e8;
  --at-nav-hover: #202c41;
  --at-nav-sel: #28364e;
  --at-card: #26344b;
  --at-card-sub: #aebbd0;
  --at-card-btn: #33435e;
  --at-card-btn-hover: #3c4d6a;
  --at-off: #2c3a52;
  --at-off-tx: #d5deeb;
  --glass: rgba(28,39,57,.74);
  color-scheme: dark;
}

/* índigo: azul violáceo, estilo apps modernas */
:root[data-theme="medio-indigo"] {
  --bg: #1c1d2e;
  --bg-2: #222338;
  --card: #25263b;
  --card-2: #30324b;
  --soft: #212236;
  --hover: #2c2e46;
  --input-bg: #1a1b2b;
  --line: #33354f;
  --line-strong: #45486a;
  --tx: #ecedf7;
  --tx-dim: #a0a3c0;
  --console-bg: #12131f;
  --at-top: #18192a;
  --at-top-line: #121320;
  --at-chip: #25263b;
  --at-chip-line: #33354f;
  --at-chip-hover: #2c2e46;
  --at-side: #1e1f31;
  --at-side-line: #16172a;
  --at-srv: #25263b;
  --at-srv-line: #1a1b2c;
  --at-nav-tx: #d4d6ea;
  --at-nav-hover: #26283e;
  --at-nav-sel: #2f3150;
  --at-card: #2d2f48;
  --at-card-sub: #b3b6d2;
  --at-card-btn: #3a3d5c;
  --at-card-btn-hover: #444868;
  --at-off: #34375a;
  --at-off-tx: #dcdef0;
  --glass: rgba(34,35,56,.74);
  color-scheme: dark;
}

/* verde petróleo: azul verdoso oscuro, distinto y elegante */
:root[data-theme="medio-petroleo"] {
  --bg: #15262b;
  --bg-2: #1a2e34;
  --card: #1c3238;
  --card-2: #264149;
  --soft: #182b31;
  --hover: #22393f;
  --input-bg: #132328;
  --line: #2a454c;
  --line-strong: #3a5a62;
  --tx: #e6f1f2;
  --tx-dim: #93adb2;
  --console-bg: #0d1a1e;
  --at-top: #112126;
  --at-top-line: #0d1a1e;
  --at-chip: #1c3238;
  --at-chip-line: #2a454c;
  --at-chip-hover: #22393f;
  --at-side: #172a2f;
  --at-side-line: #102026;
  --at-srv: #1c3238;
  --at-srv-line: #142629;
  --at-nav-tx: #cde0e2;
  --at-nav-hover: #1f353b;
  --at-nav-sel: #274249;
  --at-card: #233c43;
  --at-card-sub: #a9c2c6;
  --at-card-btn: #2f4c54;
  --at-card-btn-hover: #38575f;
  --at-off: #2b464d;
  --at-off-tx: #d6e6e8;
  --glass: rgba(26,46,52,.74);
  color-scheme: dark;
}

/* azul intenso */
:root[data-theme="medio-azul"] {
  --bg: #15263c;
  --bg-2: #192d48;
  --card: #1c314f;
  --card-2: #274063;
  --soft: #182a44;
  --hover: #213b5e;
  --input-bg: #132135;
  --line: #2e4566;
  --line-strong: #3f597e;
  --tx: #edf1f7;
  --tx-dim: #a8b5c7;
  --console-bg: #0c1522;
  --at-top: #101c2d;
  --at-top-line: #0c1522;
  --at-chip: #1b2f4b;
  --at-chip-line: #2e4566;
  --at-chip-hover: #213b5e;
  --at-side: #132237;
  --at-side-line: #0d1726;
  --at-srv: #1b2f4b;
  --at-srv-line: #111e31;
  --at-nav-tx: #d1dae6;
  --at-nav-hover: #192d48;
  --at-nav-sel: #20385b;
  --at-card: #213b5e;
  --at-card-sub: #b9c5d5;
  --at-card-btn: #2e4c75;
  --at-card-btn-hover: #365887;
  --at-off: #2c4363;
  --at-off-tx: #dee4ed;
  --glass: rgba(25,45,72,.74);
  color-scheme: dark;
}

/* violeta */
:root[data-theme="medio-violeta"] {
  --bg: #231938;
  --bg-2: #291e43;
  --card: #2d214a;
  --card-2: #3b2d5c;
  --soft: #271c3f;
  --hover: #362858;
  --input-bg: #1e1631;
  --line: #413360;
  --line-strong: #544577;
  --tx: #f0edf7;
  --tx-dim: #b1a8c7;
  --console-bg: #130e20;
  --at-top: #1a132a;
  --at-top-line: #130e20;
  --at-chip: #2b2046;
  --at-chip-line: #413360;
  --at-chip-hover: #362858;
  --at-side: #1f1733;
  --at-side-line: #161023;
  --at-srv: #2b2046;
  --at-srv-line: #1c152e;
  --at-nav-tx: #d7d1e6;
  --at-nav-hover: #291e43;
  --at-nav-sel: #342654;
  --at-card: #362858;
  --at-card-sub: #c1b9d5;
  --at-card-btn: #46366e;
  --at-card-btn-hover: #513e7f;
  --at-off: #3f325d;
  --at-off-tx: #e2deed;
  --glass: rgba(41,30,67,.74);
  color-scheme: dark;
}

/* verde bosque, tipo Minecraft */
:root[data-theme="medio-bosque"] {
  --bg: #1d3527;
  --bg-2: #223f2e;
  --card: #254633;
  --card-2: #325742;
  --soft: #203c2c;
  --hover: #2d533d;
  --input-bg: #192e22;
  --line: #385c47;
  --line-strong: #4b725b;
  --tx: #edf7f1;
  --tx-dim: #a8c7b5;
  --console-bg: #101e16;
  --at-top: #15281d;
  --at-top-line: #101e16;
  --at-chip: #244230;
  --at-chip-line: #385c47;
  --at-chip-hover: #2d533d;
  --at-side: #1a3023;
  --at-side-line: #122118;
  --at-srv: #244230;
  --at-srv-line: #172b1f;
  --at-nav-tx: #d1e6da;
  --at-nav-hover: #223f2e;
  --at-nav-sel: #2b503a;
  --at-card: #2d533d;
  --at-card-sub: #b9d5c5;
  --at-card-btn: #3c684e;
  --at-card-btn-hover: #45785a;
  --at-off: #365945;
  --at-off-tx: #deede4;
  --glass: rgba(34,63,46,.74);
  color-scheme: dark;
}

/* marrón tostado, va con el naranja */
:root[data-theme="medio-tostado"] {
  --bg: #37281a;
  --bg-2: #422f1f;
  --card: #493422;
  --card-2: #5b432f;
  --soft: #3e2d1d;
  --hover: #573e29;
  --input-bg: #312317;
  --line: #5f4935;
  --line-strong: #765d47;
  --tx: #f7f2ed;
  --tx-dim: #c7b7a8;
  --console-bg: #1f160f;
  --at-top: #2a1e14;
  --at-top-line: #1f160f;
  --at-chip: #453221;
  --at-chip-line: #5f4935;
  --at-chip-hover: #573e29;
  --at-side: #322418;
  --at-side-line: #231910;
  --at-srv: #453221;
  --at-srv-line: #2d2015;
  --at-nav-tx: #e6dbd1;
  --at-nav-hover: #422f1f;
  --at-nav-sel: #533c27;
  --at-card: #573e29;
  --at-card-sub: #d5c6b9;
  --at-card-btn: #6c5037;
  --at-card-btn-hover: #7d5c40;
  --at-off: #5c4633;
  --at-off-tx: #ede5de;
  --glass: rgba(66,47,31,.74);
  color-scheme: dark;
}

/* negro brillante = MODO OSCURO desde 2026-09-25 (antes era una paleta del medio).
   Negro profundo con tarjetas tipo vidrio negro (brillo en
   el borde de arriba) y un resplandor naranja suave arriba de todo. */
:root:is([data-theme="medio-negro"],[data-theme="dark"]) {
  --bg: #08080a;
  --bg-2: #0e0e11;
  --card: #111114;
  --card-solid: #111114;
  --card-2: #1c1c21;
  --soft: #0d0d10;
  --hover: #1a1a1f;
  --input-bg: #0b0b0e;
  --line: #232329;
  --line-strong: #34343c;
  --tx: #f5f5f7;
  --tx-dim: #9a9aa5;
  --console-bg: #050506;
  --at-top: rgba(10,10,12,.82);
  --at-top-line: #1c1c21;
  --at-chip: #141418;
  --at-chip-line: #26262d;
  --at-chip-hover: #1c1c22;
  --at-side: #0b0b0d;
  --at-side-line: #1a1a1f;
  --at-srv: #111114;
  --at-srv-line: #1a1a1f;
  --at-nav-tx: #c9c9d1;
  --at-nav-hover: #141418;
  --at-nav-sel: #1b1b21;
  --at-card: #111114;
  --at-card-sub: #a5a5b0;
  --at-card-btn: #202026;
  --at-card-btn-hover: #2a2a31;
  --at-off: #17171b;
  --at-off-tx: #d4d4da;
  --glass: rgba(14,14,17,.72);
  --brillo: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 60%);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #eef0f3;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-solid: #ffffff;
  --card-2: #e7e9ed;
  --soft: #f4f5f7;
  --hover: #e9ebef;
  --input-bg: #ffffff;
  --line: #dcdfe4;
  --line-strong: #bcc2cb;
  --tx: #1c1e22;
  --tx-dim: #5f6672;
  --naranja: #a5650a;       /* sobre blanco el naranja vivo no se lee: va tostado */
  --naranja-2: #8a5308;
  --on-naranja: #ffffff;
  --ok: #8a6a00;            /* el amarillo, bajado hasta que se lea sobre blanco */
  --amber: #b8801e;
  --amber-2: #d9a333;
  --violet: #6252b8;
  --cyan: #2f8ea6;
  --red: #cf4444;
  --yellow: #b8901e;
  --blue: #3a72b8;
  --msg-err: #a3251f;
  --msg-ok: #7a5c00;
  --msg-info: #1e5490;
  --console-bg: #1b1e23;
  --console-tx: #d3d8e0;
  --glass: rgba(255,255,255,.72);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--tx);
  font-family: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .brand, .btn, .tab, .pill, .stat b, .num { font-weight: 600; letter-spacing: -.01em; }
a { color: var(--naranja); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; border-radius: 6px; }

/* ── Fondo ────────────────────────────────────────────────────
   Liso a propósito: antes había auroras de colores y bloques flotando,
   que quedaban lindos pero raros. Un panel se mira muchas horas. */
.bg, .blocks { display: none; }

/* ── Barra superior ────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; height: 66px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 21px; color: var(--tx); letter-spacing: -.01em;
}
.brand:hover { text-decoration: none; transform: translateY(-1px); }
.brand { transition: transform .2s; }
.brand img { border-radius: 6px; }
.brand span.dot {
  color: var(--naranja);
}
.topbar nav { display: flex; gap: 20px; margin-left: 14px; }
.topbar nav a { color: var(--tx-dim); font-size: 14.5px; font-weight: 500; position: relative; }
.topbar nav a::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--naranja); transition: width .22s;
}
.topbar nav a:hover { color: var(--tx); text-decoration: none; }
.topbar nav a:hover::after { width: 100%; }
.topbar .spacer { flex: 1; }
.userchip {
  display: flex; align-items: center; gap: 9px;
  background: var(--card); border: 1px solid var(--line);
  padding: 7px 13px; border-radius: 999px; font-size: 14px; font-weight: 500;
}
.avatar {
  width: 27px; height: 27px; border-radius: 9px;
  background: var(--naranja);
  display: grid; place-items: center; font-size: 13px; color: var(--on-naranja); font-weight: 700;
}

/* ── Estructura ────────────────────────────────────────────── */
.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 18px 70px; position: relative; }
.layout { display: grid; grid-template-columns: 1fr 316px; gap: 24px; align-items: start;
  position: relative; z-index: 1; }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; margin-bottom: 18px;
  transition: border-color .2s;
}
.card:hover { border-color: var(--line-strong); }
.card h2 { margin: 0 0 16px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }

/* Título en naranja y amarillo: el degradado va LETRA POR LETRA. `ZX.letras()`
   parte la frase en un <span> por letra y le guarda el número de letra en
   `--i`; ese número retrasa el arranque de la animación, así que la luz
   recorre la frase de a una letra en vez de prender toda junta. */
.h2-fuego {
  --v1: #b3600b;   /* naranja quemado: el color de reposo */
  --v2: #ff9d1c;   /* naranja vivo */
  --v3: #ffe500;   /* amarillo de la marca: el pico del brillo */
  color: var(--v1);
}
/* En modo día el amarillo sobre blanco casi no se lee: bajamos los tres tonos. */
:root[data-theme="light"] .h2-fuego {
  --v1: #7a4206; --v2: #a5650a; --v3: #c98510;   /* el pico también tiene que leerse sobre blanco */
}
.h2-fuego .ltr {
  display: inline-block;   /* hace falta para que cada letra anime por su cuenta */
  color: var(--v1);
  animation: fuegoLetra 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * .115s);   /* el retraso es lo que arma la ola */
}
/* Dos números mandan acá: el retraso de arriba es la VELOCIDAD con la que la ola
   camina, y el ancho del brillo (0 a 20% del ciclo = 1,2 s) es CUÁNTAS letras
   quedan encendidas a la vez, más o menos brillo/retraso ≈ 10 letras. */
@keyframes fuegoLetra {
  0%, 20%, 100% { color: var(--v1); text-shadow: 0 0 0 rgba(255, 229, 0, 0); }
  7%            { color: var(--v2); }
  12%           { color: var(--v3); text-shadow: 0 0 14px rgba(255, 229, 0, .5); }
  17%           { color: var(--v2); }
}
/* Si el visitante pidió menos animaciones, las letras quedan quietas. */
@media (prefers-reduced-motion: reduce) { .h2-fuego .ltr { animation: none; } }
.card h3 {
  margin: 0 0 12px; font-size: 12px; font-weight: 600; color: var(--tx-dim);
  text-transform: uppercase; letter-spacing: .12em;
}

/* ── Botones ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 8px; padding: 11px 20px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  background: var(--card-2); color: var(--tx);
  transition: background .15s, filter .15s;
}
.btn:hover { filter: brightness(1.12); text-decoration: none; }
.btn:active { filter: brightness(.95); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn-naranja { background: var(--naranja); color: var(--on-naranja); }
/* En modo día `--naranja` va tostado para que los TEXTOS se lean sobre blanco,
   pero el botón principal es un fondo: ahí sí entra el naranja vivo de la marca. */
:root[data-theme="light"] .btn-naranja { background: #f59314; color: #2a1a04; }
.btn-yellow { background: var(--amber); color: #23252a; }
.btn-red { background: var(--red); color: #fff; }
.btn-ghost { background: var(--card-2); border: 1px solid var(--line); color: var(--tx); }
.btn-lg { padding: 16px 34px; font-size: 17px; }
.btn-block { width: 100%; }

input, select, textarea {
  width: 100%; padding: 12px 14px; border-radius: 8px;
  background: var(--input-bg); border: 1px solid var(--line);
  color: var(--tx); font-size: 15px; font-family: inherit;
  transition: border-color .2s, background .2s;
}
input::placeholder { color: var(--tx-dim); opacity: .8; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--naranja); background: var(--input-bg);
}
label { display: block; font-size: 13px; font-weight: 500; color: var(--tx-dim); margin: 16px 0 7px; }

/* ── Estados ───────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
}
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.on { background: rgba(255,229,0,.15); color: var(--ok); }
.pill.off { background: rgba(160,166,177,.14); color: var(--tx-dim); }
.pill.load { background: rgba(224,178,60,.16); color: var(--yellow); }
.pill.queue { background: rgba(91,147,211,.16); color: var(--blue); }
.pill.on::before { animation: beat 2s ease-in-out infinite; }
.pill.load::before, .pill.queue::before { animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes beat { 50% { opacity: .45; } }

/* ── Servidor ──────────────────────────────────────────────── */
.server-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.server-head h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.addr {
  display: flex; align-items: center; gap: 12px;
  background: var(--soft); border: 1px solid var(--line);
  padding: 13px 16px; border-radius: 8px;
  font-family: ui-monospace, Consolas, monospace; font-size: 16.5px; font-weight: 600;
}
.copy { cursor: pointer; color: var(--tx-dim); font-size: 13px; background: none; border: 0; font-family: inherit; }
.copy:hover { color: var(--naranja); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 13px; }
.stat {
  background: var(--soft); border: 1px solid var(--line);
  border-radius: 9px; padding: 14px 15px; transition: border-color .2s;
}
.stat:hover { border-color: var(--line-strong); }
.stat b { display: block; font-size: 22px; font-weight: 600; }
.stat span { font-size: 11px; color: var(--tx-dim); text-transform: uppercase; letter-spacing: .1em; }

.console {
  background: var(--console-bg); border: 1px solid var(--line);
  border-radius: 8px; height: clamp(380px, 58vh, 720px); overflow-y: auto; padding: 16px 18px;
  font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; line-height: 1.62;
  white-space: pre-wrap; word-break: break-word; color: var(--console-tx);
}
.console::-webkit-scrollbar { width: 9px; }
.console::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 9px; }
.console .warn { color: var(--yellow); }
.console .err { color: var(--red); }
.console .ok { color: var(--ok); }
.cmdrow { display: flex; gap: 9px; margin-top: 12px; }

.idlebar { height: 7px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 9px; }
.idlebar > i {
  display: block; height: 100%; transition: width 1s linear;
  background: var(--amber);
}

/* ── Publicidad ────────────────────────────────────────────── */
.ad {
  background: var(--soft); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 18px; overflow: hidden; position: relative;
}
.ad::before {
  content: 'Publicidad'; position: absolute; top: 7px; left: 12px;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-dim);
}
/* Antes era `display:grid; place-items:center`. Un grid con los ítems centrados
   mide al hijo por su MAX-CONTENT: en un celular la publicidad de la casa pedía
   519px de una línea y se salía de la pantalla, arrastrando toda la página de
   costado. Con flex el hueco ocupa el ancho que hay y el texto se acomoda solo. */
.ad-inner { min-height: 104px; display: flex; align-items: center; justify-content: center; padding: 24px 10px 14px; }
.ad-side .ad-inner { min-height: 600px; }
.ad-placeholder { color: var(--tx-dim); font-size: 13px; text-align: center; line-height: 1.8; }
.adblock-note {
  background: rgba(224,163,60,.13);
  border: 1px solid rgba(255,180,50,.35);
  color: #ffd98a; padding: 15px 18px; border-radius: 13px; margin-bottom: 20px; font-size: 14.5px;
}

/* ── Modal ─────────────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.66);
  display: grid; place-items: center; z-index: 100; padding: 18px;
  animation: fadein .2s ease;
}
.modal {
  background: var(--card-solid); border: 1px solid var(--line-strong);
  border-radius: 20px; padding: 30px; width: 100%; max-width: 540px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 20px 50px -30px #000;
  animation: pop .28s cubic-bezier(.34,1.56,.64,1);
}
.modal h2 { margin-top: 0; }
@keyframes fadein { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.hidden { display: none !important; }

/* ── Portada ───────────────────────────────────────────────────
   Dos columnas: a la izquierda lo que se promete y los botones, a la
   derecha una muestra del panel. La foto de fondo va DETRÁS de las dos
   (está más abajo, en "FOTOS DEL SITIO"). */
.hero { position: relative; padding: 64px 0 46px; }
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 46px; align-items: center;
}
.hero .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,180,50,.12); border: 1px solid rgba(255,180,50,.32);
  color: var(--naranja); padding: 7px 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; margin-bottom: 20px;
}
.hero .kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); animation: beat 2s infinite; }
.hero h1 {
  font-size: clamp(33px, 4.4vw, 52px); font-weight: 700; line-height: 1.07;
  letter-spacing: -.03em; margin: 0 0 18px; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--naranja); }
.hero p.sub { color: var(--tx-dim); font-size: 17px; max-width: 520px; margin: 0 0 30px; }
.hero-cta { display: flex; gap: 13px; flex-wrap: wrap; }

/* Lo que incluye, en una línea: se lee de un vistazo y no se come una
   sección entera de la portada. */
.hero-chips { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 26px 0 0; }
.hero-chips li {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  padding: 6px 13px; border-radius: 999px;
  font-size: 12.8px; font-weight: 500; color: var(--tx-dim);
}
.hero-chips li::before { content: '✓'; color: var(--amber-2); font-weight: 700; font-size: 12px; }

/* Números en vivo. Sin cajas: una fila con una línea arriba. Antes eran dos
   recuadros sueltos con el total de cuentas, que arrancaban en 0 y quedaban
   como un hueco a medio llenar. */
.hero-live {
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line);
  max-width: 560px;
}
.hero-live b {
  display: block; font-size: 27px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tx);
}
.hero-live div:first-child b { color: var(--naranja); }
.hero-live span {
  display: flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 11.5px; color: var(--tx-dim); text-transform: uppercase; letter-spacing: .09em;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; animation: beat 2s infinite; }

/* ── Muestra del panel (columna derecha de la portada) ─────────
   No es una captura: es HTML, así que se lee nítido en cualquier pantalla,
   sigue el modo día/noche y no pesa nada. */
.hero-demo { position: relative; z-index: 1; }
.demo-win {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 28px 56px -24px rgba(0,0,0,.62), 0 2px 10px rgba(0,0,0,.22);
  animation: flotar 7s ease-in-out infinite;
}
:root[data-theme="light"] .demo-win { box-shadow: 0 24px 48px -26px rgba(16,24,40,.34), 0 2px 8px rgba(16,24,40,.08); }
@keyframes flotar { 50% { transform: translateY(-9px); } }

.demo-top {
  display: flex; align-items: center; gap: 11px; padding: 10px 13px;
  background: var(--soft); border-bottom: 1px solid var(--line);
}
.demo-dots { display: flex; gap: 6px; flex: none; }
.demo-dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.demo-url {
  flex: 1; text-align: center; font-size: 11.5px; color: var(--tx-dim);
  background: var(--input-bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-body { padding: 15px; display: grid; gap: 13px; }
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo-head b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.demo-head .pill { font-size: 12px; padding: 5px 12px; flex: none; }
.demo-ip { font-size: 12px; color: var(--tx-dim); font-family: ui-monospace, Consolas, monospace; }
.demo-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.demo-meter { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.demo-meter span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .11em; color: var(--tx-dim); }
.demo-meter i { display: block; height: 6px; border-radius: 99px; background: var(--card-2); margin: 9px 0 7px; position: relative; overflow: hidden; }
.demo-meter i::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: var(--v);
  border-radius: 99px; background: linear-gradient(90deg, var(--naranja-2), var(--naranja));
}
.demo-meter b { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* La consola queda oscura en los dos modos, igual que la de verdad: por eso
   estos colores van fijos y no por variable. */
.demo-console {
  background: var(--console-bg); border-radius: 10px; padding: 12px 13px;
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; line-height: 1.8;
  color: var(--console-tx);
}
.demo-console p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-console .t { color: #6d7581; }
.demo-console b { color: #ffe500; font-weight: 600; }
.demo-console u { color: #ffb432; text-decoration: none; }
.demo-console .caret::after {
  content: '▋'; color: #ffb432; margin-left: 3px; animation: parpadeo 1.1s steps(1) infinite;
}
@keyframes parpadeo { 50% { opacity: 0; } }

@media (max-width: 940px) {
  .hero { padding: 44px 0 30px; text-align: center; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero p.sub { margin-left: auto; margin-right: auto; }
  .hero-cta, .hero-chips, .hero-live { justify-content: center; }
  .hero-live { margin-inline: auto; }
  .hero-live span { justify-content: center; }
  .demo-win { max-width: 430px; margin: 0 auto; text-align: left; }
}
@media (max-width: 420px) {
  .hero-live { gap: 12px 22px; }
  .hero-live b { font-size: 23px; }
  .hero-chips li { font-size: 12px; padding: 5px 11px; }
}

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 16px; }
.feature {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; position: relative; overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.feature::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: transparent;
}
.feature:hover { border-color: var(--line-strong); }
.feature:hover::before { opacity: 1; }
.feature .ico { font-size: 30px; display: block; }
.feature h3 {
  margin: 12px 0 7px; font-size: 17px; color: var(--tx);
  text-transform: none; letter-spacing: -.01em; font-weight: 600;
}
.feature p { color: var(--tx-dim); font-size: 14.3px; margin: 0; }

.soft-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: 13px; }
.soft {
  background: var(--soft); border: 2px solid var(--line); border-radius: 10px;
  padding: 18px 12px; text-align: center; cursor: pointer;
  transition: transform .2s, border-color .2s, background .2s;
}
.soft:hover { border-color: var(--line-strong); }
.soft.sel {
  border-color: var(--naranja); background: rgba(255,180,50,.11);
}
/* Software de la OTRA edición (Java↔Bedrock): elegir uno de estos borra todo
   lo que hay en el servidor, así que se marcan distinto a propósito. */
.soft.otra { border-style: dashed; }
.soft.otra small { color: var(--msg-err); }
.soft.otra.sel { border-style: solid; border-color: var(--msg-err); background: rgba(224,92,92,.12); }
.soft .ico { font-size: 28px; display: block; margin-bottom: 8px; }
.soft .ico img { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 auto; border-radius: 10px; }
.soft b { font-size: 14.5px; font-weight: 600; }
.soft small { display: block; color: var(--tx-dim); font-size: 11px; margin-top: 4px; }

.msg { padding: 13px 16px; border-radius: 12px; font-size: 14.3px; margin: 14px 0; }
.msg.err { background: rgba(224,92,92,.13); color: var(--msg-err); border: 1px solid rgba(224,92,92,.32); }
.msg.ok { background: rgba(255,229,0,.10); color: var(--msg-ok); border: 1px solid rgba(255,229,0,.30); }
.msg.info { background: rgba(91,147,211,.13); color: var(--msg-info); border: 1px solid rgba(91,147,211,.32); }

.tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.tab {
  padding: 11px 18px; cursor: pointer; font-weight: 600; font-size: 14.5px;
  color: var(--tx-dim); background: none; border: 0; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.tab:hover { color: var(--tx); }
.tab.sel { color: var(--naranja); border-bottom-color: var(--naranja); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 9px; border-bottom: 1px solid var(--line); }
th { color: var(--tx-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
tbody tr:hover td { background: var(--hover); }

footer {
  border-top: 1px solid var(--line); padding: 30px 18px; color: var(--tx-dim);
  font-size: 13.5px; text-align: center; position: relative;
}
footer a { color: var(--tx-dim); margin: 0 9px; }
footer a:hover { color: var(--naranja); }

/* ── Aparición al hacer scroll ─────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PANEL COMPLETO — barra lateral, explorador de archivos, editor,
   opciones del juego, red, jugadores y el muro anti-adblock.
   ═══════════════════════════════════════════════════════════════ */
.wrap.wide { max-width: 1640px; padding: 20px 22px 70px; }

.panel-grid { display: grid; grid-template-columns: 272px 1fr; gap: 22px; align-items: start; }
.panel-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* ── Barra lateral ─────────────────────────────────────────── */
.side {
  position: sticky; top: 16px; display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 10px;
}
.side-title {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--tx-dim);
  padding: 8px 12px 12px; font-weight: 600;
}
.snav {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px 16px; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--tx-dim); font: inherit; font-size: 16px; font-weight: 500;
  transition: background .15s, color .15s;
}
.snav:hover { background: var(--hover); color: var(--tx); text-decoration: none; }
.snav .ic { font-size: 21px; width: 26px; text-align: center; flex: none; }
.snav .tx { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snav .lk { font-size: 11px; opacity: .65; }
.snav.sel {
  background: rgba(255,180,50,.15); color: var(--naranja);
}
.snav.accent { color: var(--amber); }
.snav.accent.sel { background: rgba(224,163,60,.16); color: var(--amber); }
.snav.locked { opacity: .72; }
.snav.out { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 14px; border-radius: 0 0 11px 11px; }

/* ── Cabecera del servidor ─────────────────────────────────── */
.srv-head-card { position: sticky; top: 16px; z-index: 5; }
.srv-head-card .server-head h1 { font-size: 30px; }
.soft-tag { color: var(--tx-dim); font-size: 13px; }
.head-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.mini-stats { display: flex; gap: 18px; flex-wrap: wrap; color: var(--tx-dim); font-size: 14px; }
.mini-stats span { white-space: nowrap; }

.btn-sm { padding: 8px 13px; font-size: 13px; border-radius: 10px; }
.lnk {
  background: none; border: 0; color: var(--tx-dim); font: inherit; font-size: 12.5px;
  cursor: pointer; padding: 2px 5px; border-radius: 6px;
}
.lnk:hover { color: var(--naranja); background: var(--hover); }
.lnk.red:hover { color: var(--red); }

/* ── Explorador de archivos ────────────────────────────────── */
.fm-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 12px; }
.crumbs a { color: var(--tx-dim); }
.crumbs a:last-child { color: var(--tx); }
.crumbs .sep { color: var(--tx-dim); }

.fm-actions {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; margin-bottom: 10px;
  background: rgba(255,180,50,.1); border: 1px solid rgba(255,180,50,.26); border-radius: 8px;
  font-size: 13px; color: var(--tx);
}
.fm-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.fm-row {
  display: grid; grid-template-columns: 26px 26px 1fr 92px 130px auto;
  align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line);
  font-size: 14px; transition: background .15s;
}
.fm-row:last-child { border-bottom: 0; }
.fm-row:hover { background: var(--hover); }
.fm-row.up { grid-template-columns: 26px 1fr; color: var(--tx-dim); cursor: pointer; }
.fm-chk { width: auto; margin: 0; }
.fm-ico { font-size: 15px; }
.fm-name { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-name:hover { color: var(--naranja); }
.fm-size, .fm-date { color: var(--tx-dim); font-size: 12.3px; }
.fm-ops { display: flex; gap: 2px; justify-content: flex-end; flex-wrap: wrap; }

.editor {
  width: 100%; min-height: 540px; font-family: 'Consolas', 'Menlo', monospace; font-size: 13px;
  line-height: 1.6; background: var(--console-bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--console-tx); padding: 14px; resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto;
}
.console.mini { min-height: 0; max-height: 130px; }

/* ── Opciones del juego / arranque ─────────────────────────── */
.prop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 14px; }
.prop { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.prop > span { font-size: 13px; color: var(--tx-dim); font-weight: 500; }
.prop > span small { display: block; font-size: 11.5px; color: var(--tx-dim); font-weight: 400; line-height: 1.4; }
.prop input, .prop select { margin: 0; }

/* ── Red ───────────────────────────────────────────────────── */
.net-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px; }
.net-box {
  background: var(--soft); border: 1px solid var(--line); border-radius: 9px; padding: 15px;
  display: flex; flex-direction: column; gap: 4px;
}
.net-box span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--tx-dim); }
.net-box b { font-size: 17px; word-break: break-all; }
.net-box .copy { align-self: flex-start; }

/* ── Jugadores ─────────────────────────────────────────────── */
.pl-head { font-size: 15px; margin-bottom: 12px; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.pl {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--soft); border: 1px solid var(--line); border-radius: 8px;
}
.pl img { width: 28px; height: 28px; border-radius: 6px; image-rendering: pixelated; }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 18px; }
.pl-rows { display: flex; flex-direction: column; gap: 8px; }
.pl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px;
}
.pl-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pl-who img { width: 28px; height: 28px; border-radius: 6px; image-rendering: pixelated; flex: none; }
.pl-who span { overflow-wrap: anywhere; }
.pl-who small { display: block; font-size: 12px; color: var(--tx-dim); }
.pl-tag { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 5px; border: 1px solid var(--naranja); color: var(--naranja); }
.pl-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.quick { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.quick input { width: 220px; margin: 0; }

/* ── Secciones premium ─────────────────────────────────────── */
.locked-card { text-align: center; }
.locked-card .lock-ico { font-size: 44px; filter: grayscale(.35); }
.locked-card h2 { margin: 10px 0 8px; }

/* ── Muro anti-adblock ─────────────────────────────────────── */
body.zx-locked { overflow: hidden; }
.adgate {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px;
  background: rgba(0,0,0,.86); animation: fadeIn .2s ease;
}
.adgate-card {
  max-width: 560px; width: 100%; background: var(--card-solid); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 32px; text-align: center; box-shadow: 0 20px 60px -30px #000;
  max-height: 92vh; overflow: auto;
}
.adgate-ico { font-size: 46px; }
.adgate-card h2 { margin: 8px 0 14px; font-size: 25px; }
.adgate-card p { color: var(--tx-dim); font-size: 14.6px; }
.adgate-steps {
  text-align: left; color: var(--tx-dim); font-size: 14px; line-height: 1.8;
  background: var(--soft); border: 1px solid var(--line); border-radius: 9px;
  padding: 14px 14px 14px 34px; margin: 18px 0;
}
.adgate-steps b { color: var(--tx); }
.adgate-foot { font-size: 12.3px; margin-bottom: 0; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* ── Responsive del panel ──────────────────────────────────── */
@media (max-width: 1180px) {
  .layout { grid-template-columns: 1fr; }
  .ad-side .ad-inner { min-height: 120px; }
}
@media (max-width: 860px) {
  .panel-grid { grid-template-columns: 1fr; }
  .side {
    position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding: 8px;
    scrollbar-width: thin;
  }
  .side-title, .snav .lk { display: none; }
  .snav { width: auto; white-space: nowrap; padding: 9px 13px; }
  .snav.out { margin-top: 0; border-top: 0; padding-top: 9px; }
  .srv-head-card { position: static; }
  .fm-row { grid-template-columns: 24px 24px 1fr auto; }
  .fm-size, .fm-date { display: none; }
  .fm-ops { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   FOTOS DEL SITIO (assets/) — hero y galería.
   Se sirven en dos tamaños (760 y nativo) + webp; el navegador elige
   con srcset, así en el celu no baja una imagen de escritorio.
   ═══════════════════════════════════════════════════════════════ */
.hero { position: relative; }
.hero-photo {
  /* Se sale del contenedor a propósito: ocupa todo el ancho de la pantalla,
     de punta a punta, como la portada de cualquier hosting. */
  position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; top: -90px;
  height: 740px; overflow: hidden; z-index: 0; pointer-events: none;

  /* Dos capas: arriba un velo del color del fondo, abajo la foto. El velo es lo
     que hace que el título y los botones se lean nítidos. Antes la foto iba sola
     a `opacity:.5` y quedaba todo lavado: apagaba la foto Y el texto a la vez.
     Con el velo la foto conserva el color y el contraste lo pone el degradado,
     que además va más oscuro abajo, justo donde está el texto chico.
     El archivo de la foto lo elige el bloque de más abajo según la pantalla. */
  --velo: linear-gradient(180deg, rgba(31,33,38,.42) 0%, rgba(31,33,38,.30) 32%,
                                  rgba(31,33,38,.64) 74%, rgba(31,33,38,.92) 100%);
  background-size: cover, cover;
  background-position: center, center 42%;
  background-repeat: no-repeat;
  opacity: .94;
  /* Se difumina hacia abajo (para que el texto se lea siempre) y también hacia
     los costados, así la foto no termina en un corte recto contra el borde de
     la pantalla: se apaga de a poco y parece que sigue.
     Son dos máscaras cruzadas con `intersect`: se ve la foto solo donde las
     DOS son opacas, con lo cual cada una se ocupa de su eje sin pisar a la
     otra. `-webkit-mask-composite: source-in` es lo mismo para Safari viejo. */
  --fade-y: linear-gradient(180deg, #000 0%, rgba(0,0,0,.8) 52%, rgba(0,0,0,.34) 82%, transparent 100%);
  --fade-x: linear-gradient(90deg,
              transparent 0%, rgba(0,0,0,.16) 4%, rgba(0,0,0,.52) 9%, rgba(0,0,0,.84) 14%, #000 20%,
              #000 80%, rgba(0,0,0,.84) 86%, rgba(0,0,0,.52) 91%, rgba(0,0,0,.16) 96%, transparent 100%);
  -webkit-mask-image: var(--fade-y), var(--fade-x);
          mask-image: var(--fade-y), var(--fade-x);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* ── Qué archivo de la foto baja cada pantalla ─────────────────
   Antes había uno solo (el de 1364 px) para todos: el celular se bajaba una
   imagen de escritorio y el monitor grande recibía una chica que el navegador
   estiraba con un filtro barato — de ahí que se viera blanda.
   Ahora hay tres tamaños y cada pantalla se lleva el suyo. Va de menor a mayor
   (mobile-first) porque el celular es el que menos datos tiene para gastar.

   Las dos líneas repetidas de `background-image` en cada tramo NO son un error:
   la primera es `image-set` estándar y la segunda la versión `-webkit-` para
   Safari viejo. No se puede resumir metiendo la URL en una variable, porque un
   navegador que no entienda `image-set` se quedaría sin foto en vez de caer en
   la línea de abajo. */
.hero-photo {                                           /* teléfonos */
  background-image: var(--velo),
                    image-set(url('/assets/mundo-oro-v5-760.webp') type('image/webp'),
                              url('/assets/mundo-oro-v5-760.jpg') type('image/jpeg'));
  background-image: var(--velo),
                    -webkit-image-set(url('/assets/mundo-oro-v5-760.webp') type('image/webp'),
                                      url('/assets/mundo-oro-v5-760.jpg') type('image/jpeg'));
}
@media (min-width: 760px) {                             /* tablets y notebooks */
  .hero-photo {
    background-image: var(--velo),
                      image-set(url('/assets/mundo-oro-v5-1364.webp') type('image/webp'),
                                url('/assets/mundo-oro-v5-1364.jpg') type('image/jpeg'));
    background-image: var(--velo),
                      -webkit-image-set(url('/assets/mundo-oro-v5-1364.webp') type('image/webp'),
                                        url('/assets/mundo-oro-v5-1364.jpg') type('image/jpeg'));
  }
}
/* Monitores grandes y pantallas retina: el doble de pixeles. Es el tramo que
   más se notaba, porque es el que más estiraba la imagen. */
@media (min-width: 1500px), (min-width: 1000px) and (min-resolution: 1.5dppx) {
  .hero-photo {
    background-image: var(--velo),
                      image-set(url('/assets/mundo-oro-v5-2728.webp') type('image/webp'),
                                url('/assets/mundo-oro-v5-2728.jpg') type('image/jpeg'));
    background-image: var(--velo),
                      -webkit-image-set(url('/assets/mundo-oro-v5-2728.webp') type('image/webp'),
                                        url('/assets/mundo-oro-v5-2728.jpg') type('image/jpeg'));
  }
}
.hero-grid { position: relative; z-index: 1; }

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; }
.shot { margin: 0; }
.shot picture { display: block; overflow: hidden; border-radius: 15px; border: 1px solid var(--line); }
.shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.shot:hover img { transform: scale(1.045); }
.shot figcaption { color: var(--tx-dim); font-size: 13.3px; line-height: 1.6; margin-top: 10px; }

/* Foto de bienvenida en el panel, arriba del alta del servidor */
.card-photo {
  display: block; width: 100%; height: 168px; object-fit: cover;
  border-radius: 13px; margin-bottom: 16px; border: 1px solid var(--line);
}

@media (max-width: 700px) {
  .hero-photo {
    top: -70px; height: 520px;
    --fade-x: linear-gradient(90deg,
                transparent 0%, rgba(0,0,0,.5) 5%, #000 11%,
                #000 89%, rgba(0,0,0,.5) 95%, transparent 100%);
  }
  .card-photo { height: 128px; }
}

/* Kill: es "cortarle la luz", no un botón más — va apagado hasta que lo tocás */
.btn-kill { color: var(--red); border-color: rgba(224,92,92,.4); }
.btn-kill:hover { background: rgba(224,92,92,.16); }

/* ── Interruptor día / noche ───────────────────────────────── */
.theme-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 9px; border: 1px solid var(--line); background: var(--card-2);
  color: var(--tx); font-size: 17px; cursor: pointer; line-height: 1;
  transition: background .15s, border-color .15s;
}
.lang-btn { font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-right: 6px; }
.theme-btn:hover { background: var(--hover); border-color: var(--line-strong); }

/* En modo día la foto del hero no tiene que lavar el texto */
:root[data-theme="light"] .hero-photo {
  --velo: linear-gradient(180deg, rgba(238,240,243,.64) 0%, rgba(238,240,243,.56) 32%,
                                  rgba(238,240,243,.84) 74%, rgba(238,240,243,.97) 100%);
  opacity: .95;
}
:root[data-theme="light"] .console { border-color: #2c3037; }
:root[data-theme="light"] .card { box-shadow: 0 1px 2px rgba(16,24,40,.06); }
:root[data-theme="light"] .adblock-note { background: rgba(224,163,60,.16); }

/* ═══════════════════════════════════════════════════════════════
   PANEL ESTILO ATERNOS
   Barra negra arriba con el logo, barra lateral oscura a la izquierda
   con el servidor y sus secciones, contenido al medio y publicidad a
   la derecha. En modo noche la barra y la lateral son oscuras como Aternos;
   en modo día pasan a blanco/gris claro (ver el bloque "Modo día del panel"
   más abajo — pedido de Antu el 2026-09-25: los bordes no cambiaban).
   ═══════════════════════════════════════════════════════════════ */
body.app { background: var(--bg); }

.atb {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 16px;
  height: 58px; padding: 0 16px; background: #15171c; border-bottom: 1px solid #000;
}
.atb-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.atb-logo img { display: block; }
.atb-logo span { font-size: 18px; font-weight: 700; letter-spacing: .04em; color: #fff; line-height: 1; }
.atb-logo span b { color: var(--amber-2); font-weight: 700; }
.atb-logo span i {
  display: block; font-style: normal; font-size: 9.5px; letter-spacing: .2em;
  color: #8b93a1; font-weight: 600; margin-top: 3px;
}
.atb-logo:hover { text-decoration: none; }
.atb-help {
  flex: none; background: #2f6fd0; color: #fff; padding: 8px 15px; border-radius: 7px;
  font-size: 13.5px; font-weight: 600;
}
.atb-help:hover { background: #3a7ee0; text-decoration: none; }
.atb-ad { flex: 1; min-width: 0; display: flex; justify-content: center; }
.atb-ad .ad { margin: 0; width: 100%; max-width: 730px; background: transparent; border: 0; }
.atb-ad .ad::before { display: none; }
.atb-ad .ad-inner { min-height: 60px; padding: 4px; }
.atb-right { flex: none; display: flex; align-items: center; gap: 12px; }
.atb-right .userchip { background: #22252b; border-color: #2f333b; color: #e6e8ec; }
.atb-right .userchip a { color: #9aa2b0; }
.atb-right .theme-btn { background: #22252b; border-color: #2f333b; color: #e6e8ec; }
.atb-right .theme-btn:hover { background: #2b2f37; }

/* ── Estructura ────────────────────────────────────────────── */
.atlayout {
  display: grid; grid-template-columns: 244px minmax(0, 1fr) 312px;
  align-items: start; min-height: calc(100vh - 58px);
}
.atside {
  position: sticky; top: 58px; align-self: stretch; min-height: calc(100vh - 58px);
  background: #22262d; border-right: 1px solid #14161a; padding-bottom: 30px;
}
.atmain { padding: 22px 30px 64px; min-width: 0; font-size: 15px; }
.atads { padding: 20px 16px 40px; }
.atads .ad-label, .ad-label {
  text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-dim); margin-bottom: 7px;
}
.atads .ad { margin: 0; }

/* ── Servidor + secciones en la barra lateral ──────────────── */
.atside-srv {
  display: flex; align-items: center; gap: 11px; padding: 14px 16px;
  border-bottom: 1px solid #171a1f; border-left: 4px solid var(--amber-2);
  background: #262a32;
}
.atside-srv .nom { min-width: 0; flex: 1; }
.atside-srv .nom b { display: block; color: #fff; font-size: 15px; font-weight: 600; }
.atside-srv .nom small {
  display: block; color: #8b93a1; font-size: 11.5px; font-family: ui-monospace, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atdot {                            /* estado del server: ícono de encendido en un cuadradito */
  width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center;
  font-size: 16px; color: #8b93a1; background: rgba(139, 147, 161, .12);
  border: 1px solid rgba(139, 147, 161, .18); transition: .25s;
}
.atdot.on {
  color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent);
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--ok) 25%, transparent);
}
.atdot.load { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 35%, transparent); animation: pulse 1.1s infinite; }

.atnav {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 12px 17px; border: 0; background: transparent; cursor: pointer;
  color: #c7cdd6; font: inherit; font-size: 14.5px; font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .13s, color .13s, border-color .13s;
}
.atnav:hover { background: #2a2f37; color: #fff; text-decoration: none; }
.atnav .ic { font-size: 17px; width: 22px; text-align: center; flex: none; }
.atnav .tx { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atnav .lk, .atnav .badge { font-size: 11.5px; color: #8b93a1; }
.atnav .badge {
  background: var(--amber-2); color: #23252a; border-radius: 999px; padding: 2px 8px; font-weight: 700;
}
.atnav.sel { background: #2e333c; color: #fff; border-left-color: var(--amber-2); }
.atnav.locked { opacity: .62; }

/* ── Bloque grande del servidor (como la home de Aternos) ──── */
.atcard-addr {
  background: #39414d; border-radius: 6px 6px 0 0; padding: 24px 18px 20px; text-align: center;
}
.atcard-addr .dir {
  font-size: clamp(19px, 2.5vw, 27px); font-weight: 700; color: #fff; word-break: break-all;
}
.atcard-addr .sub { color: #b9c1cd; font-size: 12.8px; margin-top: 6px; }
.atcard-addr .btn { margin-top: 14px; background: #4b5563; color: #fff; }
.atcard-addr .btn:hover { background: #566073; }

.atstatus {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 13px; border-radius: 0 0 6px 6px; font-size: 18px; font-weight: 600; color: #fff;
}
.atstatus.off { background: #3a3f4a; color: #c9ced8; }   /* apagado = gris, no rojo (pedido de Antu) */
.atstatus.on { background: var(--ok); color: #26190a; }
.atstatus.load { background: var(--amber); color: #23252a; }
.atstatus .players { font-size: 13.5px; font-weight: 500; opacity: .9; }

.atbig {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; max-width: 360px; margin: 20px auto 0; padding: 16px 26px;
  font-size: 20.5px; font-weight: 600; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--on-naranja); background: var(--naranja); transition: filter .15s;
}
.atbig:hover { filter: brightness(1.1); }
.atbig:disabled { opacity: .55; cursor: not-allowed; }
.atbig.stop { background: #e0455f; }
.atrow { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

.atinfo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #2f6fd0; color: #fff; border-radius: 6px; padding: 12px 16px; margin-top: 15px;
  font-size: 13.8px;
}
.atinfo .btn { background: #fff; color: #1d4d96; }
.atinfo.warn { background: var(--amber); color: #23252a; }

/* Tira compacta de estado (en las secciones que no son "Servidor") */
.atstrip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 14px; margin-bottom: 15px;
}
.atstrip .dir { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }
.atstrip .sep { flex: 1; }

/* ── Plugins ───────────────────────────────────────────────── */
.plug-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.plug {
  display: flex; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--soft); position: relative;
}
.plug img, .plug .noico {
  width: 52px; height: 52px; border-radius: 9px; object-fit: cover; flex: none;
  background: var(--card-2); display: grid; place-items: center; font-size: 22px;
}
.plug .info { min-width: 0; flex: 1; }
.plug b { display: block; font-size: 15px; }
.plug small { display: block; color: var(--tx-dim); font-size: 12.5px; line-height: 1.45; margin: 3px 0 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plug .dl { color: var(--tx-dim); font-size: 11.5px; }
.plug .btn { padding: 7px 14px; font-size: 13px; }
.plug.locked b::after {
  content: ''; display: inline-block; width: 1.05em; height: 1.05em; margin-left: .3em; vertical-align: -.15em;
  background-color: currentColor; opacity: .6;
  -webkit-mask: url('/assets/iconos/lock.svg') center / contain no-repeat; mask: url('/assets/iconos/lock.svg') center / contain no-repeat;
}
.plug-search { display: flex; gap: 10px; margin-bottom: 16px; }
.plug-search input { margin: 0; }

/* ── Créditos ──────────────────────────────────────────────── */
.credit-hero {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 20px;
}
.credit-hero .saldo { font-size: 42px; font-weight: 700; color: var(--amber-2); line-height: 1; }
.credit-hero .saldo small { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-dim); }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 13px; }
.pack {
  border: 1px solid var(--line); border-radius: 10px; padding: 18px; text-align: center; background: var(--soft);
}
.pack b { display: block; font-size: 27px; color: var(--amber-2); }
.pack span { display: block; color: var(--tx-dim); font-size: 13px; margin-bottom: 12px; }

/* ── Mundos ────────────────────────────────────────────────── */
.world {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--soft); margin-bottom: 10px;
}
.world .ic { font-size: 26px; }
.world .info { flex: 1; min-width: 0; }
.world b { font-size: 15.5px; }
.world small { display: block; color: var(--tx-dim); font-size: 12.5px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .atlayout { grid-template-columns: 236px minmax(0, 1fr); }
  .atads { grid-column: 1 / -1; padding-top: 0; }
  .atads .ad-side .ad-inner { min-height: 120px; }
}
/* ══════════════════════════════════════════════════════════════
   CELULAR (2026-08-24)

   Cómo se veía antes abajo de 900px: la barra de arriba se partía en
   tres filas porque el anuncio se metía entero adentro, y encima ese
   anuncio se medía por su max-content (519px) y empujaba TODA la
   página de costado; el resultado era medio celular de barra negra
   con texto cortado. Y las 17 secciones quedaban como una tira de
   íconos SIN nombre que había que adivinar y arrastrar de costado.

   Ahora: la barra es UNA sola fila del alto justo, y las secciones
   viven en un cajón que se abre con ☰ — la misma lista de la PC, con
   sus nombres y sus avisos, sin arrastrar nada.
   ══════════════════════════════════════════════════════════════ */

/* En PC ni el botón ni el fondo del cajón existen. */
.atb-burger, .atnavbg { display: none; }

@media (max-width: 900px) {
  /* ── Barra de arriba: una sola fila ─────────────────────────── */
  .atb { height: 54px; padding: 0 10px; gap: 9px; flex-wrap: nowrap; }
  /* El anuncio de arriba no entra en un celular sin comerse media pantalla.
     Queda el de abajo del contenido — y zx.js directamente NO lo carga, así
     que no se le pide un aviso a la red de publicidad para esconderlo. */
  .atb-ad { display: none; }

  .atb-burger {
    display: inline-flex; align-items: center; gap: 8px;
    flex: 0 1 auto; min-width: 0; max-width: 42vw;
    background: #22252b; border: 1px solid #2f333b; color: #e6e8ec;
    border-radius: 9px; padding: 9px 12px; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1;
  }
  .atb-burger:active { background: #2b2f37; }
  .atb-burger .bi { font-size: 15px; line-height: 1; flex: none; }
  .atb-burger .btx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Todavía no creó el servidor: no hay secciones que abrir. */
  body.sinservidor .atb-burger { display: none; }

  .atb-logo { gap: 8px; }
  .atb-logo img { width: 28px; height: 28px; }
  .atb-logo span { font-size: 15px; }
  .atb-logo span i { font-size: 8px; letter-spacing: .16em; margin-top: 2px; }
  .atb-help { padding: 8px 11px; font-size: 12.5px; }
  /* La barra no envuelve: lo que sobra se lo reparten el botón ☰ y el chip del
     usuario, y los dos se recortan con puntos suspensivos antes que empujar. */
  .atb-right { flex: 0 1 auto; gap: 8px; margin-left: auto; min-width: 0; }
  .atb-right .theme-btn { width: 34px; height: 34px; font-size: 15px; }
  .atb-right .userchip { padding: 5px 10px; gap: 7px; font-size: 13px; min-width: 0; }
  .atb-right .avatar { width: 24px; height: 24px; font-size: 12px; border-radius: 7px; }
  .atb-right .userchip .unm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── El cajón de secciones ──────────────────────────────────── */
  .atlayout { grid-template-columns: 1fr; min-height: 0; }
  .atside {
    position: fixed; top: 0; left: 0; z-index: 90;
    width: min(84vw, 320px); height: 100vh; height: 100dvh; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-bottom: 26px; border-right: 1px solid #14161a;
    box-shadow: 0 0 44px rgba(0,0,0,.55);
    transform: translateX(-101%); visibility: hidden;
    transition: transform .22s ease, visibility .22s;
  }
  body.navopen .atside { transform: none; visibility: visible; }
  .atnavbg {
    display: block; position: fixed; inset: 0; z-index: 89;
    background: rgba(0,0,0,.55); opacity: 0; pointer-events: none;
    transition: opacity .22s;
  }
  body.navopen .atnavbg { opacity: 1; pointer-events: auto; }
  /* Mientras el cajón está abierto la página de atrás no se mueve. */
  body.navopen { overflow: hidden; }

  /* Los ítems se tocan con el dedo, no con el mouse. */
  .atside-srv { padding: 16px; position: sticky; top: 0; z-index: 1; }
  .atnav { padding: 14px 18px; font-size: 15px; }

  /* ── Contenido ──────────────────────────────────────────────── */
  .atmain { padding: 15px 14px 44px; }
  .atads { padding: 0 14px 34px; }
}

/* Si el visitante pidió menos animaciones, el cajón aparece de una. */
@media (prefers-reduced-motion: reduce) {
  .atside, .atnavbg { transition: none; }
}

/* ── Celular angosto: lo que no entra en la barra se va ──────── */
@media (max-width: 560px) {
  .atb-logo span { display: none; }              /* queda el rayo solo */
  .atb-help .hx { display: none; }               /* "? Ayuda" pasa a ser "?" */
  .atb-help { padding: 8px 12px; font-size: 15px; }
  /* El nombre queda en la inicial del redondel: lo que no puede faltar es
     "salir". Así el ☰ tiene lugar para decir en qué sección está parado. */
  .atb-right .userchip .unm { display: none; }
  .atb-burger { max-width: none; }
}

@media (max-width: 430px) {
  /* El rayo se va: en 360px de ancho el lugar lo necesita el nombre de la
     sección, que es lo único que dice dónde está parado. La marca sigue en
     el título de la pestaña y arriba del cajón. */
  .atb-logo { display: none; }
  /* Salvo cuando todavía no hay servidor: ahí no hay ☰ y el lugar sobra. */
  body.sinservidor .atb-logo { display: flex; }
  .atb { gap: 8px; padding: 0 9px; }
}

/* ── Celular: que el contenido entre de ancho ─────────────────── */
@media (max-width: 700px) {
  /* Las tablas (Historial, Copias, Jugadores) traían fechas con
     `white-space:nowrap` puesto a mano: no entraban y empujaban la página
     entera de costado. En el celular la fecha se parte en dos líneas. */
  .atmain table { font-size: 12.8px; }
  /* `break-word` y no `anywhere` a propósito: `anywhere` deja partir en
     cualquier letra y la fecha salía como "21/08/2 / 6, 02:53". Así solo se
     parte lo que de verdad no entra (las rutas largas de los archivos). */
  .atmain th, .atmain td { padding: 9px 7px; white-space: normal !important; overflow-wrap: break-word; }

  .atcard-addr { padding: 20px 14px 17px; }
  .atstatus { flex-wrap: wrap; gap: 8px; padding: 12px 14px; font-size: 16.5px; text-align: center; }
  .atstatus .players { flex: 1 0 100%; font-size: 12.5px; }
  .atbig { padding: 15px 18px; font-size: 18.5px; }
  .atstrip { gap: 9px; padding: 10px 12px; }
  .atstrip .dir { font-size: 13px; overflow-wrap: anywhere; }

  .atmain .console { height: clamp(280px, 46vh, 520px); font-size: 12px; padding: 12px 13px; }
  .cmdrow { flex-wrap: wrap; }
  .cmdrow input { flex: 1 1 100%; }
  .cmdrow .btn { flex: 1; }

  .plug-grid { grid-template-columns: 1fr; }
  /* Los 5 software del alta entraban de a uno por fila por 5px: de a dos se
     ven todos casi sin bajar la pantalla. */
  .soft-grid { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 10px; }
  .soft { padding: 14px 8px; }
  .modal { padding: 22px 18px; border-radius: 16px; }
}


/* ── "Alejar" el panel (pedido de Antu, 2026-08-19) ────────────
   El panel se veía demasiado encima. Todo lo de arriba bajó ~13% y acá se
   achican las piezas que el panel COMPARTE con la portada — por eso van
   colgadas de .atmain: la portada tiene que seguir igual de grande. El aire
   entre tarjetas NO se achica, así se ve más lejos pero no más apretado. */
.atmain .card { padding: 20px; margin-bottom: 18px; }
.atmain .card h2 { font-size: 18.5px; margin-bottom: 14px; }
.atmain .btn { padding: 9px 17px; font-size: 14px; }
.atmain .btn-lg { padding: 12px 22px; font-size: 15.5px; }
.atmain .console { height: clamp(340px, 54vh, 660px); font-size: 12.8px; padding: 14px 16px; }
.atmain input, .atmain select, .atmain textarea { font-size: 14.5px; padding: 10px 13px; }
.atmain label { font-size: 13.5px; }
.atmain .msg { font-size: 13.6px; padding: 11px 14px; }

/* Publicidad de la casa: se muestra cuando el proveedor (Raptive o AdSense)
   todavía no llenó ese espacio, así el hueco no queda vacío ni con un cartel de
   configuración a la vista de los usuarios. */
.house-ad {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; width: 100%;
  color: var(--tx); text-decoration: none; text-align: left;
  flex-wrap: wrap; box-sizing: border-box;
}
.house-ad:hover { text-decoration: none; }
.house-ad img { flex: none; }
.house-ad span { flex: 1 1 150px; min-width: 0; font-size: 13.5px; color: var(--tx-dim); line-height: 1.5; }
.house-ad span b { display: block; color: var(--tx); font-size: 14.5px; }
.house-ad em {
  flex: none; font-style: normal; font-weight: 600; font-size: 13px;
  background: var(--amber); color: #23252a; padding: 8px 14px; border-radius: 7px;
}
.ad-side .house-ad { flex-direction: column; text-align: center; }
.ad-side .house-ad span { text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   VERIFICACIÓN DE DISCORD EN EL REGISTRO
   Va adentro del formulario de alta: sin esto no se crea la cuenta.
   Se marca con el violeta de Discord para que se lea como un paso
   aparte y no como un campo más del formulario.
   ═══════════════════════════════════════════════════════════════ */
.dc-box {
  margin-top: 20px; padding: 16px 16px 4px;
  border: 1px solid rgba(88,101,242,.42); border-radius: 13px;
  background: rgba(88,101,242,.08);
}
.dc-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.dc-ico { font-size: 20px; line-height: 1.2; flex: none; }
.dc-head b { display: block; font-size: 15px; color: var(--tx); }
.dc-head small { display: block; color: var(--tx-dim); font-size: 12.8px; line-height: 1.5; margin-top: 2px; }
.dc-badge {
  flex: none; margin-left: auto; align-self: center; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--ok);
  background: rgba(255,229,0,.13); border: 1px solid rgba(255,229,0,.32);
  padding: 5px 10px; border-radius: 999px;
}
/* El input y el botón en la misma línea; en pantalla angosta el botón baja solo */
.dc-row { display: flex; gap: 9px; align-items: stretch; flex-wrap: wrap; }
.dc-row input { flex: 1 1 190px; margin: 0; }
.dc-row .btn { flex: none; white-space: nowrap; }
.dc-box label { margin-top: 0; }
.dc-hint { color: var(--tx-dim); font-size: 12.5px; margin: 9px 0 0; }
.dc-ok { color: var(--msg-ok); font-size: 14px; margin-bottom: 14px; }
.dc-box .msg { margin-bottom: 14px; }
@media (max-width: 460px) { .dc-row .btn { width: 100%; } }

/* ── Interruptor de publicidad de /admin ────────────────────────
   Todo el color sale de variables: si se pone a mano, el modo día se rompe. */
.adswitch {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  justify-content: space-between;
  padding: 16px 18px; margin: 0 0 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--soft);
}
.adswitch.on { border-left: 4px solid var(--ok); }
.adswitch.off { border-left: 4px solid var(--tx-dim); }
.adswitch > div { flex: 1; min-width: 260px; }
.adswitch b { display: block; font-size: 16px; color: var(--tx); margin-bottom: 4px; }
.adswitch p { margin: 0; color: var(--tx-dim); font-size: 13px; line-height: 1.6; }
.adswitch .btn { flex: none; }

/* ══════════════════════════════════════════════════════════════
   Antibot invisible + paso del código de alta (2026-08-20)
   Todo el color sale de variables: si se pone a mano, el modo día se rompe.
   ══════════════════════════════════════════════════════════════ */

/* Campo trampa: tiene que ser invisible para una persona pero existir en el
   HTML para que un bot lo llene. Nada de display:none — algunos bots lo saltean. */
.zx-hp {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; opacity: 0 !important;
  pointer-events: none;
}

/* Turnstile: con `interaction-only` no dibuja nada salvo que sospeche de la
   visita; recién ahí aparece el recuadro en la esquina. */
.zx-captcha { position: fixed; right: 14px; bottom: 14px; z-index: 70; }
.zx-captcha:empty { display: none; }

/* ── Paso 2 del alta: el código de 6 dígitos ── */
.codebox { text-align: center; }
.code-ico { font-size: 40px; line-height: 1; }
.codebox h2 { margin: 10px 0 6px; }
.codebox .code-sub { color: var(--tx-dim); font-size: 14px; margin: 0 auto 18px; max-width: 420px; }

.code-vias { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; text-align: left; }
.via {
  display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--tx-dim);
  background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
}
.via b { color: var(--tx); font-weight: 600; }
.via .via-ico { font-size: 17px; flex: none; }
.via .via-ok { margin-left: auto; flex: none; font-size: 12px; color: var(--ok); white-space: nowrap; }
.via.off { opacity: .62; }
.via.off .via-ok { color: var(--tx-dim); }

.code-cells { display: flex; gap: 9px; justify-content: center; margin: 4px 0 16px; }
.code-cells input {
  width: 52px; height: 62px; margin: 0; padding: 0;
  text-align: center; font-size: 26px; font-weight: 700; letter-spacing: 0;
  border-radius: 12px;
}
.code-cells input:focus { border-color: var(--naranja); }
.code-foot { color: var(--tx-dim); font-size: 12.8px; margin-top: 15px; }
.code-foot a { cursor: pointer; }
@media (max-width: 430px) {
  .code-cells { gap: 6px; }
  .code-cells input { width: 44px; height: 55px; font-size: 22px; }
}

/* ── Aviso de términos actualizados (2026-08-21) ──────────────
   Franja arriba del contenido, en el panel y en la portada. Se cierra con el
   botón y no vuelve hasta la próxima versión de los términos. */
.tos-aviso {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(255, 180, 50, .12);
  border: 1px solid rgba(255, 180, 50, .45);
  border-radius: 12px;
  padding: 12px 16px; margin: 0 0 18px;
  color: var(--tx); font-size: 14px; line-height: 1.6;
}
.tos-aviso a { color: var(--naranja); font-weight: 600; }
.tos-aviso button {
  margin-left: auto; background: transparent; color: var(--tx-dim);
  border: 1px solid var(--bd); border-radius: 8px;
  padding: 5px 12px; font-size: 12.5px; cursor: pointer;
}
.tos-aviso button:hover { color: var(--tx); border-color: var(--tx-dim); }

/* ═══════════════════════════════════════════════════════════════
   AVISOS DE ZELIXHOST (2026-09-23)
   Con la publicidad apagada, los huecos de anuncios muestran avisos propios que
   rotan (24/7, dominio nuevo, Discord…). Clases `aviso*` y no `ad*`: sin el
   rótulo "Publicidad" y sin que los bloqueadores de anuncios los escondan.
   ═══════════════════════════════════════════════════════════════ */
.aviso {
  background: var(--soft); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 18px; overflow: hidden; position: relative;
}
.aviso-inner { min-height: 88px; display: flex; flex-direction: column; justify-content: center;
  padding: 6px 4px 10px; transition: opacity .25s; }
.aviso-inner.aviso-fade { opacity: 0; }
.atb-ad .aviso { margin-bottom: 0; }
.atb-ad .aviso-inner { min-height: 60px; padding: 2px 4px 6px; }
.aviso-card {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; width: 100%;
  color: var(--tx); text-decoration: none; text-align: left; flex-wrap: wrap; box-sizing: border-box;
}
.aviso-card:hover { text-decoration: none; }
.aviso-ic { flex: none; font-size: 30px; line-height: 1; width: 40px; text-align: center; }
.aviso-tx { flex: 1 1 180px; min-width: 0; font-size: 13.5px; color: var(--tx-dim); line-height: 1.5; }
.aviso-tx b { display: block; color: var(--tx); font-size: 14.5px; }
.aviso-card em {
  flex: none; font-style: normal; font-weight: 600; font-size: 13px;
  background: var(--amber); color: #23252a; padding: 8px 14px; border-radius: 7px;
}
.aviso-dots { display: flex; gap: 5px; justify-content: center; }
.aviso-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.aviso-dots i.on { background: var(--amber); }
/* Franja del medio: la marca a la izquierda */
.aviso-mark { flex: none; width: 44px; height: 44px; object-fit: contain; }

/* Costado: CARTEL vertical, alto como un afiche, con el logo grande. El fondo es
   oscuro fijo (no del tema) porque las letras del logo son claras. */
.aviso-side { background: none; border: 0; }
.aviso-side .aviso-inner { padding: 0; min-height: 0; }
.aviso-cartel {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 660px; padding: 30px 20px 20px; box-sizing: border-box; text-align: center;
  color: #f3f1ea; text-decoration: none; border-radius: var(--radius);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 180, 50, .28), transparent 70%),
    linear-gradient(180deg, #1b1d22 0%, #23262d 55%, #2b2418 100%);
  border: 1px solid rgba(255, 180, 50, .45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.aviso-cartel:hover { text-decoration: none; border-color: #ffb432; }
.aviso-logo { width: 100%; max-width: 220px; height: auto; filter: drop-shadow(0 6px 18px rgba(255, 180, 50, .35)); }
.aviso-cartel .aviso-ic { font-size: 54px; width: auto; }
.aviso-cartel b { font-size: 21px; line-height: 1.25; color: #fff; }
.aviso-cartel .aviso-tx { flex: none; font-size: 14.5px; color: #cfcbc0; line-height: 1.55; }
.aviso-cartel em {
  font-style: normal; font-weight: 700; font-size: 15px; width: 100%; box-sizing: border-box;
  background: #ffb432; color: #23252a; padding: 12px 14px; border-radius: 9px;
}
.aviso-cartel .aviso-dots i { background: rgba(255, 255, 255, .25); }
.aviso-cartel .aviso-dots i.on { background: #ffb432; }
@media (max-width: 900px) {
  .aviso-cartel { min-height: 0; }
  .aviso-logo { max-width: 160px; }
}
@media (max-width: 600px) {
  .aviso-card em { width: 100%; text-align: center; }
}

/* Estado de la consola (2026-09-23) */
.con-estado { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; color: var(--tx-dim); }
.con-estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.con-estado.on { color: #4caf50; }
.con-estado.load { color: var(--naranja, #ffb432); }
.con-estado.on::before { animation: conlatido 1.6s ease-in-out infinite; }
@keyframes conlatido { 50% { opacity: .35; } }

/* Íconos de línea (los pone zx.js en lugar de los emojis). Son una máscara
   pintada con el color del texto, así siguen al tema y a los botones, y van al
   tamaño de la letra de donde estén. */
i.zi {
  display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none;
  font-style: normal; background-color: currentColor;
  -webkit-mask: var(--zi) center / contain no-repeat; mask: var(--zi) center / contain no-repeat;
}
i.zi-ok, i.zi-oro { color: var(--amber-2); }
i.zi-warn { color: var(--amber); }
i.zi-bad  { color: var(--red); }
i.zi-on, i.zi-off {                 /* 🟢 / ⚫: punto de estado lleno, no un aro */
  -webkit-mask: none; mask: none; border-radius: 50%; width: .62em; height: .62em; vertical-align: .02em; margin: 0 .2em;
}
i.zi-on  { background-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
i.zi-off { background-color: #6b7280; }
.btn-naranja i.zi, .atdot i.zi, .msg i.zi { color: inherit; }
/* Los íconos grandes de las tarjetas van con el color de acento, no gris. */
.feature .ico, .code-ico, .adgate-ico, .dc-ico, .via-ico, .world .ic { color: var(--amber-2); }

/* ── Modo día del panel ───────────────────────────────────────
   La barra de arriba, la lateral y la tarjeta del servidor tienen colores
   fijos para el modo noche; acá van sus versiones claras. */
:root[data-theme="light"] .atb { background: #ffffff; border-bottom-color: var(--line); box-shadow: 0 1px 3px rgba(16,24,40,.06); }
:root[data-theme="light"] .atb-logo span { color: var(--tx); }
:root[data-theme="light"] .atb-logo span i { color: var(--tx-dim); }
:root[data-theme="light"] .atb-right .userchip,
:root[data-theme="light"] .atb-right .theme-btn,
:root[data-theme="light"] .atb-burger { background: var(--soft); border-color: var(--line); color: var(--tx); }
:root[data-theme="light"] .atb-right .userchip a { color: var(--tx-dim); }
:root[data-theme="light"] .atb-right .theme-btn:hover,
:root[data-theme="light"] .atb-burger:active { background: var(--hover); }

:root[data-theme="light"] .atside { background: #f7f8fa; border-right-color: var(--line); }
:root[data-theme="light"] .atside-srv { background: #ffffff; border-bottom-color: var(--line); }
:root[data-theme="light"] .atside-srv .nom b { color: var(--tx); }
:root[data-theme="light"] .atside-srv .nom small,
:root[data-theme="light"] .atnav .lk { color: var(--tx-dim); }
:root[data-theme="light"] .atdot { color: #7a818d; background: rgba(100,108,122,.08); border-color: rgba(100,108,122,.2); }
:root[data-theme="light"] .atnav { color: #3d434d; }
:root[data-theme="light"] .atnav:hover { background: #eceef2; color: var(--tx); }
:root[data-theme="light"] .atnav.sel { background: #e8eaef; color: var(--tx); }

:root[data-theme="light"] .atcard-addr { background: #ffffff; border: 1px solid var(--line); border-bottom: 0; }
:root[data-theme="light"] .atcard-addr .dir { color: var(--tx); }
:root[data-theme="light"] .atcard-addr .sub { color: var(--tx-dim); }
:root[data-theme="light"] .atcard-addr .btn { background: var(--card-2); color: var(--tx); }
:root[data-theme="light"] .atcard-addr .btn:hover { background: var(--hover); }
:root[data-theme="light"] .atstatus.off { background: #dfe2e7; color: #3d434d; }
:root[data-theme="light"] .atstatus.on { background: #ffe500; }   /* el amarillo vivo, con texto oscuro se lee bien */

@media (max-width: 900px) {
  :root[data-theme="light"] .atside { border-right-color: var(--line); box-shadow: 0 0 44px rgba(16,24,40,.18); }
  :root[data-theme="light"] .atnavbg { background: rgba(16,24,40,.35); }
}

/* ── Modo medio del panel ──────────────────────────────────────
   Marco del panel en los modos medio: los colores salen de las --at-* de
   cada paleta (arriba, junto a las variables del modo). */
:root:is([data-theme^="medio"],[data-theme="dark"]) .atb { background: var(--at-top); border-bottom-color: var(--at-top-line); }
:root:is([data-theme^="medio"],[data-theme="dark"]) .atb-right .userchip,
:root:is([data-theme^="medio"],[data-theme="dark"]) .atb-right .theme-btn,
:root:is([data-theme^="medio"],[data-theme="dark"]) .atb-burger { background: var(--at-chip); border-color: var(--at-chip-line); color: var(--tx); }
:root:is([data-theme^="medio"],[data-theme="dark"]) .atb-right .userchip a { color: var(--tx-dim); }
:root:is([data-theme^="medio"],[data-theme="dark"]) .atb-right .theme-btn:hover,
:root:is([data-theme^="medio"],[data-theme="dark"]) .atb-burger:active { background: var(--at-chip-hover); }
:root:is([data-theme^="medio"],[data-theme="dark"]) .atside { background: var(--at-side); border-right-color: var(--at-side-line); }
:root:is([data-theme^="medio"],[data-theme="dark"]) .atside-srv { background: var(--at-srv); border-bottom-color: var(--at-srv-line); }
:root:is([data-theme^="medio"],[data-theme="dark"]) .atside-srv .nom small,
:root:is([data-theme^="medio"],[data-theme="dark"]) .atnav .lk, :root:is([data-theme^="medio"],[data-theme="dark"]) .atb-logo span i { color: var(--tx-dim); }
:root:is([data-theme^="medio"],[data-theme="dark"]) .atnav { color: var(--at-nav-tx); }
:root:is([data-theme^="medio"],[data-theme="dark"]) .atnav:hover { background: var(--at-nav-hover); }
:root:is([data-theme^="medio"],[data-theme="dark"]) .atnav.sel { background: var(--at-nav-sel); }
:root:is([data-theme^="medio"],[data-theme="dark"]) .atcard-addr { background: var(--at-card); }
:root:is([data-theme^="medio"],[data-theme="dark"]) .atcard-addr .sub { color: var(--at-card-sub); }
:root:is([data-theme^="medio"],[data-theme="dark"]) .atcard-addr .btn { background: var(--at-card-btn); }
:root:is([data-theme^="medio"],[data-theme="dark"]) .atcard-addr .btn:hover { background: var(--at-card-btn-hover); }
:root:is([data-theme^="medio"],[data-theme="dark"]) .atstatus.off { background: var(--at-off); color: var(--at-off-tx); }
@media (max-width: 900px) {
  :root:is([data-theme^="medio"],[data-theme="dark"]) .atside { box-shadow: 0 0 44px rgba(0,0,0,.35); }
  :root:is([data-theme^="medio"],[data-theme="dark"]) .atnavbg { background: rgba(20,22,26,.45); }
}

/* ── Negro brillante: el brillo ─────────────────────────────────
   Un resplandor naranja arriba de la página y, en tarjetas y botones
   neutros, un degradé muy suave + una línea de luz en el borde superior. */
:root:is([data-theme="medio-negro"],[data-theme="dark"]) body {
  background:
    radial-gradient(900px 420px at 50% -160px, rgba(255,180,50,.10), transparent 70%),
    radial-gradient(700px 500px at 100% 0, rgba(255,120,40,.05), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
:root:is([data-theme="medio-negro"],[data-theme="dark"]) .card, :root:is([data-theme="medio-negro"],[data-theme="dark"]) .stat, :root:is([data-theme="medio-negro"],[data-theme="dark"]) .atcard-addr, :root:is([data-theme="medio-negro"],[data-theme="dark"]) .atside-srv {
  background-image: var(--brillo);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -18px rgba(0,0,0,.9);
}
:root:is([data-theme="medio-negro"],[data-theme="dark"]) .card:hover, :root:is([data-theme="medio-negro"],[data-theme="dark"]) .stat:hover { border-color: #3a3a44; }
:root:is([data-theme="medio-negro"],[data-theme="dark"]) .atb { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
:root:is([data-theme="medio-negro"],[data-theme="dark"]) .atside { background-image: linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%); }
:root:is([data-theme="medio-negro"],[data-theme="dark"]) .atnav.sel { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
:root:is([data-theme="medio-negro"],[data-theme="dark"]) .btn-ghost, :root:is([data-theme="medio-negro"],[data-theme="dark"]) .atcard-addr .btn, :root:is([data-theme="medio-negro"],[data-theme="dark"]) .theme-btn, :root:is([data-theme="medio-negro"],[data-theme="dark"]) .userchip {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
:root:is([data-theme="medio-negro"],[data-theme="dark"]) .atcard-addr { border: 1px solid var(--line); border-bottom: 0; }
:root:is([data-theme="medio-negro"],[data-theme="dark"]) .atstatus.off { border: 1px solid var(--line); border-top: 0; }
:root:is([data-theme="medio-negro"],[data-theme="dark"]) .btn-naranja, :root:is([data-theme="medio-negro"],[data-theme="dark"]) .atbig { box-shadow: 0 8px 24px -10px rgba(255,180,50,.55), inset 0 1px 0 rgba(255,255,255,.35); }
:root:is([data-theme="medio-negro"],[data-theme="dark"]) .atbig.stop { box-shadow: 0 8px 24px -10px rgba(224,69,95,.55), inset 0 1px 0 rgba(255,255,255,.25); }
.atb-right .lang-btn { font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════
   PORTADA SIN FOTO (2026-10-26)
   La cueva dorada (mundo-oro-v5) quedaba borrosa y llena de manchas
   justo detrás del título: a Antu le parecía fea. Ahora el fondo es
   puro CSS: un resplandor naranja detrás de la muestra del panel, otro
   más tenue arriba a la izquierda y una grilla de "bloques" que se
   desvanece. No pesa nada y el texto queda siempre sobre fondo liso.
   Las máscaras de fundido (--fade-x / --fade-y) siguen siendo las de
   arriba, así que se apaga hacia los bordes igual que la foto.
   ═══════════════════════════════════════════════════════════════ */
.hero-photo {
  --brillo: rgba(255,180,50,.10);
  --brillo-2: rgba(255,229,0,.035);
  --grilla: transparent;   /* la grilla no le gustó a Antu: fondo liso */
  opacity: 1;
  background-image:
    radial-gradient(48% 58% at 74% 46%, var(--brillo), transparent 70%),
    radial-gradient(38% 46% at 12% 8%, var(--brillo-2), transparent 70%),
    linear-gradient(var(--grilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--grilla) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  background-position: center, center, center top, center top;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}
:root[data-theme="light"] .hero-photo {
  --brillo: rgba(255,170,30,.12);
  --brillo-2: rgba(255,200,0,.05);
  --grilla: transparent;
}
/* En el celular el panel de muestra va abajo del texto: el brillo sube al
   centro, detrás del título. */
@media (max-width: 940px) {
  .hero-photo { background-image:
    radial-gradient(70% 40% at 50% 30%, var(--brillo), transparent 72%),
    radial-gradient(60% 30% at 50% 0%, var(--brillo-2), transparent 70%),
    linear-gradient(var(--grilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--grilla) 1px, transparent 1px); }
}
/* El título con un degradé naranja→amarillo en "Minecraft", como el logo */
.hero h1 em {
  background: linear-gradient(92deg, var(--naranja), #ffe500);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="light"] .hero h1 em {
  background: linear-gradient(92deg, #e8890c, #d9a400);
  -webkit-background-clip: text; background-clip: text;
}
/* La ventana del panel se apoya sobre un halo, en vez de flotar en la nada */
.hero-demo::before {
  content: ''; position: absolute; inset: 8% 6%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255,180,50,.28), transparent);
  filter: blur(30px);
}
.demo-win { border-color: rgba(255,180,50,.22); }

/* ── Barra de arriba en el celular ─────────────────────────────
   No entraba: "Mi servidor" se partía en dos renglones y el botón
   "Crear cuenta gratis" quedaba afuera de la pantalla. En la portada
   los links sobran (el botón ya lleva al alta y "Mi servidor" pide
   login), así que en pantallas angostas se esconden. */
@media (max-width: 600px) {
  .topbar { gap: 8px; padding: 0 12px; height: 58px; }
  .topbar nav { display: none; }
  .topbar .brand { font-size: 16px; gap: 6px; }
  .topbar .brand img { width: 26px; height: 26px; }
  .topbar .lang-btn { margin-right: 0; }
  .topbar .theme-btn { width: 34px; height: 34px; }
  .topbar > .btn { padding: 8px 11px; font-size: 12.5px; white-space: nowrap; }
}
@media (max-width: 380px) {
  .topbar .brand { font-size: 0; }               /* queda solo el rayo */
}