/* Koonda · Neo (20/10/2026)
   Neomorfismo sobrio: una superficie neutra y casi sin color; los controles salen de ella (relieve) o se hunden
   (pulsado, campos), con una sombra oscura y una luz enfrentadas. Esquinas generosas y el naranja de Koonda como
   único acento. El texto y los controles importantes, siempre con contraste alto; el foco, con su anillo de siempre;
   y ningún estado se dice solo con la sombra: también cambia el color, sale una marca o un icono.
   Va encima de estilo.css (se carga después) y no cambia nada de cómo funciona la web. */
:root {
  /* La superficie y sus dos sombras */
  --neo: #1c1b20; --neo-alto: #222127; --neo-bajo: #16151a; --neo-hundido: #151418;
  --neo-oscura: rgba(0, 0, 0, .66); --neo-luz: rgba(255, 255, 255, .068); --neo-borde: rgba(255, 255, 255, .05);
  --relieve: 7px 7px 16px var(--neo-oscura), -5px -5px 14px var(--neo-luz);
  --relieve-s: 4px 4px 10px var(--neo-oscura), -3px -3px 8px var(--neo-luz);
  --relieve-xs: 2px 2px 5px var(--neo-oscura), -2px -2px 4px var(--neo-luz);
  --relieve-l: 12px 12px 28px var(--neo-oscura), -8px -8px 22px var(--neo-luz);
  --hundido: inset 5px 5px 11px var(--neo-oscura), inset -4px -4px 9px var(--neo-luz);
  --hundido-s: inset 3px 3px 7px var(--neo-oscura), inset -2px -2px 6px var(--neo-luz);
  /* El naranja de Koonda (cambia de tono con «Color de Koonda», pero siempre es naranja) */
  --n1: #ffc078; --n2: #ff8a1f; --n3: #e8590c;
  --acento: var(--n2); --acento-texto: #ffb15c; --foco: #ffb347;
  --grad: linear-gradient(135deg, var(--n1) 0%, var(--n2) 52%, var(--n3) 100%);
  --grad-v: linear-gradient(180deg, var(--n1) 0%, var(--n2) 52%, var(--n3) 100%);
  --led: var(--n2); --ambar: #ffb347; --coral: #ff7a3c; --tinta: #1a0c02;
  /* Texto: blanco cálido y grises con contraste de sobra sobre la superficie */
  --fondo: var(--neo); --fondo-2: var(--neo-alto);
  --texto: #f4efe8; --tenue: #b8b1a7; --apagado: #958e84; --muy-apagado: #3a3833;
  --s1: rgba(255, 255, 255, .025); --s2: rgba(255, 255, 255, .045); --s3: rgba(255, 255, 255, .07); --s4: rgba(255, 255, 255, .1);
  --linea: rgba(255, 255, 255, .06); --linea-2: rgba(255, 255, 255, .1); --linea-3: rgba(255, 255, 255, .18);
  --rojo: #ff6b5b; --verde: #5ad18a;
  --aura-1: rgba(255, 138, 31, .07); --aura-2: transparent; --aura-3: rgba(255, 138, 31, .035);
  --sombra: var(--relieve);
  --display: "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
  --cuerpo: "Inter", "Segoe UI", system-ui, sans-serif;
  --r-s: 12px; --r: 16px; --r-l: 22px; --r-xl: 30px;
  --borroso: none;
}
/* Los tonos de naranja (los mismos nombres de siempre por dentro; en Ajustes se llaman por su tono) */
:root[data-acento="oceano"] { --n1: #ffd29a; --n2: #ff9a2e; --n3: #f06a00; --acento-texto: #ffbd6b; --foco: #ffc27a; }
:root[data-acento="lima"] { --n1: #ffe6a6; --n2: #ffbf47; --n3: #e09400; --acento-texto: #ffd27a; --foco: #ffd27a; }
:root[data-acento="lavanda"] { --n1: #ffb9a3; --n2: #ff7a59; --n3: #e5482e; --acento-texto: #ff9f86; --foco: #ffa48c; }
:root[data-acento="fresa"] { --n1: #f2b28c; --n2: #dc6b35; --n3: #a8431b; --acento-texto: #f0a074; --foco: #f0a074; }
:root[data-acento="oro"] { --n1: #ffeab4; --n2: #e8b04c; --n3: #b47a12; --acento-texto: #f1c76f; --foco: #f1c76f; }
:root[data-acento="galaxia"] { --n1: #ffb37a; --n2: #ff5c1f; --n3: #c4321a; --acento-texto: #ff8c5a; --foco: #ff9466; }
:root[data-acento="medianoche"] { --n1: #ffc078; --n2: #ff8a1f; --n3: #e8590c; }
:root[data-acento="medianoche"]:not([data-modo="claro"]) { --neo: #14161d; --neo-alto: #191b23; --neo-bajo: #101218; --neo-hundido: #0f1116; --fondo: var(--neo); --fondo-2: var(--neo-alto); }
:root[data-acento="medianoche"]:not([data-modo="claro"]) .vidrio { background: var(--neo) !important; }
:root[data-acento] {                                                    /* sea cual sea el tono, el degradado sale de él (ganando a los colores viejos) */
  --grad: linear-gradient(135deg, var(--n1) 0%, var(--n2) 52%, var(--n3) 100%); --grad-v: linear-gradient(180deg, var(--n1) 0%, var(--n2) 52%, var(--n3) 100%);
  --led: var(--n2); --tinta: #1a0c02; --aura-1: color-mix(in srgb, var(--n2) 8%, transparent); --aura-2: transparent; --aura-3: color-mix(in srgb, var(--n2) 4%, transparent);
}
:root[data-acento] ::selection { background: color-mix(in srgb, var(--n2) 45%, transparent); }
:root[data-acento]:not([data-acento="koonda"]) :focus-visible { outline-color: var(--foco); }

/* ---- Modo claro: el mismo relieve sobre papel cálido ---- */
:root[data-modo="claro"] {
  --neo: #e9e5df; --neo-alto: #efebe5; --neo-bajo: #e2ddd6; --neo-hundido: #e0dbd3;
  --neo-oscura: rgba(150, 138, 120, .5); --neo-luz: rgba(255, 255, 255, .95); --neo-borde: rgba(255, 255, 255, .6);
  --fondo: var(--neo); --fondo-2: var(--neo-alto);
  --texto: #1d1a16; --tenue: #4f4941; --apagado: #655e55; --muy-apagado: #bdb5aa;
  --s1: rgba(60, 48, 30, .035); --s2: rgba(60, 48, 30, .055); --s3: rgba(60, 48, 30, .085); --s4: rgba(60, 48, 30, .12);
  --linea: rgba(60, 48, 30, .1); --linea-2: rgba(60, 48, 30, .15); --linea-3: rgba(60, 48, 30, .25);
  --acento-texto: #b5480a; --foco: #c2410c; --ambar: #b5480a; --coral: #c2410c; --rojo: #c42d1f; --verde: #1d7a43;
  --aura-1: rgba(255, 138, 31, .08); --aura-3: transparent;
  --sombra: var(--relieve);
}

/* ---- Base ---- */
body { background: var(--neo); font: 400 15px/1.6 var(--cuerpo); }
body::before { opacity: .9; }
body::after { opacity: .028; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 10px; }
.display, h1, h2, h3 { font-family: var(--display); }
.display { font-weight: 700; letter-spacing: -.035em; }
h2.titulo, h1.titulo { font-weight: 700; letter-spacing: -.03em; }
h3.titulo, h2.titulo.t3 { font-weight: 700; letter-spacing: -.015em; }
.etiqueta, .kicker, .hub-seccion, .hub-gente-tit, .pf-ahora small.etiqueta { font: 500 10.5px/1.3 var(--cuerpo); letter-spacing: .14em; text-transform: uppercase; }
.etiqueta { color: var(--tenue); }
.kicker { color: var(--acento-texto); }
.kicker::before { background: var(--acento); height: 2px; width: 22px; transform-origin: left; animation: neoRaya .5s var(--ease) both; }
@keyframes neoRaya { from { transform: scaleX(0); } }
.grad-texto { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
::selection { background: color-mix(in srgb, var(--n2) 45%, transparent); }

/* ---- Superficies: todo lo que era cristal sale ahora de la superficie ---- */
.vidrio, .vidrio.fuerte {
  background: var(--neo) !important; border: 1px solid var(--neo-borde); box-shadow: var(--relieve);
  backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: var(--r-l);
}
.vidrio .vidrio { box-shadow: var(--relieve-s); }
.tarjeta { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--relieve-l); border-color: var(--neo-borde); }
.tarjeta:hover b, .tarjeta:hover h3 { color: var(--acento-texto); }
.rayita, hr.rayita { background: var(--linea); }

/* ---- Botones: en relieve; al pulsar, se hunden ---- */
.btn {
  background: var(--neo); color: var(--texto); border: 1px solid var(--neo-borde); border-radius: 14px;
  box-shadow: var(--relieve-s); font-weight: 600;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease), color .15s, background-color .15s, opacity .15s;
}
.btn:hover { background: var(--neo-alto); color: var(--acento-texto); border-color: var(--neo-borde); box-shadow: var(--relieve); transform: translateY(-1px); }
.btn:active, .btn.pulsado { box-shadow: var(--hundido-s); transform: translateY(1px); transition-duration: .06s; color: var(--acento-texto); }
/* Activo (elegido): hundido, en naranja y con su rayita debajo — así se ve aunque no se vean las sombras */
.btn.activo, .btn[aria-pressed="true"] {
  background: var(--neo-hundido); color: var(--acento-texto); border-color: color-mix(in srgb, var(--n2) 35%, transparent); box-shadow: var(--hundido-s);
  background-image: linear-gradient(var(--acento), var(--acento)); background-size: 16px 2px; background-position: 50% calc(100% - 5px); background-repeat: no-repeat;
}
.btn.primario, .btn.brillo, .btn.ambar {
  background: var(--grad); color: var(--tinta); border-color: transparent; font-weight: 700;
  box-shadow: var(--relieve-s), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn.primario:hover, .btn.brillo:hover, .btn.ambar:hover { background: var(--grad); color: var(--tinta); filter: brightness(1.06) saturate(1.05); box-shadow: var(--relieve), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn.primario:active, .btn.brillo:active, .btn.ambar:active { box-shadow: inset 3px 3px 8px rgba(80, 30, 0, .55), inset -2px -2px 6px rgba(255, 220, 170, .35); filter: brightness(.96); color: var(--tinta); }
.btn.fantasma { background: transparent; border-color: transparent; box-shadow: none; }
.btn.fantasma:hover { background: var(--neo); border-color: var(--neo-borde); box-shadow: var(--relieve-xs); }
.btn.fantasma:active { box-shadow: var(--hundido-s); }
.btn.fantasma.activo, .btn.fantasma[aria-pressed="true"] { box-shadow: var(--hundido-s); }
.btn.peligro { color: var(--rojo); background: var(--neo); border-color: color-mix(in srgb, var(--rojo) 30%, transparent); }
.btn.peligro:hover { color: var(--rojo); background: color-mix(in srgb, var(--rojo) 8%, var(--neo)); }
/* Desactivado: plano, con borde de puntos, más apagado y con su cursor (no solo «sin sombra») */
.btn[disabled], .btn[aria-disabled="true"], button:disabled {
  opacity: .5; box-shadow: none !important; background: transparent !important; border: 1px dashed var(--linea-3) !important; color: var(--tenue) !important;
  cursor: not-allowed; filter: none; transform: none;
}
button.btn[disabled] { pointer-events: auto; }
.btn.icono { border-radius: 14px; }
.btn.redondo, .btn.icono.redondo { border-radius: 999px; }
.btn.mini { border-radius: 12px; }
.btn.grande { border-radius: 18px; }
@media (pointer: coarse) { .btn.mini { min-height: 40px; } .btn.icono.mini { width: 40px; } }

/* ---- Campos: hundidos en la superficie ---- */
.entrada, select.entrada, textarea.entrada, .hub-busca {
  background: var(--neo-hundido); border: 1px solid transparent; border-radius: 14px; box-shadow: var(--hundido); color: var(--texto);
}
.entrada:hover, .hub-busca:hover { border-color: var(--linea-2); }
.entrada:focus, .hub-busca:focus, :root[data-acento] .entrada:focus { outline: 3px solid var(--foco); outline-offset: 2px; border-color: transparent; background: var(--neo-hundido); box-shadow: var(--hundido); }
.entrada::placeholder { color: var(--apagado); }
.entrada:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; border: 1px dashed var(--linea-3); }
/* Error: borde rojo, fondo con un toque de rojo y su mensaje (con icono) — no solo color */
.entrada[aria-invalid="true"], .entrada:user-invalid, .campo.error .entrada { border: 2px solid var(--rojo); background: color-mix(in srgb, var(--rojo) 7%, var(--neo-hundido)); }
.campo.error > span { color: var(--rojo); }
.texto-error { display: flex; align-items: center; gap: 6px; color: var(--rojo); font: 600 13px/1.4 var(--cuerpo); }
.texto-error::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--rojo); color: #fff; font: 800 12px/1 var(--cuerpo); flex: none; }

/* ---- Interruptores: el carril hundido, la bola en relieve; encendido, naranja y con su ✓ ---- */
.sw { width: 50px; height: 30px; background: var(--neo-hundido); border: 1px solid var(--linea-2); box-shadow: var(--hundido-s); }
.sw::after { top: 3px; left: 3px; width: 22px; height: 22px; background: var(--neo-alto); box-shadow: var(--relieve-xs); }
.sw:checked { background: var(--grad); border-color: transparent; box-shadow: inset 2px 2px 5px rgba(80, 30, 0, .45); }
.sw:checked::after { transform: translateX(20px); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px no-repeat; }
.sw:disabled { opacity: .45; cursor: not-allowed; }
.sw:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }

/* ---- Grupos de botones (segmentos y pestañas): el hueco hundido; lo elegido sale en relieve, en naranja y con rayita ---- */
.segmentos, .pestanas { background: var(--neo-hundido); border: 1px solid transparent; box-shadow: var(--hundido-s); border-radius: 16px; padding: 4px; }
.segmentos button, .pestanas button { border-radius: 12px; color: var(--tenue); }
.segmentos button:hover, .pestanas button:hover { color: var(--texto); }
.segmentos button.activo, .pestanas button.activo, .segmentos button[aria-pressed="true"] {
  background: var(--neo-alto); color: var(--acento-texto); box-shadow: var(--relieve-xs);
  background-image: linear-gradient(var(--acento), var(--acento)); background-size: 14px 2px; background-position: 50% calc(100% - 3px); background-repeat: no-repeat;
}
:root[data-modo="claro"] .segmentos, :root[data-modo="claro"] .pestanas { background: var(--neo-hundido); }
:root[data-modo="claro"] .segmentos button.activo { background: var(--neo-alto); box-shadow: var(--relieve-xs); }

/* ---- Chips y etiquetas ---- */
.chip { background: var(--neo); border: 1px solid var(--neo-borde); box-shadow: var(--relieve-xs); color: var(--tenue); }
.chip.ambar { color: var(--acento-texto); border-color: color-mix(in srgb, var(--n2) 30%, transparent); background: var(--neo); }
.chip.blanco { background: var(--texto); color: var(--neo); }

/* ---- Barra de arriba y del móvil ---- */
.barra { background: color-mix(in srgb, var(--neo) 92%, transparent) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 6px 18px -10px var(--neo-oscura); border-bottom: 1px solid var(--neo-borde); }
.marca { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.nav a { border-radius: 12px; }
.nav a:hover { background: var(--neo); color: var(--texto); box-shadow: var(--relieve-xs); }
.nav a.activo { background: var(--neo-hundido); color: var(--acento-texto); box-shadow: var(--hundido-s); }
.nav a.activo::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; background: var(--acento); }
.navmovil { background: var(--neo) !important; box-shadow: var(--relieve-l) !important; border: 1px solid var(--neo-borde); backdrop-filter: none; }
.navmovil a.activo { background: var(--neo-hundido); color: var(--acento-texto); box-shadow: var(--hundido-s); }
.navmovil a.activo::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 12px; height: 2px; margin-left: -6px; border-radius: 2px; background: var(--acento); }
.campana .globo, .globo-nav, .hub .globo, .rail-globo { background: var(--n3); color: #fff; }

/* ---- Ventanas y avisos ---- */
.velo { background: color-mix(in srgb, var(--neo-bajo) 70%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ventana { background: var(--neo) !important; box-shadow: var(--relieve-l) !important; border: 1px solid var(--neo-borde) !important; }
.aviso { background: var(--neo) !important; box-shadow: var(--relieve) !important; border: 1px solid var(--neo-borde) !important; color: var(--texto); backdrop-filter: none; }
.aviso.mal { border: 2px solid var(--rojo) !important; }
.aviso::before { background: var(--verde); box-shadow: none; }
.aviso.mal::before { background: var(--rojo); }

/* ---- Listas y filas ---- */
.elem { border-radius: 16px; transition: background .15s, box-shadow .15s; }
.elem:hover { background: var(--neo-alto); box-shadow: var(--relieve-xs); }

/* ---- La sala: la pantalla con su marco, los mandos en relieve, la barra hundida ---- */
.marco { box-shadow: 0 0 0 7px var(--neo), 0 0 0 8px var(--neo-borde), var(--relieve-l); border-radius: 22px; }
.mandos .btn { min-width: 44px; }
.mandos .play { background: var(--grad) !important; color: var(--tinta); box-shadow: var(--relieve), inset 0 1px 0 rgba(255, 255, 255, .4) !important; }
.mandos .play:hover { transform: translateY(-1px) scale(1.03); }
.mandos .play:active { box-shadow: inset 4px 4px 10px rgba(80, 30, 0, .55), inset -3px -3px 8px rgba(255, 220, 170, .35) !important; transform: scale(.98); }
.pista::before { height: 8px; border-radius: 6px; background: var(--neo-hundido); box-shadow: var(--hundido-s); }
.pista:hover::before { height: 10px; }
.pista .lleno { height: 6px; background: var(--grad); box-shadow: none; }
.pista .bolita { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--neo-alto); border: 2px solid var(--acento); box-shadow: var(--relieve-xs); transform: scale(1); }
input[type=range].fino::-webkit-slider-runnable-track { height: 6px; border-radius: 4px; background: var(--neo-hundido); box-shadow: var(--hundido-s); }
input[type=range].fino::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; background: var(--neo-alto); border: 2px solid var(--acento); box-shadow: var(--relieve-xs); }
input[type=range].fino::-moz-range-track { height: 6px; border-radius: 4px; background: var(--neo-hundido); }
input[type=range].fino::-moz-range-thumb { width: 16px; height: 16px; background: var(--neo-alto); border: 2px solid var(--acento); }
.sala .lado { background: var(--neo) !important; box-shadow: var(--relieve) !important; }
.mensaje.sistema { color: var(--tenue); }

/* ---- Portada: el resplandor naranja a la derecha con su rejilla, y entradas escalonadas ---- */
.heroe3 { position: relative; isolation: isolate; }
.heroe3::before {
  content: ""; position: absolute; right: -7vw; top: -40px; width: 58%; height: calc(100% + 80px); z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 70% 50%, color-mix(in srgb, var(--n2) 24%, transparent) 0%, color-mix(in srgb, var(--n2) 6%, transparent) 50%, transparent 70%),
    linear-gradient(color-mix(in srgb, var(--n2) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--n2) 6%, transparent) 1px, transparent 1px);
  background-size: auto, 60px 60px, 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at 65% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 65% 50%, #000 30%, transparent 75%);
}
.heroe3 h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .9; letter-spacing: -.035em; font-size: clamp(46px, 7.2vw, 108px); }
.heroe3 .badge { background: var(--neo); box-shadow: var(--relieve-xs); border-color: var(--neo-borde); }
.heroe3 .bajada { font-weight: 300; color: var(--tenue); }
.heroe3 > div > * { animation: neoSube .7s var(--ease) both; }
.heroe3 > div > :nth-child(2) { animation-delay: .1s; } .heroe3 > div > :nth-child(3) { animation-delay: .2s; } .heroe3 > div > :nth-child(4) { animation-delay: .3s; } .heroe3 > div > :nth-child(5) { animation-delay: .4s; }
@keyframes neoSube { from { opacity: 0; transform: translateY(16px); } }
.seccion header h2, .seccion h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; }

/* ---- Mensajes (estilo Discord) en relieve ---- */
.hub-rail { background: var(--neo-bajo); }
.rail-item { background: var(--neo); box-shadow: var(--relieve-s); }
.rail-item:hover { box-shadow: var(--relieve); }
.rail-item.activo { box-shadow: var(--hundido-s); outline: 2px solid color-mix(in srgb, var(--n2) 55%, transparent); outline-offset: 2px; }
.rail-item:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.rail-pastilla { background: var(--acento); }
.hub-lista { background: var(--neo); }
.hub-dm.activo, .hub-canal.activo { background: var(--neo-hundido); box-shadow: var(--hundido-s); color: var(--texto); }
.hub-dm.activo b, .hub-canal.activo .crece { color: var(--acento-texto); }
.hub-caja-fila { background: var(--neo-hundido); box-shadow: var(--hundido); border: 1px solid transparent; }
.hub-caja-fila:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; box-shadow: var(--hundido); border-color: transparent; }
.hub-herr { background: var(--neo); box-shadow: var(--relieve); border-color: var(--neo-borde); }
.hub-reac { background: var(--neo); box-shadow: var(--relieve-xs); }
.hub-reac.mia { background: var(--neo-hundido); box-shadow: var(--hundido-s); color: var(--acento-texto); border-color: color-mix(in srgb, var(--n2) 50%, transparent); }
.hub-pop { background: var(--neo); box-shadow: var(--relieve-l); }
.hub-lateral { background: var(--neo); }
.hub-cancion, .hub-enlace-musica, .hub-rama-boton { background: var(--neo); box-shadow: var(--relieve-xs); border-color: var(--neo-borde); }
.hub-msg.me-nombran { box-shadow: inset 3px 0 0 var(--acento); background: color-mix(in srgb, var(--n2) 7%, transparent); }

/* ---- Perfil ---- */
.pf-numero { box-shadow: var(--relieve); }
.pf-numero-ico { box-shadow: var(--hundido-s); background: var(--neo-hundido); }
.pf-caratula-img { box-shadow: var(--relieve); }
.pf-top-barra { background: var(--grad); }

/* ---- Movimiento reducido: el relieve se queda; las entradas, sin animación ---- */
html.calma .heroe3 > div > *, html.calma .kicker::before { animation: none; }
@media (prefers-contrast: more) {
  :root { --neo-luz: transparent; --linea: rgba(255, 255, 255, .25); --tenue: #d8d2c8; }
  .btn, .entrada, .vidrio { border: 2px solid var(--linea-3) !important; }
}
@media (forced-colors: active) {
  .btn, .entrada, .vidrio, .sw, .segmentos button.activo { border: 2px solid ButtonText !important; }
  .btn.activo, .segmentos button.activo { outline: 3px solid Highlight; }
}

/* El fondo que baila y los temas de sala tiñen el ambiente; los botones y acentos siguen siendo del naranja elegido */
.sala[data-vivo="1"], .sala[data-tema] { --grad: linear-gradient(135deg, var(--n1) 0%, var(--n2) 52%, var(--n3) 100%) !important; --grad-v: linear-gradient(180deg, var(--n1) 0%, var(--n2) 52%, var(--n3) 100%) !important; }

/* ---- Menú hamburguesa (móvil, sin cuenta) ---- */
.hamburguesa { display: none; }
.lineas { display: grid; gap: 4px; width: 18px; }
.lineas i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.menu-movil { display: grid; gap: 6px; }
.menu-movil .elem { width: 100%; border: 0; background: var(--neo); box-shadow: var(--relieve-xs); color: var(--texto); padding: 14px; text-align: left; cursor: pointer; font: 600 15px var(--cuerpo); }
.menu-movil .elem:active { box-shadow: var(--hundido-s); }
.menu-movil .crece { flex: 1; }
@media (max-width: 640px) {
  .barra.sin-cuenta .hamburguesa { display: inline-flex; }
  .barra.sin-cuenta .btn-app, .barra.sin-cuenta .ajustes-barra, .barra.sin-cuenta .enlace-max, .barra.sin-cuenta .solo-ancho { display: none !important; }
}
/* ---- Modo claro: el naranja, con contraste suficiente sobre papel ---- */
:root[data-modo="claro"] .grad-texto { background: linear-gradient(135deg, #e8590c 0%, #c2410c 60%, #9a3412 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-modo="claro"] .btn.primario, :root[data-modo="claro"] .btn.brillo { background: var(--grad); color: var(--tinta); border-color: transparent; box-shadow: var(--relieve-s); }
:root[data-modo="claro"] .btn.primario:hover { background: var(--grad); }
:root[data-modo="claro"] .chip.blanco { background: var(--texto); color: var(--neo); border-color: transparent; }

.menu-movil .elem { display: flex; align-items: center; gap: 12px; }

/* Portada: «Salas abiertas» y «Entrar con código» acaban a la misma altura */
.rejilla.iguales { align-items: stretch; }
.rejilla.iguales > .panel, .rejilla.iguales > .pila > .panel { height: 100%; }

/* Sala vacía en el móvil: el escenario crece con lo que tiene (antes los atajos quedaban escondidos en un scroll interno) */
@media (max-width: 600px) {
  .marco:has(> .tapa[data-tipo="vacia"]:not([hidden])) { aspect-ratio: auto; max-height: none; }
  .marco > .tapa[data-tipo="vacia"]:not([hidden]) { position: relative; inset: auto; min-height: 56.25vw; padding: 22px 16px; overflow: visible; }
}