/* Sanon Group - Paleta Corporativa Gris/Negro */
:root {
    /* Colores Corporativos Principales */
    --brand-primary: #2C3E50;        /* Azul gris corporativo */
    --brand-secondary: #34495E;      /* Gris azulado */
    --brand-accent: #3498DB;         /* Azul corporativo */
    --brand-dark: #1A1A1A;          /* Negro corporativo */
    --brand-medium: #4A4A4A;        /* Gris medio */
    --brand-light: #E8E8E8;         /* Gris claro */
    --brand-white: #FFFFFF;         /* Blanco puro */

    /* Glassmorphism Corporativo */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: rgba(0, 0, 0, 0.3);
    --glass-dark: rgba(44, 62, 80, 0.15);

    /* Efectos 3D Corporativos */
    --shadow-3d: rgba(0, 0, 0, 0.4);
    --highlight-3d: rgba(255, 255, 255, 0.8);
    --depth-shadow: rgba(26, 26, 26, 0.5);

    /* Colores de Texto Corporativos */
    --text-primary: #000000;         /* Negro para texto principal */
    --text-secondary: #BDC3C7;       /* Gris claro para texto secundario */
    --text-light: #FFFFFF;           /* Blanco para texto en fondos oscuros */
    --text-dark: #2C3E50;            /* Azul gris para texto en fondos claros */
    --text-muted: #7F8C8D;           /* Gris medio para texto deshabilitado */

    /* Fondos Corporativos */
    --bg-primary: #ebeff9;           /* Gris claro para fondo principal */
    --bg-secondary: #34495E;         /* Gris azulado secundario */
    --bg-dark: #1A1A1A;             /* Negro corporativo */
    --bg-gradient-start: #2C3E50;    /* Azul gris */
    --bg-gradient-end: #34495E;      /* Gris azulado */
    --bg-corporate-gradient: linear-gradient(145deg, #2C3E50, #34495E);

    /* Bordes y Sombras Corporativos */
    --border-color: rgba(255, 255, 255, 0.2);
    --border-input: rgba(255, 255, 255, 0.15);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --focus-shadow: rgba(52, 152, 219, 0.5);
    --error-shadow: rgba(231, 76, 60, 0.3);

    /* Estados de Validación */
    --success-color: #28a745;
    --error-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

/* Brand color classes for easy application */
.brand-primary { color: var(--brand-primary) !important; }
.brand-secondary { color: var(--brand-secondary) !important; }
.brand-accent { color: var(--brand-accent) !important; }

.bg-brand-primary { background-color: var(--brand-primary) !important; }
.bg-brand-secondary { background-color: var(--brand-secondary) !important; }
.bg-brand-accent { background-color: var(--brand-accent) !important; }
.bg-brand-light { background-color: var(--brand-light) !important; }

.border-brand-primary { border-color: var(--brand-primary) !important; }
.border-brand-secondary { border-color: var(--brand-secondary) !important; }

/* Gradient backgrounds */
.bg-brand-gradient {
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end)) !important;
}

.bg-brand-gradient-reverse {
    background: linear-gradient(135deg, var(--bg-gradient-end), var(--bg-gradient-start)) !important;
}

/* 3D Effects and Futuristic Styles */
.card-3d {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    box-shadow:
        0 8px 32px var(--shadow-3d),
        inset 0 1px 0 var(--highlight-3d);
    transform: perspective(1000px) rotateX(5deg);
    transition: all 0.3s ease;
}

.card-3d:hover {
    transform: perspective(1000px) rotateX(0deg) translateY(-5px);
    box-shadow:
        0 15px 40px var(--shadow-3d),
        inset 0 1px 0 var(--highlight-3d);
}

.btn-3d {
    background: linear-gradient(145deg, var(--brand-primary), var(--brand-secondary));
    border: none;
    box-shadow:
        0 6px 20px var(--shadow-color),
        inset 0 1px 0 var(--highlight-3d),
        inset 0 -1px 0 var(--depth-shadow);
    transform: translateY(0);
    transition: all 0.2s ease;
}

.btn-3d:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px var(--shadow-color),
        inset 0 1px 0 var(--highlight-3d),
        inset 0 -1px 0 var(--depth-shadow);
}

.btn-3d:active {
    transform: translateY(1px);
    box-shadow:
        0 3px 10px var(--shadow-color),
        inset 0 1px 0 var(--depth-shadow);
}

.input-3d {
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
    border: 2px solid var(--glass-border);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.1),
        0 1px 0 var(--highlight-3d);
    transition: all 0.3s ease;
}

.input-3d:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--brand-primary);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.1),
        0 0 0 3px var(--focus-shadow),
        0 1px 0 var(--highlight-3d);
}

.glass-morphism {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
}

.neon-glow {
    box-shadow:
        0 0 5px var(--brand-accent),
        0 0 10px var(--brand-accent),
        0 0 15px var(--brand-accent),
        0 0 20px var(--brand-accent);
    animation: neonPulse 2s ease-in-out infinite alternate;
}

@keyframes neonPulse {
    from {
        box-shadow:
            0 0 5px var(--brand-accent),
            0 0 10px var(--brand-accent),
            0 0 15px var(--brand-accent),
            0 0 20px var(--brand-accent);
    }
    to {
        box-shadow:
            0 0 2px var(--brand-accent),
            0 0 5px var(--brand-accent),
            0 0 8px var(--brand-accent),
            0 0 12px var(--brand-accent);
    }
}

.floating-animation {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.main-content {
    background-color: var(--bg-primary);
    padding: 2rem;
}