/* ===========================================================================
   WMS AMP · Login "Liquid Glass" (estilo Apple / visionOS)
   ---------------------------------------------------------------------------
   Mantiene los mismos nombres de clase que b10.css para no romper el JS de
   templates/users/base.html (processFormElements, enhanced-input-wrapper, etc.)
   =========================================================================== */

:root {
    /* --- Tinta / superficies --------------------------------------------- */
    --ink-900: #05070a;
    --ink-800: #0b0f15;
    --ink-700: #121822;

    /* --- Acento de marca (oro Raloy) ------------------------------------- */
    --gold-400: #ffd166;
    --gold-500: #f6b73c;
    --gold-600: #e09a10;
    --accent-color: var(--gold-500);
    --accent-soft: rgba(246, 183, 60, 0.16);
    --accent-ring: rgba(246, 183, 60, 0.30);

    /* --- Texto ------------------------------------------------------------ */
    --text-primary: #f6f8fb;
    --text-secondary: rgba(255, 255, 255, 0.74);
    --text-light: rgba(255, 255, 255, 0.52);

    /* --- Vidrio ----------------------------------------------------------- */
    --glass-tint: rgba(255, 255, 255, 0.07);
    --glass-tint-strong: rgba(255, 255, 255, 0.11);
    --glass-blur: blur(44px) saturate(185%) brightness(1.06);
    --glass-blur-sm: blur(22px) saturate(160%);
    --bg-glass: var(--glass-tint);
    --bg-glass-dark: rgba(255, 255, 255, 0.05);

    /* Brillo especular: el borde que "refracta" la luz */
    --rim: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.62) 0%,
        rgba(255, 255, 255, 0.10) 26%,
        rgba(255, 255, 255, 0.02) 55%,
        rgba(255, 255, 255, 0.16) 82%,
        rgba(255, 255, 255, 0.44) 100%
    );

    /* --- Sombras ---------------------------------------------------------- */
    --shadow-neomorphic:
        0 34px 90px -20px rgba(0, 0, 0, 0.72),
        0 10px 28px -12px rgba(0, 0, 0, 0.55);
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.32);
    --shadow-lift:
        0 44px 110px -22px rgba(0, 0, 0, 0.78),
        0 14px 36px -14px rgba(0, 0, 0, 0.6);

    /* --- Forma / movimiento ----------------------------------------------- */
    --border-radius: 18px;
    --radius-card: 30px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto,
                 Helvetica, Arial, sans-serif;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    background: var(--ink-800);
    color: var(--text-primary);
    font-weight: 400; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ===========================================================================
   FONDO
   La imagen se mantiene nítida en los bordes y se oscurece hacia el centro
   con una viñeta radial, para que el vidrio tenga contraste sin "lavarse".
   =========================================================================== */
.background-layer {
    position: fixed; inset: 0; z-index: 1;
    background-image: var(--bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.04);
    animation: bg-drift 46s ease-in-out infinite alternate;
}

/* Viñeta + scrim: legibilidad detrás de la tarjeta */
.background-layer::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(78% 62% at 50% 50%, rgba(5, 7, 10, 0.74) 0%, rgba(5, 7, 10, 0.30) 46%, transparent 78%),
        linear-gradient(180deg, rgba(5, 7, 10, 0.42) 0%, transparent 28%, transparent 66%, rgba(5, 7, 10, 0.58) 100%);
}

@keyframes bg-drift {
    0%   { transform: scale(1.04) translate3d(0, 0, 0); }
    100% { transform: scale(1.10) translate3d(-1.4%, -1%, 0); }
}

/* Luz ambiental de color: da el "glow" cálido que refracta el vidrio */
.bg-image-overlay {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
        radial-gradient(46rem 30rem at 16% 18%, rgba(246, 183, 60, 0.16), transparent 62%),
        radial-gradient(40rem 28rem at 84% 78%, rgba(120, 170, 255, 0.10), transparent 60%);
    mix-blend-mode: screen;
    animation: ambient-breathe 14s ease-in-out infinite alternate;
}

@keyframes ambient-breathe {
    0%   { opacity: 0.72; }
    100% { opacity: 1; }
}

