/* ========================================
   VARIABLES Y COLORES PRINCIPALES
======================================== */
:root {
    --primary-color: #ff6b35;
    --primary-dark: #e55a2b;
    --secondary-color: #2c3e50;
    --accent-color: #f39c12;
    --success-color: #27ae60;
    --danger-color: #e74c3c;
    --warning-color: #f1c40f;
    --dark-bg: #1a1a1a;
    --light-bg: #ffffff;
    --text-dark: #2c3e50;
    --text-light: #7f8c8d;
    --border-color: #e1e8ed;
    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-heavy: 0 15px 50px rgba(0, 0, 0, 0.15);
    --border-radius: 16px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   RESET Y BASE
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.bg-login {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(243, 156, 18, 0.4) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(46, 204, 113, 0.2) 0%, transparent 50%), linear-gradient(135deg, #1e3c72 0%, #2a5298 25%, #ff6b35 50%, #f39c12 75%, #e74c3c 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    overflow: hidden;
    height: 100vh;
    position: relative;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ========================================
   CONTENEDOR PRINCIPAL
======================================== */
.login-container {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    /* Capas de fondo adicionales para profundidad */
    .login-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: conic-gradient(from 0deg at 50% 50%, rgba(255, 107, 53, 0.1) 0deg, rgba(243, 156, 18, 0.1) 72deg, rgba(46, 204, 113, 0.1) 144deg, rgba(52, 152, 219, 0.1) 216deg, rgba(155, 89, 182, 0.1) 288deg, rgba(255, 107, 53, 0.1) 360deg );
        animation: rotateConic 20s linear infinite;
        z-index: 1;
    }

    .login-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(255, 107, 53, 0.15) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(46, 204, 113, 0.12) 0%, transparent 50%), radial-gradient(ellipse 100% 60% at 50% 50%, rgba(52, 152, 219, 0.08) 0%, transparent 50%);
        animation: pulseRadial 8s ease-in-out infinite;
        z-index: 2;
    }

@keyframes rotateConic {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulseRadial {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.login-main-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    min-height: 600px;
    max-height: 85vh;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(1.5);
    border-radius: var(--border-radius);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    overflow: hidden;
    position: relative;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ========================================
   FONDO ANIMADO CON HERRAMIENTAS
======================================== */
.tools-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.tool-icon {
    position: absolute;
    font-size: 28px;
    opacity: 0.15;
    animation: floatTool 8s ease-in-out infinite;
    color: var(--primary-color);
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
    filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3));
}

.tool-hammer {
    top: 10%;
    left: 15%;
    animation-delay: 0s;
    transform: rotate(-15deg);
}

.tool-wrench {
    top: 25%;
    right: 20%;
    animation-delay: 1s;
    transform: rotate(45deg);
}

.tool-drill {
    bottom: 30%;
    left: 10%;
    animation-delay: 2s;
    transform: rotate(-30deg);
}

.tool-ruler {
    top: 60%;
    right: 15%;
    animation-delay: 3s;
    transform: rotate(60deg);
}

.tool-paint {
    bottom: 15%;
    right: 25%;
    animation-delay: 4s;
    transform: rotate(-45deg);
}

.tool-brush {
    top: 40%;
    left: 5%;
    animation-delay: 5s;
    transform: rotate(30deg);
}

.tool-level {
    bottom: 50%;
    right: 5%;
    animation-delay: 6s;
    transform: rotate(-60deg);
}

.tool-saw {
    top: 80%;
    left: 25%;
    animation-delay: 7s;
    transform: rotate(15deg);
}

/* Herramientas adicionales para más densidad */
.tools-background::before {
    content: '🏗️';
    position: absolute;
    top: 5%;
    left: 60%;
    font-size: 32px;
    opacity: 0.1;
    animation: floatTool 10s ease-in-out infinite;
    animation-delay: 1.5s;
}

.tools-background::after {
    content: '🔩';
    position: absolute;
    bottom: 10%;
    left: 70%;
    font-size: 24px;
    opacity: 0.12;
    animation: floatTool 9s ease-in-out infinite;
    animation-delay: 3.5s;
}

@keyframes floatTool {
    0%, 100% {
        transform: translateY(0px) rotate(var(--initial-rotation, 0deg)) scale(1);
        opacity: 0.15;
    }

    25% {
        transform: translateY(-30px) rotate(calc(var(--initial-rotation, 0deg) + 10deg)) scale(1.1);
        opacity: 0.25;
    }

    50% {
        transform: translateY(-15px) rotate(calc(var(--initial-rotation, 0deg) - 5deg)) scale(0.95);
        opacity: 0.2;
    }

    75% {
        transform: translateY(-40px) rotate(calc(var(--initial-rotation, 0deg) + 15deg)) scale(1.05);
        opacity: 0.18;
    }
}

/* ========================================
   PARTÍCULAS FLOTANTES MEJORADAS
======================================== */
.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}

.particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.8;
    animation: floatParticle 12s linear infinite;
}

    /* Diferentes tipos de partículas */
    .particle:nth-child(1) {
        left: 10%;
        animation-delay: 0s;
        width: 6px;
        height: 6px;
        background: radial-gradient(circle, var(--accent-color), transparent);
        box-shadow: 0 0 15px var(--accent-color);
    }

    .particle:nth-child(2) {
        left: 20%;
        animation-delay: 1s;
        width: 4px;
        height: 4px;
        background: radial-gradient(circle, var(--primary-color), transparent);
        box-shadow: 0 0 10px var(--primary-color);
    }

    .particle:nth-child(3) {
        left: 30%;
        animation-delay: 2s;
        width: 8px;
        height: 8px;
        background: radial-gradient(circle, var(--success-color), transparent);
        box-shadow: 0 0 20px var(--success-color);
    }

    .particle:nth-child(4) {
        left: 40%;
        animation-delay: 3s;
        width: 5px;
        height: 5px;
        background: radial-gradient(circle, var(--warning-color), transparent);
        box-shadow: 0 0 12px var(--warning-color);
    }

    .particle:nth-child(5) {
        left: 50%;
        animation-delay: 4s;
        width: 7px;
        height: 7px;
        background: radial-gradient(circle, #9b59b6, transparent);
        box-shadow: 0 0 18px #9b59b6;
    }

    .particle:nth-child(6) {
        left: 60%;
        animation-delay: 5s;
        width: 3px;
        height: 3px;
        background: radial-gradient(circle, #1abc9c, transparent);
        box-shadow: 0 0 8px #1abc9c;
    }

    .particle:nth-child(7) {
        left: 70%;
        animation-delay: 6s;
        width: 9px;
        height: 9px;
        background: radial-gradient(circle, #e67e22, transparent);
        box-shadow: 0 0 25px #e67e22;
    }

    .particle:nth-child(8) {
        left: 80%;
        animation-delay: 7s;
        width: 6px;
        height: 6px;
        background: radial-gradient(circle, #34495e, transparent);
        box-shadow: 0 0 15px #34495e;
    }

    .particle:nth-child(9) {
        left: 90%;
        animation-delay: 8s;
        width: 4px;
        height: 4px;
        background: radial-gradient(circle, #e74c3c, transparent);
        box-shadow: 0 0 10px #e74c3c;
    }

    .particle:nth-child(10) {
        left: 5%;
        animation-delay: 9s;
        width: 5px;
        height: 5px;
        background: radial-gradient(circle, #3498db, transparent);
        box-shadow: 0 0 12px #3498db;
    }

@keyframes floatParticle {
    0% {
        transform: translateY(100vh) rotate(0deg) scale(0);
        opacity: 0;
    }

    5% {
        opacity: 0.8;
        transform: translateY(95vh) rotate(18deg) scale(0.3);
    }

    10% {
        opacity: 1;
        transform: translateY(90vh) rotate(36deg) scale(0.6);
    }

    50% {
        transform: translateY(50vh) rotate(180deg) scale(1);
        opacity: 0.9;
    }

    90% {
        opacity: 0.5;
        transform: translateY(10vh) rotate(324deg) scale(0.8);
    }

    100% {
        transform: translateY(-10vh) rotate(360deg) scale(0);
        opacity: 0;
    }
}

/* Partículas de construcción adicionales */
.particles-container::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(2px 2px at 20px 30px, rgba(255, 107, 53, 0.4), transparent), radial-gradient(2px 2px at 40px 70px, rgba(243, 156, 18, 0.3), transparent), radial-gradient(1px 1px at 90px 40px, rgba(46, 204, 113, 0.4), transparent), radial-gradient(1px 1px at 130px 80px, rgba(52, 152, 219, 0.3), transparent), radial-gradient(2px 2px at 160px 30px, rgba(155, 89, 182, 0.4), transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: sparkle 8s linear infinite;
}

@keyframes sparkle {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-100px) rotate(180deg);
    }
}

/* ========================================
   PANEL INFORMATIVO MEJORADO
======================================== */
.info-panel {
    flex: 1;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.95) 0%, rgba(231, 76, 60, 0.9) 25%, rgba(243, 156, 18, 0.85) 50%, rgba(230, 126, 34, 0.9) 75%, rgba(255, 107, 53, 0.95) 100% ), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="construction" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M0,0 L20,20 M20,0 L0,20" stroke="rgba(255,255,255,0.1)" stroke-width="1"/><circle cx="10" cy="10" r="2" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23construction)"/></svg>');
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

    .info-panel::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.08) 0%, transparent 50%), linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60% );
        animation: shimmer 6s ease-in-out infinite;
        z-index: 1;
    }

    .info-panel::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: conic-gradient(from 45deg at 30% 70%, transparent 0deg, rgba(255, 255, 255, 0.1) 90deg, transparent 180deg, rgba(255, 255, 255, 0.05) 270deg, transparent 360deg );
        animation: rotateShine 12s linear infinite;
        z-index: 1;
    }

@keyframes shimmer {
    0%, 100% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
        opacity: 0.3;
    }

    50% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
        opacity: 0.7;
    }
}

@keyframes rotateShine {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.info-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.construction-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.info-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.info-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 30px;
    line-height: 1.5;
}

.features-list {
    margin-bottom: 40px;
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1rem;
    animation: slideInLeft 0.6s ease-out;
}

    .feature-item:nth-child(1) {
        animation-delay: 0.2s;
    }

    .feature-item:nth-child(2) {
        animation-delay: 0.4s;
    }

    .feature-item:nth-child(3) {
        animation-delay: 0.6s;
    }

@keyframes slideInLeft {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.feature-item i {
    margin-right: 12px;
    color: var(--accent-color);
    font-size: 1.2rem;
}

.trusted-by {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
}

.trusted-text {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 15px;
}

.trust-indicators {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
}

    .trust-item i {
        color: var(--accent-color);
    }

/* ========================================
   PANEL DEL FORMULARIO
======================================== */
.form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 40px;
    position: relative;
    overflow-y: auto;
}

