/* ==================================================================
   Homelab — tema de Authelia (auth.braut.es), común a todas las apps del SSO
   Estilo del Homelab Portal ("Atlantis"): tipografía Rajdhani, mayúsculas
   espaciadas, panel con esquinas. Claro u oscuro según el sistema (theme: auto).
   Lo inyecta el nginx "authelia-theme" delante de Authelia (ver ../README).
   Authelia 4.39 (Tailwind + variables CSS): si una actualización cambia la
   estructura, el inicio de sesión sigue funcionando; solo habría que retocar esto.
   ================================================================== */

@font-face { font-family: 'Rajdhani'; font-weight: 500; font-display: swap; src: url('fonts/rajdhani-500.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 600; font-display: swap; src: url('fonts/rajdhani-600.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 700; font-display: swap; src: url('fonts/rajdhani-700.woff2') format('woff2'); }

/* Colores del logo: azul marino y naranja */
:root,
[data-theme=light] {
    --hl-navy: #1b3350;
    --hl-orange: #f07d22;
    --hl-glow: #1b3350;
    --hl-bg: #ffffff;
    --hl-bg-2: #eef3f8;
    --hl-panel: rgba(255, 255, 255, 0.86);
    --hl-line: rgba(27, 51, 80, 0.16);

    --background: #ffffff;
    --foreground: #16304d;
    --card: #ffffff;
    --card-foreground: #16304d;
    --popover: #ffffff;
    --popover-foreground: #16304d;
    --primary: #1b3350;
    --primary-foreground: #ffffff;
    --muted: #eef3f8;
    --muted-foreground: #5a7088;
    --accent: #eef3f8;
    --accent-foreground: #16304d;
    --border: rgba(27, 51, 80, 0.16);
    --input: rgba(27, 51, 80, 0.26);
    --ring: #f07d22;
    --radius: 0;
    --custom-icon: #1b3350;
    --custom-loading-bar: #f07d22;
    --divider: rgba(27, 51, 80, 0.14);
}

[data-theme=dark] {
    --hl-glow: #5fd4ff;
    --hl-bg: #020a10;
    --hl-bg-2: #071a29;
    --hl-panel: rgba(4, 18, 28, 0.78);
    --hl-line: rgba(95, 212, 255, 0.18);

    --background: #020a10;
    --foreground: #cfeaf5;
    --card: #061824;
    --card-foreground: #cfeaf5;
    --popover: #061824;
    --popover-foreground: #cfeaf5;
    --primary: #5fd4ff;
    --primary-foreground: #020a10;
    --muted: #0a2230;
    --muted-foreground: #7aa3b5;
    --accent: #0a2230;
    --accent-foreground: #eaf8ff;
    --border: rgba(95, 212, 255, 0.18);
    --input: rgba(95, 212, 255, 0.28);
    --ring: #f07d22;
    --radius: 0;
    --custom-icon: #5fd4ff;
    --custom-loading-bar: #5fd4ff;
    --divider: rgba(95, 212, 255, 0.14);
}

/* Fondo: degradado suave con un halo detrás del panel */
html { background: var(--hl-bg-2); }
body {
    background:
        radial-gradient(ellipse 70% 55% at 50% 45%, color-mix(in srgb, var(--hl-glow) 9%, transparent), transparent 70%),
        linear-gradient(180deg, var(--hl-bg), var(--hl-bg-2)) fixed !important;
    min-height: 100vh;
}

body, button, input, label, h1, h2, h3, h4, h5, h6, p, a, span {
    font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif !important;
}

body { font-weight: 500; letter-spacing: 0.02em; }

/* Panel central con esquinas, como el portal */
[id$="-stage"] > div {
    position: relative;
    margin: 1.5rem auto;
    padding: 2rem 2.2rem 1.6rem !important;
    background: var(--hl-panel);
    border: 1px solid var(--hl-line);
    backdrop-filter: blur(6px);
    box-shadow: 0 20px 60px -30px color-mix(in srgb, var(--hl-glow) 45%, transparent);
}

[id$="-stage"] > div::before,
[id$="-stage"] > div::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--hl-orange, #f07d22);
    pointer-events: none;
}