/* Compatibilidad con contenedores antiguos (b2/b3…) */
.bg-image-container { position: absolute; inset: 0; }
.bg-image {
    position: absolute; inset: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.bg-overlay { position: absolute; inset: 0; }

/* --- Partículas: burbujas de aceite, sutiles y lentas --------------------- */
.bg-particles { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.particle {
    position: absolute; bottom: -60px;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), rgba(255, 209, 102, 0.20) 42%, transparent 70%);
    border-radius: 50%;
    box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.22), 0 0 22px rgba(246, 183, 60, 0.14);
    opacity: 0;
    animation: float 26s infinite linear;
}
.particle:nth-child(1) { width: 14px; height: 14px; left: 10%; animation-delay: 0s;  animation-duration: 30s; }
.particle:nth-child(2) { width:  9px; height:  9px; left: 21%; animation-delay: 3s;  animation-duration: 24s; }
.particle:nth-child(3) { width: 18px; height: 18px; left: 31%; animation-delay: 6s;  animation-duration: 36s; }
.particle:nth-child(4) { width: 11px; height: 11px; left: 42%; animation-delay: 9s;  animation-duration: 27s; }
.particle:nth-child(5) { width:  7px; height:  7px; left: 52%; animation-delay: 12s; animation-duration: 22s; }
.particle:nth-child(6) { width: 15px; height: 15px; left: 62%; animation-delay: 15s; animation-duration: 32s; }
.particle:nth-child(7) { width: 10px; height: 10px; left: 71%; animation-delay: 18s; animation-duration: 29s; }
.particle:nth-child(8) { width: 20px; height: 20px; left: 81%; animation-delay: 21s; animation-duration: 34s; }
.particle:nth-child(9) { width:  8px; height:  8px; left: 90%; animation-delay: 24s; animation-duration: 38s; }
.particle:nth-child(10){ width: 13px; height: 13px; left:  5%; animation-delay: 27s; animation-duration: 31s; }

@keyframes float {
    0%   { transform: translateY(0) translateX(0) scale(0.85); opacity: 0; }
    12%  { opacity: 0.85; }
    50%  { transform: translateY(-52vh) translateX(18px) scale(1); }
    88%  { opacity: 0.6; }
    100% { transform: translateY(-108vh) translateX(-14px) scale(1.08); opacity: 0; }
}