.form-container {
    width: 100%;
    max-width: 400px;
    position: relative;
    min-height: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ========================================
   LOGO
======================================== */
.logo-container {
    text-align: center;
    margin-bottom: 15px;
}

.logo-link {
    display: inline-block;
    transition: var(--transition);
}

    .logo-link:hover {
        transform: scale(1.05);
    }

.logo-image {
    width: 100%;
    max-width: 260px;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

/* ========================================
   ENCABEZADO DE BIENVENIDA
======================================== */
.welcome-header {
    text-align: center;
    margin-bottom: 20px;
}

.welcome-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.welcome-subtitle {
    color: var(--text-light);
    font-size: 1rem;
}

/* ========================================
   FORMULARIO
======================================== */
.login-form {
    width: 100%;
}

.form-group {
    margin-bottom: 18px;
}

.form-label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

    .form-label i {
        margin-right: 8px;
        color: var(--primary-color);
    }

.input-wrapper {
    position: relative;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 1rem;
    transition: var(--transition);
    background: white;
    outline: none;
}

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
    }

    .form-control::placeholder {
        color: #aaa;
    }

.input-highlight {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.form-control:focus + .input-highlight {
    width: 100%;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 1.1rem;
    transition: var(--transition);
}

    .password-toggle:hover {
        color: var(--primary-color);
    }

.validation-message {
    color: var(--danger-color);
    font-size: 0.85rem;
    margin-top: 5px;
    display: block;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* ========================================
   ALERTA DE ERROR
======================================== */
.error-alert {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.error-alert i {
    margin-right: 8px;
    font-size: 1.1rem;
}

/* ========================================
   CAPTCHA
======================================== */
.captcha-container {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

    .captcha-container .g-recaptcha {
        transform: scale(0.9);
        transform-origin: center;
    }

/* ========================================
   OPCIONES DEL FORMULARIO
======================================== */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.remember-me {
    display: flex;
    align-items: center;
}

.form-check-input {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    accent-color: var(--primary-color);
}

.form-check-label {
    font-size: 0.9rem;
    color: var(--text-dark);
    cursor: pointer;
}

.forgot-password {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);
}

    .forgot-password:hover {
        color: var(--primary-dark);
        text-decoration: underline;
    }

/* ========================================
   BOTÓN DE LOGIN
======================================== */
.btn-login {
    width: 100%;
    padding: 14px 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .btn-login:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
    }

    .btn-login:active {
        transform: translateY(0);
    }

.btn-text {
    position: relative;
    z-index: 2;
}

.btn-icon {
    position: relative;
    z-index: 2;
    transition: var(--transition);
}

.btn-login:hover .btn-icon {
    transform: translateX(5px);
}

.btn-bg {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-login:hover .btn-bg {
    left: 100%;
}

/* ========================================
   ELEMENTOS DECORATIVOS
======================================== */
.decorative-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.floating-tool {
    position: absolute;
    font-size: 20px;
    color: var(--primary-color);
    opacity: 0.1;
    animation: floatDecorative 4s ease-in-out infinite;
}

.floating-tool-1 {
    top: 10%;
    right: 10%;
    animation-delay: 0s;
}

.floating-tool-2 {
    bottom: 20%;
    right: 15%;
    animation-delay: 1s;
}

.floating-tool-3 {
    top: 60%;
    right: 5%;
    animation-delay: 2s;
}

@keyframes floatDecorative {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(180deg);
    }
}

/* ========================================
   INDICADOR DE CARGA
======================================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

    .loading-overlay.active {
        display: flex;
    }

.loading-spinner {
    text-align: center;
    color: white;
}

.spinner-icon {
    font-size: 48px;
    margin-bottom: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text {
    font-size: 1.1rem;
    font-weight: 500;
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */
@media (max-width: 768px) {
    /* AGREGAR AL INICIO: */
    body.bg-login {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
        animation: none;
    }
    .login-main-container {
        flex-direction: column;
        height: auto;
        max-height: 95vh;
        overflow-y: auto;
    }

    .info-panel {
        display: none;
    }

    .form-panel {
        padding: 20px 15px;
    }

    .logo-image {
        width: 100%;
        max-width: 200px;
    }

    .welcome-title {
        font-size: 1.3rem;
    }

    .welcome-header {
        margin-bottom: 15px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-options {
        margin-bottom: 15px;
    }

    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .tools-background {
        display: none;
    }

    .particles-container {
        display: none;
    }
}

/* ========================================
   ANIMACIONES DE ENTRADA
======================================== */
.login-main-container {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-group {
    animation: slideInRight 0.6s ease-out;
}

    .form-group:nth-child(1) {
        animation-delay: 0.1s;
    }

    .form-group:nth-child(2) {
        animation-delay: 0.2s;
    }

    .form-group:nth-child(3) {
        animation-delay: 0.3s;
    }

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   MEJORAS DE ACCESIBILIDAD
======================================== */
.form-control:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.btn-login:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Reducir animaciones para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   ANIMACIONES ADICIONALES PARA NUEVOS ELEMENTOS
======================================== */

/* Animación para destellos aleatorios */
@keyframes sparkleLife {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }

    20% {
        transform: scale(1.2) rotate(45deg);
        opacity: 1;
    }

    60% {
        transform: scale(1) rotate(180deg);
        opacity: 0.8;
    }

    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

/* Animaciones para partículas especiales */
@keyframes burstParticle {
    0% {
        transform: translateY(100vh) scale(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        transform: translateY(90vh) scale(1) rotate(45deg);
        opacity: 1;
    }

    50% {
        transform: translateY(50vh) scale(1.2) rotate(180deg);
        opacity: 0.8;
    }

    90% {
        transform: translateY(10vh) scale(0.8) rotate(315deg);
        opacity: 0.3;
    }

    100% {
        transform: translateY(-10vh) scale(0) rotate(360deg);
        opacity: 0;
    }
}

.burst-particle {
    animation: burstParticle 4s ease-out forwards !important;
}

/* Efectos especiales para diferentes tipos de partículas */
.spark-particle {
    text-shadow: 0 0 15px currentColor !important;
    animation: sparkFloat 8s ease-in-out infinite !important;
}

.dust-particle {
    opacity: 0.7 !important;
    animation: dustFloat 10s linear infinite !important;
}

.tool-particle {
    animation: toolFloat 12s ease-in-out infinite !important;
    filter: drop-shadow(0 0 8px currentColor) !important;
}

.energy-particle {
    animation: energyFloat 6s ease-in-out infinite !important;
    text-shadow: 0 0 20px currentColor !important;
}

.cement-particle {
    opacity: 0.5 !important;
    animation: cementFloat 15s linear infinite !important;
}

@keyframes sparkFloat {
    0%, 100% {
        transform: translateY(100vh) scale(0) rotate(0deg);
        opacity: 0;
    }

    5% {
        transform: translateY(95vh) scale(0.8) rotate(18deg);
        opacity: 0.8;
    }

    15% {
        transform: translateY(85vh) scale(1.2) rotate(54deg);
        opacity: 1;
    }

    50% {
        transform: translateY(50vh) scale(1) rotate(180deg);
        opacity: 0.9;
    }

    90% {
        transform: translateY(10vh) scale(0.8) rotate(324deg);
        opacity: 0.3;
    }

    100% {
        transform: translateY(-10vh) scale(0) rotate(360deg);
        opacity: 0;
    }
}

@keyframes dustFloat {
    0%, 100% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.7;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-10vh) rotate(180deg);
        opacity: 0;
    }
}

@keyframes toolFloat {
    0%, 100% {
        transform: translateY(100vh) rotate(0deg) scale(1);
        opacity: 0;
    }

    8% {
        opacity: 0.9;
    }

    50% {
        transform: translateY(50vh) rotate(180deg) scale(1.1);
        opacity: 1;
    }

    92% {
        opacity: 0.5;
    }

    100% {
        transform: translateY(-10vh) rotate(360deg) scale(0.8);
        opacity: 0;
    }
}

@keyframes energyFloat {
    0%, 100% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }

    15% {
        transform: translateY(85vh) scale(1.3);
        opacity: 1;
    }

    50% {
        transform: translateY(50vh) scale(1);
        opacity: 0.8;
    }

    85% {
        transform: translateY(15vh) scale(0.7);
        opacity: 0.4;
    }

    100% {
        transform: translateY(-10vh) scale(0);
        opacity: 0;
    }
}

@keyframes cementFloat {
    0%, 100% {
        transform: translateY(100vh);
        opacity: 0;
    }

    12% {
        opacity: 0.5;
    }

    88% {
        opacity: 0.3;
    }

    100% {
        transform: translateY(-10vh);
        opacity: 0;
    }
}
/* ========================================
   NUEVOS ELEMENTOS DE FONDO ESPECTACULARES
======================================== */

/* Ondas animadas de fondo */
body.bg-login::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 100% 60% at 0% 0%, rgba(255, 107, 53, 0.2) 0%, transparent 50%), radial-gradient(ellipse 100% 60% at 100% 100%, rgba(46, 204, 113, 0.15) 0%, transparent 50%), radial-gradient(ellipse 150% 80% at 50% 0%, rgba(52, 152, 219, 0.1) 0%, transparent 50%);
    animation: waveBackground 12s ease-in-out infinite;
    z-index: 0;
}

body.bg-login::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: conic-gradient(from 0deg at 20% 20%, transparent 0deg, rgba(255, 107, 53, 0.1) 36deg, transparent 72deg, rgba(243, 156, 18, 0.08) 108deg, transparent 144deg, rgba(46, 204, 113, 0.06) 180deg, transparent 216deg, rgba(155, 89, 182, 0.08) 252deg, transparent 288deg, rgba(231, 76, 60, 0.1) 324deg, transparent 360deg ), conic-gradient(from 180deg at 80% 80%, transparent 0deg, rgba(52, 152, 219, 0.1) 60deg, transparent 120deg, rgba(230, 126, 34, 0.08) 180deg, transparent 240deg, rgba(26, 188, 156, 0.06) 300deg, transparent 360deg );
    animation: dualConic 25s linear infinite;
    z-index: 0;
}

@keyframes waveBackground {
    0%, 100% {
        background-position: 0% 0%, 100% 100%, 50% 0%;
        background-size: 300% 300%, 400% 400%, 500% 300%;
    }

    33% {
        background-position: 100% 50%, 0% 0%, 0% 100%;
        background-size: 400% 400%, 300% 300%, 600% 400%;
    }

    66% {
        background-position: 50% 100%, 50% 50%, 100% 0%;
        background-size: 350% 350%, 450% 350%, 400% 300%;
    }
}

@keyframes dualConic {
    0% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(90deg) scale(1.1);
    }

    50% {
        transform: rotate(180deg) scale(0.9);
    }

    75% {
        transform: rotate(270deg) scale(1.05);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* Líneas de construcción animadas */
.login-container .construction-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.construction-lines::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, transparent 49%, rgba(255, 107, 53, 0.1) 50%, transparent 51%), linear-gradient(90deg, transparent 49%, rgba(243, 156, 18, 0.08) 50%, transparent 51%), linear-gradient(45deg, transparent 49%, rgba(46, 204, 113, 0.06) 50%, transparent 51%), linear-gradient(-45deg, transparent 49%, rgba(52, 152, 219, 0.05) 50%, transparent 51%);
    background-size: 100% 200px, 200px 100%, 300px 300px, 250px 250px;
    animation: constructionGrid 15s linear infinite;
}

