/* ── tero Design System ────────────────────────────────────────────
   Fuente única de los tokens de marca (colores, tipografía, radios).
   Rebrand "Clubsito" → "tero" (navy/azul/celeste/verde/crema, ver
   diseño/assets/tero.css para los mockups de referencia ya validados).

   Los NOMBRES de variable se mantienen sin cambios a propósito: 26
   templates (portal del socio, revalidación pública, y ~20 pantallas
   de gestión que aún no pasaron por el rediseño Argon) consumen estas
   variables por nombre directo (var(--copper), var(--gold), etc.).
   Cambiar solo los VALORES recolorea todas esas pantallas de forma
   automática, sin tocar archivo por archivo.

   Mapeo semántico:
     --paper   → crema de marca (fondo cálido de contenido)
     --ink     → navy de marca (texto oscuro / secciones oscuras)
     --copper  → azul de marca (acento de CTA, antes cobre/violeta)
     --gold    → alerta/aviso (alias de --warning en algunos templates)
     --sage    → verde de marca (acento secundario)

   --ink-soft/--ink-muted/--card-border/--gold/--danger/--success son
   tonos derivados propuestos por Claude a falta de especificación del
   diseñador (solo se confirmaron los 5 colores de marca) — ya se le
   mostraron al usuario en diseño/assets/tero.css sin objeción, pero
   quedan abiertos a ajuste fino cuando el diseñador los confirme. */

:root {
    --paper:        #EEEEEE;
    --ink:          #244959;
    --ink-soft:     #47616C;
    --ink-muted:    #6B8794;
    --copper:       #1D69A0;
    --copper-dark:  #155D82;
    --copper-glow:  rgba(29, 105, 160, 0.08);
    --copper-light: rgba(29, 105, 160, 0.04);
    --gold:         #D99A3F;
    --sage:         #94C782;
    --sage-light:   rgba(148, 199, 130, 0.08);
    --danger:       #D1584F;
    --success:      #4C8C5A;
    --card-bg:      #ffffff;
    --card-border:  rgba(36, 73, 89, 0.08);

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Textura de ruido de fondo ────────────────────────────────────
   Repetida idéntica en 7 templates distintos; centralizada acá. */
.paper-noise {
    position: relative;
}
.paper-noise::before {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    pointer-events: none;
    z-index: 0;
}

/* ── Accesibilidad ────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--ink);
    color: var(--paper);
    padding: 10px 18px;
    border-radius: 0 0 var(--radius-sm) 0;
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}