/* --- Figuras flotantes: lentes de vidrio fuera de foco -------------------- */
.floating-elements { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.floating-shape {
    position: absolute;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
    -webkit-backdrop-filter: blur(30px) saturate(140%);
    backdrop-filter: blur(30px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 20px 60px -20px rgba(0, 0, 0, 0.5);
    opacity: 0.55;
}
.shape-1 { width: 230px; height: 230px; border-radius: 50%;  top:  8%; left: -6%;  animation: float-shape 44s infinite ease-in-out; }
.shape-2 { width: 170px; height: 170px; border-radius: 42%;  top: 62%; right: -5%; animation: float-shape 38s infinite ease-in-out reverse; }
.shape-3 { width: 110px; height: 320px; border-radius: 60px; top: 26%; left:  4%;  animation: float-shape 50s infinite ease-in-out; animation-delay: -12s; }
.shape-4 { width:  92px; height:  92px; border-radius: 28px; top: 16%; right: 18%; animation: float-shape 34s infinite ease-in-out; animation-delay: -22s; }

@keyframes float-shape {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    33%      { transform: translate3d(14px, -34px, 0) rotate(8deg); }
    66%      { transform: translate3d(-10px, 22px, 0) rotate(-6deg); }
}

/* ===========================================================================
   TARJETA LIQUID GLASS
   3 capas: relleno difuso (.glass-background) + rim especular
   (.neomorphic-border) + contenido (.container-content)
   =========================================================================== */
.login-container {
    position: relative; width: 100%; max-width: 430px; z-index: 10;
    margin: 2rem;
    border-radius: var(--radius-card);
    animation: slide-up 0.9s var(--ease) both;
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.login-container:hover { transform: translateY(-3px); }

.glass-background {
    position: absolute; inset: 0;
    border-radius: var(--radius-card);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.08) 100%);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow:
        var(--shadow-neomorphic),
        inset 0 1px 0 rgba(255, 255, 255, 0.40),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

/* Reflejo especular superior: la "gota de luz" del cristal Apple */
.glass-background::before {
    content: '';
    position: absolute; top: -55%; left: -20%; width: 140%; height: 110%;
    background: radial-gradient(56% 44% at 50% 50%, rgba(255, 255, 255, 0.28), transparent 68%);
    pointer-events: none;
}

/* Barrido de luz lento sobre la superficie */
.glass-background::after {
    content: '';
    position: absolute; inset: -40%;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.10) 48%, transparent 58%);
    transform: translateX(-60%);
    animation: sheen 9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sheen {
    0%, 65%, 100% { transform: translateX(-60%); }
    32%           { transform: translateX(60%); }
}

/* Rim refractivo de 1px: solo el borde, con degradado de luz */
.neomorphic-border {
    position: absolute; inset: 0;
    border-radius: var(--radius-card);
    padding: 1px;
    background: var(--rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
}

.container-content { position: relative; padding: 2.75rem 2.25rem 2.25rem; z-index: 2; }

@keyframes slide-up {
    from { opacity: 0; transform: translateY(34px) scale(0.97); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
}

/* ===========================================================================
   LOGO / TÍTULO
   =========================================================================== */
.logo-section { text-align: center; margin-bottom: 2rem; }
.logo { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 0.35rem; }

.logo-icon {
    width: 54px; height: 54px;
    /* Squircle estilo iOS */
    border-radius: 30%;
    background: linear-gradient(150deg, rgba(255, 209, 102, 0.28), rgba(224, 154, 16, 0.12));
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 10px 28px -8px rgba(224, 154, 16, 0.45);
    position: relative; overflow: hidden;
    transition: var(--transition);
}
.logo-icon::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 52%);
    display: block;
}
.logo-icon i {
    font-size: 23px;
    color: var(--gold-400) !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    position: relative; z-index: 1;
}
.login-container:hover .logo-icon { transform: translateY(-2px) rotate(-3deg); }

.logo-text {
    font-size: 27px; font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.022em;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
    background: none;
    -webkit-text-fill-color: currentColor;
}
.logo-subtitle {
    color: var(--text-light);
    font-size: 13px; font-weight: 500; margin-top: 0.35rem;
    letter-spacing: 0.02em;
}

/* Separador de luz bajo el encabezado */
.logo-section::after {
    content: '';
    display: block; height: 1px; margin: 1.6rem auto 0; width: 78%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

/* ===========================================================================
   FORMULARIO
   =========================================================================== */
.form-container { position: relative; }
.form-group, .p-2 { margin-bottom: 1.25rem; position: relative; }
.enhanced-input-wrapper {
    position: relative; margin-bottom: 0;
    border-radius: var(--border-radius);
    transition: transform 0.4s var(--ease);
}

/* Etiqueta flotante: texto limpio, sin "caja" con borde */
.floating-label {
    position: absolute; top: 11px; left: 54px;
    color: var(--text-light);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0; background: none; border: none;
    pointer-events: none; z-index: 3;
    transition: color 0.35s var(--ease), opacity 0.35s var(--ease);
}

/* Campo: vidrio "hundido" (inset) para leerse como una cavidad líquida */
.enhanced-input, .form-control {
    width: 100%;
    padding: 28px 52px 12px 54px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--border-radius);
    font-size: 16px; font-weight: 500; font-family: inherit;
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    color: var(--text-primary);
    outline: none; position: relative; z-index: 2;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.30),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10);
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
                box-shadow 0.35s var(--ease), color 0.35s var(--ease);
}

/* El placeholder solo aparece al enfocar: la etiqueta ya dice qué es el campo */
.enhanced-input::placeholder, .form-control::placeholder {
    color: transparent; transition: color 0.3s var(--ease);
}
.enhanced-input:focus::placeholder, .form-control:focus::placeholder {
    color: rgba(255, 255, 255, 0.34);
}

.enhanced-input:focus, .form-control:focus {
    border-color: rgba(246, 183, 60, 0.55);
    background: rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.22),
        0 0 0 4px var(--accent-soft),
        0 12px 34px -12px rgba(246, 183, 60, 0.42);
}
.enhanced-input-wrapper.focused { transform: translateY(-1px); }

/* El JS deja la <label> como hermana del wrapper, no dentro de él:
   por eso el estado de foco se resuelve con :focus-within en el grupo. */
.form-group:focus-within .floating-label,
.p-2:focus-within .floating-label { color: var(--gold-400); }

/* Autofill de Chrome: evita el bloque azul/blanco que rompe el vidrio */
.enhanced-input:-webkit-autofill,
.enhanced-input:-webkit-autofill:hover,
.enhanced-input:-webkit-autofill:focus,
.form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 1000px rgba(30, 36, 46, 0.92) inset;
    caret-color: var(--text-primary);
    transition: background-color 9999s ease-in-out 0s;
}

