/* ============================================================
   FSC THEME — estética FullScreen Code aplicada a FSCAuth
   Paleta, tipografía y componentes portados 1:1 de
   fullscreencode/public/styles.css (cyan #00D9FF sobre negro,
   gradientes, glow, tarjetas oscuras) + el fondo p5
   (grilla interactiva + estrellas) de public/background.js.

   Se carga DESPUÉS de Tailwind para pisar el tema viejo (teal #66fcf1).
   ============================================================ */

:root {
    /* --- paleta FullScreen Code (idéntica a styles.css) --- */
    --primary-cyan: #00D9FF;
    --dark-cyan: #00A8CC;
    --deep-black: #000000;
    --dark-gray: #1A1A1A;
    --medium-gray: #333333;
    --light-gray: #CCCCCC;
    --white: #FFFFFF;
    --gradient-primary: linear-gradient(135deg, var(--primary-cyan), var(--dark-cyan));
    --gradient-dark: linear-gradient(180deg, var(--deep-black), var(--dark-gray));
    --shadow-glow: 0 0 20px rgba(0, 217, 255, 0.3);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --font-fsc: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* --- alias de compatibilidad con los módulos existentes --- */
    --c1: #00D9FF;
    --c2: #00A8CC;
    --bg: #000000;
}

html { background: #000; }

body {
    font-family: var(--font-fsc);
    /* OJO: el color va en <html>, NO acá: si el body tiene fondo opaco, tapa el
       canvas p5 (que vive en z-index 0) y la grilla interactiva no se ve. */
    background-color: transparent;
    color: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* ---------- fondo p5 (grilla + estrellas) ---------- */
/* z-index 0 (encima del fondo negro del <html>, debajo del contenido) */
#p5-background {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 0 !important;
    pointer-events: none;
}

/* Todo el contenido real (menos el canvas) va por ENCIMA de la grilla */
body > *:not(canvas) {
    position: relative;
    z-index: 1;
}

/* viñeta + glow cian para que el contenido respire sobre la grilla */
.fsc-vignette {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 10%, rgba(0, 217, 255, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 80% 90%, rgba(0, 168, 204, 0.10) 0%, transparent 45%);
}
/* el glow viejo de FSCAuth (magenta) queda desactivado: FSC es cian */
.bg-glow { display: none !important; }

/* ---------- tarjetas / vidrio ---------- */
.glass,
.fsc-card {
    background: rgba(26, 26, 26, 0.72) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 217, 255, 0.18) !important;
    border-radius: 20px;
    box-shadow: var(--shadow-card);
}
.glass:hover,
.fsc-card:hover { border-color: rgba(0, 217, 255, 0.42) !important; }

/* ---------- tipografía ---------- */
h1, h2, h3, .fsc-title, .neon-text {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.neon-text, .fsc-title { text-shadow: 0 0 18px rgba(0, 217, 255, 0.45); }
.fsc-accent { color: var(--primary-cyan); }
.fsc-muted { color: var(--light-gray); opacity: .62; }
.highlight { color: var(--primary-cyan); text-shadow: var(--shadow-glow); }
.neon {
    background: linear-gradient(90deg, var(--primary-cyan), var(--dark-cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- logo FSC (isotipo) ---------- */
.fsc-logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.fsc-logo img {
    height: 40px; width: auto; display: block;
    filter: drop-shadow(0 0 14px rgba(0, 217, 255, .45));
}
.fsc-logo .wm {
    font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em;
    text-transform: none; color: #fff; text-shadow: none;
}
.fsc-logo .wm b { color: var(--primary-cyan); font-weight: 700; }

/* ---------- inputs ---------- */
.glass input:not([type=checkbox]):not([type=radio]),
.glass select,
.glass textarea,
.input-field,
.field,
.fsc-input {
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(0, 217, 255, 0.22) !important;
    border-radius: 12px !important;
    color: var(--white) !important;
    transition: var(--transition);
}
.glass input:focus,
.glass select:focus,
.glass textarea:focus,
.input-field:focus,
.field:focus,
.fsc-input:focus {
    border-color: var(--primary-cyan) !important;
    box-shadow: 0 0 18px rgba(0, 217, 255, 0.28) !important;
    outline: none !important;
}
.glass input::placeholder,
.input-field::placeholder,
.field::placeholder { color: #6b7683 !important; }

/* ---------- botones ---------- */
.btn, .fsc-btn, .btn-primary, .btn-secondary, .btn-portal, .btn-ghost {
    border-radius: 5px !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    border: 2px solid transparent;
}
.btn-primary, .fsc-btn-primary, .btn-portal {
    background: var(--gradient-primary) !important;
    color: var(--deep-black) !important;
    box-shadow: var(--shadow-glow) !important;
}
.btn-primary:hover, .fsc-btn-primary:hover, .btn-portal:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(0, 217, 255, 0.5) !important;
    opacity: 1 !important;
}
.btn-secondary, .fsc-btn-ghost, .btn-ghost {
    background: rgba(0, 217, 255, 0.06) !important;
    border-color: rgba(0, 217, 255, 0.45) !important;
    color: var(--primary-cyan) !important;
}
.btn-secondary:hover, .fsc-btn-ghost:hover, .btn-ghost:hover {
    background: rgba(0, 217, 255, 0.16) !important;
}

/* ---------- links / detalles ---------- */
a { color: var(--primary-cyan); }
a:hover { color: #7fe9ff; }
::selection { background: rgba(0, 217, 255, .35); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--deep-black); }
::-webkit-scrollbar-thumb { background: rgba(0, 217, 255, .3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 217, 255, .55); }

/* ============================================================
   Compatibilidad con el markup Tailwind existente:
   se remapean los acentos (cyan/magenta/fuchsia/amber) a la paleta FSC.
   ============================================================ */
.text-cyan-400, .text-cyan-500, .text-cyan-300, .text-cyan-600 { color: var(--primary-cyan) !important; }
.bg-cyan-500\/20 { background-color: rgba(0, 217, 255, .16) !important; }
.bg-cyan-500\/10 { background-color: rgba(0, 217, 255, .10) !important; }
.border-cyan-500\/30, .border-cyan-500\/50 { border-color: rgba(0, 217, 255, .34) !important; }
.border-cyan-500\/20 { border-color: rgba(0, 217, 255, .22) !important; }
.bg-cyan-600 { background-color: var(--dark-cyan) !important; }
.hover\:bg-cyan-500:hover { background-color: var(--primary-cyan) !important; }
.from-cyan-400 { --tw-gradient-from: #00D9FF !important; }
.to-magenta-500, .to-fuchsia-500 { --tw-gradient-to: #00A8CC !important; }
.text-magenta-500, .text-fuchsia-500 { color: var(--dark-cyan) !important; }
.shadow-cyan-500\/20 { box-shadow: 0 10px 15px -3px rgba(0, 217, 255, .2) !important; }

/* el isotipo reemplaza el cuadradito "FS" de los headers */
.fsc-badge-logo {
    width: 42px; height: 42px; flex: none;
    display: grid; place-items: center;
    background: rgba(0, 217, 255, .08);
    border: 1px solid rgba(0, 217, 255, .35);
    border-radius: 12px;
}
.fsc-badge-logo img { width: 26px; height: auto; display: block; }