.construction-lines::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient( 0deg, transparent 0px, transparent 48px, rgba(255, 255, 255, 0.02) 50px, transparent 52px, transparent 100px ), repeating-linear-gradient( 90deg, transparent 0px, transparent 48px, rgba(255, 255, 255, 0.02) 50px, transparent 52px, transparent 100px );
    animation: blueprintGrid 20s linear infinite;
}

@keyframes constructionGrid {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }

    100% {
        background-position: 0% 200px, 200px 0%, 300px 300px, -250px -250px;
    }
}

@keyframes blueprintGrid {
    0% {
        background-position: 0% 0%, 0% 0%;
    }

    100% {
        background-position: 100px 0%, 0% 100px;
    }
}

/* Efectos de destello y brillo */
.login-container .sparkle-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}

.sparkle-effects::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle 2px at 10% 20%, rgba(255, 255, 255, 0.8) 0%, transparent 50%), radial-gradient(circle 1px at 30% 70%, rgba(245, 158, 11, 0.9) 0%, transparent 50%), radial-gradient(circle 3px at 60% 30%, rgba(255, 255, 255, 0.6) 0%, transparent 50%), radial-gradient(circle 1px at 80% 80%, rgba(59, 130, 246, 0.8) 0%, transparent 50%), radial-gradient(circle 2px at 20% 90%, rgba(139, 92, 246, 0.7) 0%, transparent 50%), radial-gradient(circle 1px at 90% 40%, rgba(16, 185, 129, 0.8) 0%, transparent 50%), radial-gradient(circle 2px at 50% 10%, rgba(99, 102, 241, 0.6) 0%, transparent 50%);
    animation: twinkle 8s ease-in-out infinite;
}