/* Estados de validación: sutiles, solo en el borde */
.enhanced-input-wrapper.valid   .enhanced-input { border-color: rgba(52, 199, 89, 0.45); }
.enhanced-input-wrapper.invalid .enhanced-input { border-color: rgba(255, 105, 97, 0.55); }
.enhanced-input-wrapper.valid   .floating-label { color: rgba(120, 220, 150, 0.9); }
.enhanced-input-wrapper.invalid .floating-label { color: rgba(255, 145, 135, 0.95); }

/* --- Iconos --------------------------------------------------------------- */
.input-icon {
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.55); transition: var(--transition); z-index: 3;
    width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.input-icon i { font-size: 17px; line-height: 1; }
.input-icon svg { display: none; }

.enhanced-input-wrapper.focused .input-icon,
.enhanced-input:focus ~ .input-icon,
.form-control:focus ~ .input-icon {
    color: var(--gold-400);
    transform: translateY(-50%) scale(1.06);
}

/* --- Mostrar / ocultar contraseña ---------------------------------------- */
.password-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5); cursor: pointer; z-index: 4;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.password-toggle i { font-size: 16px; line-height: 1; }
.password-toggle svg { display: none; }
.password-toggle:hover {
    color: var(--gold-400);
    background: rgba(255, 255, 255, 0.10);
}
.password-toggle:active { transform: translateY(-50%) scale(0.92); }

/* --- Medidor de fuerza / subrayado --------------------------------------- */
.input-underline {
    position: absolute; bottom: 0; left: 8%; height: 2px; width: 0;
    background: var(--gold-500);
    border-radius: 2px; z-index: 5;
    box-shadow: 0 0 10px rgba(246, 183, 60, 0.5);
    transition: width 0.45s var(--ease), background 0.35s var(--ease);
}
.enhanced-input-wrapper.focused .input-underline,
.enhanced-input:focus ~ .input-underline,
.form-control:focus ~ .input-underline { width: 84%; }

/* ===========================================================================
   BOTONES
   =========================================================================== */
.btn {
    width: 100%; padding: 16px 24px; margin-top: 0.5rem;
    background: linear-gradient(150deg, var(--gold-400) 0%, var(--gold-500) 48%, var(--gold-600) 100%);
    color: #1a1204;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: var(--border-radius);
    font-size: 16px; font-weight: 650; font-family: inherit;
    letter-spacing: -0.01em;
    cursor: pointer; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 -8px 18px -10px rgba(120, 70, 0, 0.5),
        0 14px 34px -12px rgba(224, 154, 16, 0.62);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), filter 0.35s var(--ease);
}
.btn::before {
    content: ''; position: absolute; top: 0; left: -110%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg);
    transition: left 0.7s var(--ease);
}
.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 20px 44px -14px rgba(224, 154, 16, 0.75);
}
.btn:hover::before { left: 140%; }
.btn:active { transform: translateY(0) scale(0.985); }
.btn:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.7); outline-offset: 3px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; filter: grayscale(0.3); }

/* Variante vidrio para acciones secundarias (usar .btn.btn-glass) */
.btn-glass {
    background: var(--glass-tint-strong);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        0 12px 30px -14px rgba(0, 0, 0, 0.7);
}
.btn-glass:hover {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
}
.btn-block { width: 100%; }

/* ===========================================================================
   ALERTAS
   =========================================================================== */
