:root {
    /* Mapeo de identidad corporativa REGO: Teal / Esmeralda y Azul Oscuro */
    
    /* Variables Primary (Teal / Esmeralda) */
    --color-primary-50:  #f0fdfa !important;
    --color-primary-100: #ccfbf1 !important;
    --color-primary-200: #99f6e4 !important;
    --color-primary-300: #5eead4 !important;
    --color-primary-400: #2dd4bf !important;
    --color-primary-500: #14b8a6 !important;
    --color-primary-600: #0d9488 !important; /* Principal REGO Teal */
    --color-primary-700: #0f766e !important;
    --color-primary-800: #115e59 !important;
    --color-primary-900: #134e4a !important;
    --color-primary-950: #042f2e !important;

    /* Neutros - Escala de Grises Tecnológica (Slate) */
    --color-base-50:  #f8fafc !important;
    --color-base-100: #f1f5f9 !important;
    --color-base-200: #e2e8f0 !important;
    --color-base-300: #cbd5e1 !important;
    --color-base-400: #94a3b8 !important;
    --color-base-500: #64748b !important;
    --color-base-600: #475569 !important;
    --color-base-700: #334155 !important;
    --color-base-800: #1e293b !important;
    --color-base-900: #0f172a !important;
    --color-base-950: #020617 !important;

    /* Variables de Texto - Modo Claro */
    --color-font-primary:   #0f172a !important; /* Slate 900 */
    --color-font-secondary: #475569 !important; /* Slate 600 */
    --color-font-tertiary:  #94a3b8 !important; /* Slate 400 */
}

/* Modo Oscuro */
.dark {
    /* Variables de Texto - Modo Oscuro */
    --color-font-primary:   #f8fafc !important; /* Slate 50 */
    --color-font-secondary: #cbd5e1 !important; /* Slate 300 */
    --color-font-tertiary:  #64748b !important; /* Slate 500 */
}

/* Glassmorphism Effect para la página de Login */
body.login {
    background-color: #0f172a;
}

/* Light Mode: Frosted Glass (blanco translúcido) */
.rego-login-card {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border-radius: 1rem !important;
}
body.login input {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--color-font-primary) !important;
}
body.login .text-gray-500, body.login label {
    color: var(--color-font-secondary) !important;
}

/* Dark Mode: Dark Glass */
.dark .rego-login-card {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}
.dark body.login input {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}
.dark body.login .text-gray-500, .dark body.login label {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Focus and Buttons for both modes */
body.login input:focus {
    border-color: var(--color-primary-500) !important;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2) !important;
    outline: none !important;
}
body.login button[type="submit"] {
    background: var(--color-primary-600) !important;
    color: white !important;
    border: none !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
}
body.login button[type="submit"]:hover {
    background: var(--color-primary-500) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(20, 184, 166, 0.4) !important;
}

/* --- Animación 360 grados del Logo REGO (Theme Switch) --- */
.rego-logo-anim-container {
    position: relative;
    width: 72px;
    height: 72px;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: rotate(0deg);
}

.dark .rego-logo-anim-container {
    transform: rotate(360deg);
}

.rego-logo-anim-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease;
    object-fit: contain;
}

/* Light Theme: Show Light, Hide Dark */
.rego-logo-anim-container .rego-logo-light {
    opacity: 1;
}
.rego-logo-anim-container .rego-logo-dark {
    opacity: 0;
}

/* Dark Theme: Hide Light, Show Dark */
.dark .rego-logo-anim-container .rego-logo-light {
    opacity: 0;
}
.dark .rego-logo-anim-container .rego-logo-dark {
    opacity: 1;
}