.sparkle-effects::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70% );
    animation: sweep 6s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }

    25% {
        transform: scale(1.2) rotate(90deg);
        opacity: 1;
    }

    50% {
        transform: scale(0.8) rotate(180deg);
        opacity: 0.6;
    }

    75% {
        transform: scale(1.1) rotate(270deg);
        opacity: 0.9;
    }
}

@keyframes sweep {
    0% {
        transform: translateX(-100%) skewX(-15deg);
        opacity: 0;
    }

    30% {
        opacity: 0.5;
    }

    70% {
        opacity: 0.3;
    }

    100% {
        transform: translateX(200%) skewX(-15deg);
        opacity: 0;
    }
}

/* Efectos de profundidad con capas múltiples */
.login-container .depth-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.depth-layers::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 40% 30% at 80% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 20% 80%, rgba(59, 130, 246, 0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 35% at 60% 60%, rgba(139, 92, 246, 0.1) 0%, transparent 60%), radial-gradient(ellipse 35% 50% at 30% 30%, rgba(16, 185, 129, 0.08) 0%, transparent 60%);
    35% at 60% 60%, rgba(52, 152, 219, 0.1) 0%, transparent 60%), radial-gradient(ellipse 35% 50% at 30% 30%, rgba(155, 89, 182, 0.08) 0%, transparent 60%);
    animation: floatingOrbs 20s ease-in-out infinite;
}

.depth-layers::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 45deg at 25% 25%, rgba(99, 102, 241, 0.1) 0deg, transparent 60deg, rgba(245, 158, 11, 0.08) 120deg, transparent 180deg, rgba(59, 130, 246, 0.06) 240deg, transparent 300deg, rgba(99, 102, 241, 0.1) 360deg ), conic-gradient(from 225deg at 75% 75%, rgba(139, 92, 246, 0.08) 0deg, transparent 90deg, rgba(16, 185, 129, 0.06) 180deg, transparent 270deg, rgba(139, 92, 246, 0.08) 360deg );
    animation: dualConicSlow 30s linear infinite reverse;
}

@keyframes floatingOrbs {
    0%, 100% {
        background-position: 80% 20%, 20% 80%, 60% 60%, 30% 30%;
        background-size: 300% 200%, 400% 300%, 350% 250%, 250% 350%;
    }

    25% {
        background-position: 20% 30%, 70% 20%, 80% 80%, 40% 70%;
        background-size: 350% 250%, 300% 400%, 400% 300%, 300% 250%;
    }

    50% {
        background-position: 60% 70%, 30% 40%, 20% 30%, 80% 60%;
        background-size: 400% 300%, 350% 250%, 300% 350%, 350% 300%;
    }

    75% {
        background-position: 70% 80%, 80% 60%, 40% 20%, 60% 40%;
        background-size: 300% 350%, 400% 300%, 350% 400%, 250% 350%;
    }
}

@keyframes dualConicSlow {
    0% {
        transform: rotate(0deg) scale(1.1);
    }

    50% {
        transform: rotate(180deg) scale(0.9);
    }

    100% {
        transform: rotate(360deg) scale(1.1);
    }
}

/* Efectos de materiales de construcción */
.login-container .construction-materials {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.construction-materials::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><defs><pattern id="brick" width="60" height="30" patternUnits="userSpaceOnUse"><rect width="30" height="15" fill="rgba(99,102,241,0.05)" stroke="rgba(99,102,241,0.1)" stroke-width="0.5"/><rect x="30" width="30" height="15" fill="rgba(139,92,246,0.05)" stroke="rgba(139,92,246,0.1)" stroke-width="0.5"/><rect y="15" width="30" height="15" fill="rgba(59,130,246,0.05)" stroke="rgba(59,130,246,0.1)" stroke-width="0.5"/><rect x="30" y="15" width="30" height="15" fill="rgba(245,158,11,0.05)" stroke="rgba(245,158,11,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100%" height="100%" fill="url(%23brick)"/></svg>'), linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.02) 50%, transparent 60%);
    background-size: 120px 60px, 200% 200%;
    animation: brickPattern 25s linear infinite, slidePattern 15s ease-in-out infinite;
    opacity: 0.3;
}

.construction-materials::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(99, 102, 241, 0.02) 15deg, transparent 30deg, rgba(59, 130, 246, 0.02) 45deg, transparent 60deg, rgba(139, 92, 246, 0.02) 75deg, transparent 90deg );
    animation: conicSweep 18s linear infinite;
}

@keyframes brickPattern {
    0% {
        background-position: 0% 0%, 0% 0%;
    }

    100% {
        background-position: 120px 60px, 200% 200%;
    }
}

@keyframes slidePattern {
    0%, 100% {
        background-position: 0% 0%, 0% 0%;
    }

    50% {
        background-position: 60px 30px, 100% 100%;
    }
}

@keyframes conicSweep {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Efectos de energía y electricidad */
.login-container .energy-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.energy-effects::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 200% 100% at 0% 50%, transparent 0%, rgba(99, 102, 241, 0.08) 25%, transparent 50% ), radial-gradient(ellipse 200% 100% at 100% 50%, transparent 0%, rgba(59, 130, 246, 0.06) 25%, transparent 50% );
    animation: energyPulse 10s ease-in-out infinite;
}

.energy-effects::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.1) 25%, rgba(255, 255, 255, 0.05) 50%, rgba(139, 92, 246, 0.08) 75%, transparent 100% );
    animation: energyWave 8s ease-in-out infinite;
}

@keyframes energyPulse {
    0%, 100% {
        background-size: 300% 200%, 300% 200%;
        opacity: 0.3;
    }

    50% {
        background-size: 400% 300%, 400% 300%;
        opacity: 0.7;
    }
}