[id$="-stage"] > div::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
[id$="-stage"] > div::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Emblema animado del portal en lugar del logo: anillo segmentado que gira,
   aro interior y núcleo naranja que "respira". La imagen queda como núcleo. */
@keyframes hl-spin { to { transform: rotate(360deg); } }
@keyframes hl-breathe { 50% { opacity: 0.6; transform: scale(0.82); } }

div:has(> img[alt="Logo"]) {
    position: relative;
    width: 92px;
    height: 92px;
    margin: 0.4rem auto 1rem;
    padding: 0 !important;
    display: grid;
    place-items: center;
}

div:has(> img[alt="Logo"])::before,
div:has(> img[alt="Logo"])::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

div:has(> img[alt="Logo"])::before {
    inset: 0;
    background: repeating-conic-gradient(var(--hl-glow) 0 22deg, transparent 22deg 30deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    opacity: 0.85;
    animation: hl-spin 40s linear infinite;
}

div:has(> img[alt="Logo"])::after {
    inset: 13px;
    border: 2px solid color-mix(in srgb, var(--hl-glow) 45%, transparent);
}

img[alt="Logo"] {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border-radius: 50%;
    object-position: -9999px 0; /* oculta la imagen: solo queda el núcleo */
    background: var(--hl-orange, #f07d22);
    box-shadow: 0 0 16px var(--hl-orange, #f07d22), 0 0 3px #fff inset;
    animation: hl-breathe 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    div:has(> img[alt="Logo"])::before, img[alt="Logo"] { animation: none; }
}

/* Títulos: mayúsculas espaciadas */
[id$="-stage"] h5,
[id$="-stage"] h6 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--hl-glow);
}

/* Campos */
[data-slot="floating-input"],
[id$="-stage"] input:not([type=checkbox]) {
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--hl-glow) 3%, transparent) !important;
    font-size: 1.05rem !important;
    font-weight: 600;
    letter-spacing: 0.04em;
}

[data-slot="floating-input"] + label,
[id$="-stage"] label {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.78rem !important;
    font-weight: 600;
}

/* La casilla "Recordarme" en minúsculas normales */
label[for="remember-checkbox"] { text-transform: none; letter-spacing: 0.04em; font-size: 0.95rem !important; }

/* Botones: los del portal (borde de luz, mayúsculas espaciadas) */
[data-slot="button"] {
    border-radius: 0 !important;
    letter-spacing: 0.22em;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

[data-slot="button"][data-variant="default"] {
    background: color-mix(in srgb, var(--primary) 14%, transparent) !important;
    border: 1px solid var(--primary) !important;
    color: var(--foreground) !important;
    height: 2.75rem !important;
}

[data-slot="button"][data-variant="default"]:hover {
    background: color-mix(in srgb, var(--primary) 24%, transparent) !important;
    box-shadow: 0 0 18px -6px var(--primary);
}

[data-slot="button"][data-variant="outline"],
[data-slot="button"][data-variant="secondary"] {
    border: 1px solid var(--hl-line) !important;
    background: transparent !important;
}

[data-slot="button"][data-variant="outline"]:hover,
[data-slot="button"][data-variant="secondary"]:hover {
    border-color: var(--primary) !important;
}

/* Enlaces (olvidé mi contraseña, métodos…) en naranja */
[id$="-stage"] a,
[id$="-stage"] [data-variant="link"] {
    color: var(--hl-orange, #f07d22) !important;
    letter-spacing: 0.06em;
}

/* Casilla */
[data-slot="checkbox"] { border-radius: 0 !important; }

/* Pie: "Desarrollado por Braut" en lugar de "Powered by Authelia" (y sin enlace) */
a[href="https://www.authelia.com"] {
    font-size: 0 !important;
    pointer-events: none;
    text-decoration: none !important;
}

a[href="https://www.authelia.com"]::after {
    content: 'Desarrollado por Braut';
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}