.alert {
    padding: 13px 16px; border-radius: 14px;
    margin-bottom: 1.25rem; font-weight: 500; font-size: 14px;
    display: flex; align-items: center; gap: 10px;
    -webkit-backdrop-filter: var(--glass-blur-sm);
    backdrop-filter: var(--glass-blur-sm);
    border: 1px solid rgba(255, 255, 255, 0.14);
    animation: slide-down 0.45s var(--ease);
}
.alert-danger {
    background: rgba(255, 69, 58, 0.16);
    color: #ffd9d5;
    border-color: rgba(255, 105, 97, 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.alert-danger::before {
    content: '\f06a'; /* exclamation-circle */
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: #ff8f87; flex: 0 0 auto;
}
.invalid-feedback { color: #ffb3ad; font-size: 12px; margin-top: 0.5rem; font-weight: 500; }

@keyframes slide-down {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===========================================================================
   PIE / ENLACES
   =========================================================================== */
.register {
    text-align: center; margin-top: 1.5rem;
    color: var(--text-light); font-size: 14px;
}
.register a, .text-info, .container-content a {
    color: var(--gold-400);
    text-decoration: none; font-weight: 600;
    padding-bottom: 1px;
    border-bottom: 1px solid rgba(255, 209, 102, 0.28);
    transition: var(--transition);
}
.register a:hover, .text-info:hover, .container-content a:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 0 14px rgba(246, 183, 60, 0.55);
}
.register a:focus-visible, .container-content a:focus-visible {
    outline: 2px solid var(--gold-400); outline-offset: 3px; border-radius: 4px;
}

/* ===========================================================================
   UTILIDADES / TÍTULOS
   =========================================================================== */
.text-center { text-align: center; }
.text-white  { color: var(--text-primary) !important; }
.mb-4 { margin-bottom: 2rem !important; }
.pt-4 { padding-top: 2rem !important; }
.w-100 { width: 100% !important; }

h2 {
    font-size: 1.6rem; font-weight: 700; margin-bottom: 1.5rem;
    color: var(--text-primary); letter-spacing: -0.02em;
    text-align: center;
    background: none; -webkit-text-fill-color: currentColor;
}

/* ===========================================================================
   MODO OSCURO (toggle del panel de ajustes): vidrio más profundo
   =========================================================================== */
.dark-mode {
    --glass-tint: rgba(10, 14, 20, 0.42);
    --glass-tint-strong: rgba(10, 14, 20, 0.55);
    --text-secondary: rgba(255, 255, 255, 0.68);
    --text-light: rgba(255, 255, 255, 0.46);
}
.dark-mode .glass-background {
    background: linear-gradient(160deg, rgba(18, 24, 34, 0.62) 0%, rgba(8, 11, 16, 0.52) 100%);
    box-shadow:
        var(--shadow-lift),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.dark-mode .background-layer::after {
    background:
        radial-gradient(78% 62% at 50% 50%, rgba(3, 5, 8, 0.86) 0%, rgba(3, 5, 8, 0.5) 46%, rgba(3, 5, 8, 0.25) 78%),
        linear-gradient(180deg, rgba(3, 5, 8, 0.6) 0%, rgba(3, 5, 8, 0.25) 40%, rgba(3, 5, 8, 0.7) 100%);
}
.dark-mode .enhanced-input, .dark-mode .form-control {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

/* ===========================================================================
   ACCESIBILIDAD / PREFERENCIAS
   =========================================================================== */
.reduced-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}
.reduced-motion .background-layer,
.reduced-motion .glass-background::after,
.reduced-motion .particle,
.reduced-motion .floating-shape { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    .background-layer, .glass-background::after,
    .particle, .floating-shape, .bg-image-overlay { animation: none !important; }
    .login-container { animation: none !important; }
}

/* Sin soporte de backdrop-filter: se sustituye por un sólido legible */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass-background { background: rgba(14, 19, 27, 0.92); }
    .enhanced-input, .form-control { background: rgba(255, 255, 255, 0.12); }
}

@media (prefers-contrast: more) {
    :root { --text-light: rgba(255, 255, 255, 0.78); }
    .glass-background { background: rgba(10, 14, 20, 0.85); }
    .enhanced-input, .form-control { border-width: 2px; border-color: rgba(255, 255, 255, 0.4); }
    .floating-label { color: rgba(255, 255, 255, 0.85); }
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 640px) {
    .login-container { margin: 1rem; max-width: none; }
    .container-content { padding: 2.25rem 1.5rem 2rem; }
    .logo-text { font-size: 24px; }
    .floating-shape, .bg-particles { display: none; }
    .background-layer { animation: none; transform: none; }
}
@media (max-width: 400px) {
    .container-content { padding: 1.75rem 1.15rem 1.5rem; }
    .enhanced-input, .form-control { padding: 26px 46px 11px 48px; font-size: 15px; }
    .floating-label { left: 48px; }
    .input-icon { left: 17px; }
    .logo-icon { width: 48px; height: 48px; }
    .logo-text { font-size: 22px; }
}

/* Pantallas altas: un poco más de aire */
@media (min-height: 900px) {
    .container-content { padding: 3.25rem 2.5rem 2.5rem; }
}

/* ===========================================================================
   IMPRESIÓN
   =========================================================================== */
@media print {
    .bg-particles, .floating-elements,
    .background-layer, .bg-image-overlay { display: none !important; }
    body { background: #fff; color: #000; }
    .glass-background { background: #fff; backdrop-filter: none; box-shadow: none; border: 1px solid #ccc; }
    .logo-text, .floating-label, .register { color: #000; }
}