@keyframes energyWave {
    0% {
        transform: translateX(-100%) skewX(15deg);
        opacity: 0;
    }

    25% {
        opacity: 0.6;
    }

    75% {
        opacity: 0.4;
    }

    100% {
        transform: translateX(200%) skewX(15deg);
        opacity: 0;
    }
}
/* ========================================
   VARIABLES Y COLORES PRINCIPALES
======================================== */
:root {
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --secondary-color: #f59e0b;
    --accent-color: #3b82f6;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;
    --dark-bg: #0f172a;
    --darker-bg: #020617;
    --glass-bg: rgba(15, 23, 42, 0.8);
    --light-bg: #ffffff;
    --text-dark: #0f172a;
    --text-light: #64748b;
    --border-color: #e2e8f0;
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-warning: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-large: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
    --border-radius: 1rem;
    --border-radius-sm: 0.5rem;
    --border-radius-lg: 1.5rem;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   RESET Y BASE
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.bg-login {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    background: radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.4) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.2) 0%, transparent 50%), linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    overflow: hidden;
    height: 100vh;
    position: relative;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ========================================
   CONTENEDOR PRINCIPAL
======================================== */
.login-container {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    /* Capas de fondo adicionales para profundidad */
    .login-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: conic-gradient(from 0deg at 50% 50%, rgba(99, 102, 241, 0.1) 0deg, rgba(139, 92, 246, 0.1) 72deg, rgba(59, 130, 246, 0.1) 144deg, rgba(16, 185, 129, 0.1) 216deg, rgba(245, 158, 11, 0.1) 288deg, rgba(99, 102, 241, 0.1) 360deg );
        animation: rotateConic 20s linear infinite;
        z-index: 1;
    }

    .login-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(59, 130, 246, 0.12) 0%, transparent 50%), radial-gradient(ellipse 100% 60% at 50% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
        animation: pulseRadial 8s ease-in-out infinite;
        z-index: 2;
    }

@keyframes rotateConic {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulseRadial {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* ========================================
   FONDO ANIMADO CON HERRAMIENTAS
======================================== */
.tools-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.tool-icon {
    position: absolute;
    font-size: 28px;
    opacity: 0.15;
    animation: floatTool 8s ease-in-out infinite;
    color: var(--primary-color);
    text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.3));
}

.tool-hammer {
    top: 10%;
    left: 15%;
    animation-delay: 0s;
    transform: rotate(-15deg);
}

.tool-wrench {
    top: 25%;
    right: 20%;
    animation-delay: 1s;
    transform: rotate(45deg);
}

.tool-drill {
    bottom: 30%;
    left: 10%;
    animation-delay: 2s;
    transform: rotate(-30deg);
}

.tool-ruler {
    top: 60%;
    right: 15%;
    animation-delay: 3s;
    transform: rotate(60deg);
}

.tool-paint {
    bottom: 15%;
    right: 25%;
    animation-delay: 4s;
    transform: rotate(-45deg);
}

.tool-brush {
    top: 40%;
    left: 5%;
    animation-delay: 5s;
    transform: rotate(30deg);
}

.tool-level {
    bottom: 50%;
    right: 5%;
    animation-delay: 6s;
    transform: rotate(-60deg);
}

.tool-saw {
    top: 80%;
    left: 25%;
    animation-delay: 7s;
    transform: rotate(15deg);
}

/* Herramientas adicionales para más densidad */
.tools-background::before {
    content: '🏗️';
    position: absolute;
    top: 5%;
    left: 60%;
    font-size: 32px;
    opacity: 0.1;
    animation: floatTool 10s ease-in-out infinite;
    animation-delay: 1.5s;
}

.tools-background::after {
    content: '🔩';
    position: absolute;
    bottom: 10%;
    left: 70%;
    font-size: 24px;
    opacity: 0.12;
    animation: floatTool 9s ease-in-out infinite;
    animation-delay: 3.5s;
}

@keyframes floatTool {
    0%, 100% {
        transform: translateY(0px) rotate(var(--initial-rotation, 0deg)) scale(1);
        opacity: 0.15;
    }

    25% {
        transform: translateY(-30px) rotate(calc(var(--initial-rotation, 0deg) + 10deg)) scale(1.1);
        opacity: 0.25;
    }

    50% {
        transform: translateY(-15px) rotate(calc(var(--initial-rotation, 0deg) - 5deg)) scale(0.95);
        opacity: 0.2;
    }

    75% {
        transform: translateY(-40px) rotate(calc(var(--initial-rotation, 0deg) + 15deg)) scale(1.05);
        opacity: 0.18;
    }
}

/* ========================================
   PARTÍCULAS FLOTANTES MEJORADAS
======================================== */
.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}

.particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.8;
    animation: floatParticle 12s linear infinite;
}

    /* Diferentes tipos de partículas */
    .particle:nth-child(1) {
        left: 10%;
        animation-delay: 0s;
        width: 6px;
        height: 6px;
        background: radial-gradient(circle, var(--primary-color), transparent);
        box-shadow: 0 0 15px var(--primary-color);
    }

    .particle:nth-child(2) {
        left: 20%;
        animation-delay: 1s;
        width: 4px;
        height: 4px;
        background: radial-gradient(circle, var(--accent-color), transparent);
        box-shadow: 0 0 10px var(--accent-color);
    }

    .particle:nth-child(3) {
        left: 30%;
        animation-delay: 2s;
        width: 8px;
        height: 8px;
        background: radial-gradient(circle, var(--success-color), transparent);
        box-shadow: 0 0 20px var(--success-color);
    }

    .particle:nth-child(4) {
        left: 40%;
        animation-delay: 3s;
        width: 5px;
        height: 5px;
        background: radial-gradient(circle, var(--warning-color), transparent);
        box-shadow: 0 0 12px var(--warning-color);
    }

    .particle:nth-child(5) {
        left: 50%;
        animation-delay: 4s;
        width: 7px;
        height: 7px;
        background: radial-gradient(circle, #8b5cf6, transparent);
        box-shadow: 0 0 18px #8b5cf6;
    }

    .particle:nth-child(6) {
        left: 60%;
        animation-delay: 5s;
        width: 3px;
        height: 3px;
        background: radial-gradient(circle, #06b6d4, transparent);
        box-shadow: 0 0 8px #06b6d4;
    }

    .particle:nth-child(7) {
        left: 70%;
        animation-delay: 6s;
        width: 9px;
        height: 9px;
        background: radial-gradient(circle, #84cc16, transparent);
        box-shadow: 0 0 25px #84cc16;
    }

    .particle:nth-child(8) {
        left: 80%;
        animation-delay: 7s;
        width: 6px;
        height: 6px;
        background: radial-gradient(circle, #64748b, transparent);
        box-shadow: 0 0 15px #64748b;
    }

    .particle:nth-child(9) {
        left: 90%;
        animation-delay: 8s;
        width: 4px;
        height: 4px;
        background: radial-gradient(circle, var(--danger-color), transparent);
        box-shadow: 0 0 10px var(--danger-color);
    }

    .particle:nth-child(10) {
        left: 5%;
        animation-delay: 9s;
        width: 5px;
        height: 5px;
        background: radial-gradient(circle, #6366f1, transparent);
        box-shadow: 0 0 12px #6366f1;
    }

@keyframes floatParticle {
    0% {
        transform: translateY(100vh) rotate(0deg) scale(0);
        opacity: 0;
    }

    5% {
        opacity: 0.8;
        transform: translateY(95vh) rotate(18deg) scale(0.3);
    }

    10% {
        opacity: 1;
        transform: translateY(90vh) rotate(36deg) scale(0.6);
    }

    50% {
        transform: translateY(50vh) rotate(180deg) scale(1);
        opacity: 0.9;
    }

    90% {
        opacity: 0.5;
        transform: translateY(10vh) rotate(324deg) scale(0.8);
    }

    100% {
        transform: translateY(-10vh) rotate(360deg) scale(0);
        opacity: 0;
    }
}

/* Partículas de construcción adicionales */
.particles-container::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(2px 2px at 20px 30px, rgba(255, 107, 53, 0.4), transparent), radial-gradient(2px 2px at 40px 70px, rgba(243, 156, 18, 0.3), transparent), radial-gradient(1px 1px at 90px 40px, rgba(46, 204, 113, 0.4), transparent), radial-gradient(1px 1px at 130px 80px, rgba(52, 152, 219, 0.3), transparent), radial-gradient(2px 2px at 160px 30px, rgba(155, 89, 182, 0.4), transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: sparkle 8s linear infinite;
}

@keyframes sparkle {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-100px) rotate(180deg);
    }
}

/* ========================================
   PANEL INFORMATIVO MEJORADO
======================================== */
.info-panel {
    flex: 1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.95) 0%, rgba(79, 70, 229, 0.9) 25%, rgba(139, 92, 246, 0.85) 50%, rgba(124, 58, 237, 0.9) 75%, rgba(99, 102, 241, 0.95) 100% ), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="construction" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M0,0 L20,20 M20,0 L0,20" stroke="rgba(255,255,255,0.1)" stroke-width="1"/><circle cx="10" cy="10" r="2" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23construction)"/></svg>');
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

    .info-panel::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.08) 0%, transparent 50%), linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60% );
        animation: shimmer 6s ease-in-out infinite;
        z-index: 1;
    }

    .info-panel::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: conic-gradient(from 45deg at 30% 70%, transparent 0deg, rgba(255, 255, 255, 0.1) 90deg, transparent 180deg, rgba(255, 255, 255, 0.05) 270deg, transparent 360deg );
        animation: rotateShine 12s linear infinite;
        z-index: 1;
    }

@keyframes shimmer {
    0%, 100% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
        opacity: 0.3;
    }

    50% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
        opacity: 0.7;
    }
}

@keyframes rotateShine {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.info-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.construction-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.info-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.info-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 30px;
    line-height: 1.5;
}

.features-list {
    margin-bottom: 40px;
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1rem;
    animation: slideInLeft 0.6s ease-out;
}

    .feature-item:nth-child(1) {
        animation-delay: 0.2s;
    }

    .feature-item:nth-child(2) {
        animation-delay: 0.4s;
    }

    .feature-item:nth-child(3) {
        animation-delay: 0.6s;
    }

@keyframes slideInLeft {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.feature-item i {
    margin-right: 12px;
    color: var(--secondary-color);
    font-size: 1.2rem;
}

.trusted-by {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
}

.trusted-text {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 15px;
}

.trust-indicators {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
}

    .trust-item i {
        color: var(--secondary-color);
    }

/* ========================================
   PANEL DEL FORMULARIO
======================================== */
.form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
}

/* ========================================
   LOGO
======================================== */
.logo-container {
    text-align: center;
    margin-bottom: 30px;
}

.logo-link {
    display: inline-block;
    transition: var(--transition);
}

    .logo-link:hover {
        transform: scale(1.05);
    }

