/* =============================================================================
   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: #0b0a16;
    --mro-fondo-2: #120d22;
    --mro-panel: #140e24;
    --mro-panel-2: #1a1330;
    --mro-panel-grad: linear-gradient(170deg, rgba(24, 16, 42, .94) 0%, rgba(14, 9, 26, .95) 100%);
    --mro-texto: #ece6fb;
    --mro-texto-2: #c9bfe6;
    --mro-suave: #9b8fc2;
    --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: #b69cff;
    --mro-lila-2: #8b6fe0;
    --mro-rosa: #ffb7e1;
    --mro-menta: #7ff0c8;
    --mro-rojo: #ff7b86;
    --mro-azul: #7cb8ff;
    --mro-linea: rgba(160, 120, 230, .22);
    --mro-linea-2: rgba(160, 120, 230, .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: #fff; }

html { scrollbar-color: rgba(160, 120, 230, .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-ui.js, 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); }