/* =============================================================================
   maeloro-ui.css — MaeloRO 30/09/2026. Sistema visual comun de la web.
   -----------------------------------------------------------------------------
   Variables con prefijo --mro- (no pisan las que ya tiene cada pagina: --gold de la portada es #ffd700 y el del
   foro #c9a84c), accesibilidad (foco visible, texto solo para lectores de pantalla, movimiento reducido) y piezas
   compartidas (pie con enlaces). Lo enlazan la portada, el registro, el foro, la wiki y las demas paginas ANTES de
   su capa "2026" propia. Quitar el <link> desactiva todo sin romper nada.
   ============================================================================= */

:root {
    /* paleta de MaeloRO: ciruela del cliente, oro viejo, lila, rosa y menta */
    --mro-fondo: #0a1116;
    --mro-fondo-2: #0e1921;
    --mro-panel: #0f1b23;
    --mro-panel-2: #14242f;
    --mro-panel-grad: linear-gradient(170deg, rgba(17, 31, 41, .94) 0%, rgba(9, 19, 26, .95) 100%);
    --mro-texto: #e7f2fa;
    --mro-texto-2: #c0d5e5;
    --mro-suave: #90acc1;
    --mro-oro: #d4a53a;
    --mro-oro-claro: #f0c75e;
    --mro-oro-vivo: #ffd700;
    --mro-oro-grad: linear-gradient(135deg, #a8761c 0%, #d4a53a 42%, #f0c75e 72%, #d4a53a 100%);
    --mro-lila: #9ed5fd;
    --mro-lila-2: #72b0dd;
    --mro-rosa: #b9e0fd;
    --mro-menta: #7ff0c8;
    --mro-rojo: #ff7b86;
    --mro-azul: #7cb8ff;
    --mro-linea: rgba(123, 183, 227, .22);
    --mro-linea-2: rgba(123, 183, 227, .42);
    --mro-linea-oro: rgba(212, 165, 58, .38);

    /* tipografia */
    --mro-fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --mro-fuente-titulo: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;

    /* forma, profundidad, ritmo */
    --mro-radio: 14px;
    --mro-radio-sm: 9px;
    --mro-radio-pill: 999px;
    --mro-sombra: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 12px 32px -14px rgba(0, 0, 0, .85);
    --mro-sombra-alta: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 22px 48px -18px rgba(0, 0, 0, .95), 0 0 0 1px rgba(212, 165, 58, .18);
    --mro-brillo-oro: 0 0 22px rgba(240, 199, 94, .22);
    --mro-esp-1: 4px;
    --mro-esp-2: 8px;
    --mro-esp-3: 12px;
    --mro-esp-4: 16px;
    --mro-esp-5: 24px;
    --mro-esp-6: 32px;
    --mro-t: .18s cubic-bezier(.2, .7, .3, 1);
    --mro-t-lenta: .45s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- accesibilidad ---------- */

/* foco visible con el teclado (con :where no pisa ningun estilo de foco que ya exista) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--mro-oro-claro);
    outline-offset: 2px;
}

/* texto solo para lectores de pantalla (p. ej. el <h1> de la portada, etiquetas de campos) */
.mro-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

::selection { background: rgba(212, 165, 58, .38); color: #ffffff; }

html { scrollbar-color: rgba(123, 183, 227, .45) transparent; }

/* movimiento reducido: si el sistema lo pide, nada se anima ni se desliza */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- aparicion suave al hacer scroll (la pone maeloro-fx.js, enlazado en todas las paginas desde el 08/10/2026; solo si no hay movimiento reducido) ---------- */
.mro-aparece { opacity: 0; transform: translateY(14px); transition: opacity var(--mro-t-lenta), transform var(--mro-t-lenta); }
.mro-aparece.mro-visto { opacity: 1; transform: none; }

/* ---------- pie comun con enlaces ---------- */
.mro-pie-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    margin: 0 auto 14px;
    padding: 0;
    list-style: none;
    font-family: var(--mro-fuente);
    font-size: .86rem;
}
.mro-pie-nav a {
    color: var(--mro-texto-2);
    text-decoration: none;
    padding: 4px 2px;
    border-bottom: 1px solid transparent;
    transition: color var(--mro-t), border-color var(--mro-t);
}
.mro-pie-nav a:hover { color: var(--mro-oro-claro); border-bottom-color: var(--mro-linea-oro); }

/* ---------- 08/10/2026: el cursor del juego en TODAS las paginas (antes solo en la portada, index.php "TOQUES RAGNAROK").
   Solo con raton de verdad; rutas absolutas para que valga desde /forum/ e /info/. El iframe del juego no se entera. ---------- */
@media (hover: hover) and (pointer: fine) {
    html, body { cursor: url('/forum/img/cursor-normal.png') 0 0, auto; }
    a, button, [role="button"], .btn, .btn-nav, .btn-submit, .panel-action-btn, .booster-cta-btn, .discord-fab, .tab, .tk-tab,
    label, select, summary, .woe-mini, .woe-banner, .feature-mini, .cur-opt, .srv-opt, .wiki-nav a, .nav-link, .forum-nav a, .class-card {
        cursor: url('/forum/img/cursor-enlace.png') 0 0, pointer;
    }
    input[type="text"], input[type="password"], input[type="email"], input[type="search"],
    input[type="number"], input[type="date"], input[type="url"], textarea {
        cursor: text;
    }
}

/* ---------- 09/10/2026: piezas que maeloro-fx.js mete en CUALQUIER pagina (destello que sigue al raton, golpe dorado al
   pulsar, linea de progreso de lectura). En la portada ya las viste home-fx-2026.css con los mismos valores; aqui estan
   para el registro, la base de datos, soporte y las paginas sueltas. ---------- */
.mro-sheen {
    position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .30), transparent 62%);
    mix-blend-mode: soft-light; opacity: 0; transition: opacity .25s ease;
}
.mro-tilt > .mro-sheen { opacity: 1; }
.mro-pos { position: relative; }
.mro-golpe {
    position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 244, 200, .95) 0%, rgba(255, 215, 0, .55) 45%, transparent 70%);
    animation: mroUiGolpe .65s ease-out forwards;
}
@keyframes mroUiGolpe { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(14); opacity: 0; } }
.mro-progreso {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 9998; pointer-events: none;
    transform-origin: 0 50%; transform: scaleX(0); opacity: 0; transition: opacity .3s ease;
    background: linear-gradient(90deg, rgba(60, 160, 255, .95), #ffd700 50%, rgba(255, 45, 60, .95));
    box-shadow: 0 0 8px rgba(255, 215, 0, .55);
}
body.mro-scrolled .mro-progreso { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mro-golpe, .mro-sheen, .mro-progreso { display: none; } }