.logo-image {
    width: 100%;
    max-width: 400px;
    /*height: auto;*/
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

/* ========================================
   ENCABEZADO DE BIENVENIDA
======================================== */
.welcome-header {
    text-align: center;
    margin-bottom: 40px;
}

.welcome-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.welcome-subtitle {
    color: var(--text-light);
    font-size: 1rem;
}

/* ========================================
   FORMULARIO
======================================== */
.login-form {
    width: 100%;
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

    .form-label i {
        margin-right: 8px;
        color: var(--primary-color);
    }

.input-wrapper {
    position: relative;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 1rem;
    transition: var(--transition);
    background: white;
    outline: none;
}

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
    }

    .form-control::placeholder {
        color: #aaa;
    }

.input-highlight {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.form-control:focus + .input-highlight {
    width: 100%;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 1.1rem;
    transition: var(--transition);
}

    .password-toggle:hover {
        color: var(--primary-color);
    }

.validation-message {
    color: var(--danger-color);
    font-size: 0.85rem;
    margin-top: 5px;
    display: block;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* ========================================
   ALERTA DE ERROR
======================================== */
.error-alert {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.error-alert i {
    margin-right: 8px;
    font-size: 1.1rem;
}

/* ========================================
   CAPTCHA
======================================== */
.captcha-container {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

    .captcha-container .g-recaptcha {
        transform: scale(0.9);
        transform-origin: center;
    }

/* ========================================
   OPCIONES DEL FORMULARIO
======================================== */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 10px;
}

.remember-me {
    display: flex;
    align-items: center;
}

.form-check-input {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    accent-color: var(--primary-color);
}

.form-check-label {
    font-size: 0.9rem;
    color: var(--text-dark);
    cursor: pointer;
}

.forgot-password {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);
}

    .forgot-password:hover {
        color: var(--primary-dark);
        text-decoration: underline;
    }

/* ========================================
   BOTÓN DE LOGIN
======================================== */
.btn-login {
    width: 100%;
    padding: 14px 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .btn-login:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
    }

    .btn-login:active {
        transform: translateY(0);
    }

.btn-text {
    position: relative;
    z-index: 2;
}

.btn-icon {
    position: relative;
    z-index: 2;
    transition: var(--transition);
}

.btn-login:hover .btn-icon {
    transform: translateX(5px);
}

.btn-bg {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-login:hover .btn-bg {
    left: 100%;
}

/* ========================================
   ELEMENTOS DECORATIVOS
======================================== */
.decorative-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.floating-tool {
    position: absolute;
    font-size: 20px;
    color: var(--primary-color);
    opacity: 0.1;
    animation: floatDecorative 4s ease-in-out infinite;
}

.floating-tool-1 {
    top: 10%;
    right: 10%;
    animation-delay: 0s;
}

.floating-tool-2 {
    bottom: 20%;
    right: 15%;
    animation-delay: 1s;
}

.floating-tool-3 {
    top: 60%;
    right: 5%;
    animation-delay: 2s;
}

@keyframes floatDecorative {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(180deg);
    }
}

/* ========================================
   INDICADOR DE CARGA
======================================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

    .loading-overlay.active {
        display: flex;
    }

.loading-spinner {
    text-align: center;
    color: white;
}

.spinner-icon {
    font-size: 48px;
    margin-bottom: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text {
    font-size: 1.1rem;
    font-weight: 500;
}


/* ========================================
   ANIMACIONES DE ENTRADA
======================================== */
.login-main-container {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-group {
    animation: slideInRight 0.6s ease-out;
}

    .form-group:nth-child(1) {
        animation-delay: 0.1s;
    }

    .form-group:nth-child(2) {
        animation-delay: 0.2s;
    }

    .form-group:nth-child(3) {
        animation-delay: 0.3s;
    }

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   MEJORAS DE ACCESIBILIDAD
======================================== */
.form-control:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.btn-login:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Reducir animaciones para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   RESPONSIVE DESIGN - OPTIMIZADO PARA MÓVILES
   Archivo independiente con solo las media queries modificadas
======================================== */

@media (max-width: 768px) {
    /* Simplificar fondo para evitar flashes */
    body.bg-login {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
        animation: none;
    }

        body.bg-login::before,
        body.bg-login::after {
            display: none;
        }

    .login-container::before,
    .login-container::after {
        display: none;
    }

    /* Ocultar todos los efectos de fondo */
    .tools-background,
    .particles-container,
    .construction-lines,
    .sparkle-effects,
    .depth-layers,
    .construction-materials,
    .energy-effects {
        display: none !important;
    }

    .login-main-container {
        flex-direction: column;
        height: auto;
        max-height: 90vh;
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
    }

    .info-panel {
        display: none;
    }

    .form-panel {
        padding: 30px 20px;
    }

    .welcome-title {
        font-size: 1.5rem;
    }

    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

@media (max-width: 480px) {

    .login-container {
        padding: 10px;
    }

    .login-main-container {
        max-height: 98vh;
        background: rgba(255, 255, 255, 0.99);
        backdrop-filter: none;
    }

    .form-panel {
        /* CAMBIAR: padding: 30px 20px; */
        padding: 15px 10px;
    }

    .form-container {
        max-width: 100%;
    }

    .logo-image {
        max-width: 180px;
        width: 100%;
    }

    .welcome-title {
        font-size: 1.2rem;
    }

    .logo-container {
        margin-bottom: 10px;
    }

    .btn-login {
        font-size: 1rem;
        padding: 12px 16px;
    }

    /* Reducir todas las animaciones en móvil */
    .form-group {
        animation: none;
        margin-bottom: 12px;
    }

    .login-main-container {
        animation-duration: 0.3s;
    }
}

/* Para pantallas muy pequeñas (menos de 360px) */
@media (max-width: 359px) {
    body.bg-login {
        background: #334155;
    }

    .login-main-container {
        margin: 5px;
        border-radius: 8px;
        background: white;
        backdrop-filter: none;
    }

    .form-panel {
        padding: 20px 15px;
    }

    .logo-image {
        max-width: 200px;
        width: 100%;
    }

    .welcome-title {
        font-size: 1.2rem;
    }

    .form-control {
        padding: 10px 12px;
        font-size: 0.95rem;
    }

    .btn-login {
        padding: 10px 14px;
        font-size: 0.95rem;
    }
}

.login-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

@media (max-height: 700px) {
    .login-main-container {
        min-height: 500px;
        max-height: 95vh;
    }

    .logo-image {
        max-width: 200px;
        width: 100%;
    }

    .form-panel {
        padding: 15px 25px;
    }

    .logo-container {
        margin-bottom: 10px;
    }

    .welcome-header {
        margin-bottom: 15px;
    }
}

@media (max-height: 600px) {
    .info-panel {
        display: none;
    }

    .login-main-container {
        max-width: 500px;
    }

    .logo-image {
        max-width: 150px;
        width: 100%;
    }
}

/* ========================================
   BOTÓN DE GOOGLE
======================================== */
.btn-google {
    width: 100%;
    padding: 14px 20px;
    background: white;
    color: #757575;
    border: 2px solid #dadce0;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    text-decoration: none;
}

    .btn-google:hover {
        background: #f8f9fa;
        border-color: #dadce0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        color: #757575;
        text-decoration: none;
    }

    .btn-google:active {
        background: #f1f3f4;
    }

.google-icon {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285f4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334a853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23fbbc05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23ea4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.divider {
    display: flex;
    align-items: center;
    margin: 25px 0;
    color: var(--text-light);
    font-size: 0.9rem;
}

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border-color);
    }

    .divider span {
        padding: 0 15px;
    }

.legal-links {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: #666;
}

.legal-link {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .legal-link:hover {
        color: #007bff;
        text-decoration: underline;
    }

.legal-separator {
    margin: 0 8px;
    color: #ccc;
}