/**
 * Estilos Corporativos - ENFOQUE A LA FAMILIA
 * Paleta de colores turquesa inspirada en el branding
 */

:root {
    /* Paleta Turquesa Principal */
    --enfoque-turquesa-light: #e0f2f1;
    --enfoque-turquesa-100: #b2dfdb;
    --enfoque-turquesa-200: #80cbc4;
    --enfoque-turquesa-300: #4db6ac;
    --enfoque-turquesa-400: #26a69a;
    --enfoque-turquesa-500: #009688;
    --enfoque-turquesa-600: #00897b;
    --enfoque-turquesa-700: #00796b;
    --enfoque-turquesa-800: #00695c;
    --enfoque-turquesa-900: #004d40;

    /* Paleta Específica del Dashboard */
    --enfoque-primary: #01718f;
    --enfoque-secondary: #015a73;
    --enfoque-dark: #014357;
    --enfoque-darker: #002d3a;
    --enfoque-darkest: #00161d;

    /* Colores de Soporte */
    --enfoque-success: #01718f;
    --enfoque-info: #009ec9;
    --enfoque-warning: #ffb74d;
    --enfoque-danger: #ef5350;

    /* Fondos y Superficies */
    --enfoque-bg-light: #f5fcff;
    --enfoque-bg-card: #ffffff;
    --enfoque-bg-overlay: rgba(1, 113, 143, 0.1);
    
    /* Sombras */
    --enfoque-shadow-light: 0 4px 15px rgba(1, 113, 143, 0.15);
    --enfoque-shadow-medium: 0 8px 25px rgba(1, 113, 143, 0.2);
    --enfoque-shadow-heavy: 0 15px 35px rgba(1, 113, 143, 0.3);
}

/* Sobrescribir colores Bootstrap con paleta Enfoque */
.text-primary { color: var(--enfoque-primary) !important; }
.text-secondary { color: var(--enfoque-secondary) !important; }
.text-info { color: var(--enfoque-dark) !important; }
.text-success { color: var(--enfoque-success) !important; }
.text-purple { color: #8b5cf6 !important; }

.bg-primary { background-color: var(--enfoque-primary) !important; }
.bg-secondary { background-color: var(--enfoque-secondary) !important; }
.border-purple { border-color: #8b5cf6 !important; }
.bg-purple { background-color: #8b5cf6 !important; }
.bg-info { background-color: var(--enfoque-dark) !important; }
.bg-success { background-color: var(--enfoque-success) !important; }

/* Botones con gradientes turquesa */
.btn-enfoque-primary {
    background: linear-gradient(135deg, var(--enfoque-primary) 0%, var(--enfoque-secondary) 100%);
    border: none;
    color: white;
    box-shadow: var(--enfoque-shadow-light);
    transition: all 0.3s ease;
}

.btn-enfoque-primary:hover {
    background: linear-gradient(135deg, var(--enfoque-secondary) 0%, var(--enfoque-dark) 100%);
    transform: translateY(-2px);
    box-shadow: var(--enfoque-shadow-medium);
    color: white;
}

.btn-enfoque-outline {
    border: 2px solid var(--enfoque-primary);
    color: var(--enfoque-primary);
    background: transparent;
    transition: all 0.3s ease;
}

.btn-enfoque-outline:hover {
    background: var(--enfoque-primary);
    color: white;
    transform: translateY(-2px);
}

/* Cards con estilo Enfoque */
.card-enfoque {
    background: var(--enfoque-bg-card);
    border-radius: 15px;
    box-shadow: var(--enfoque-shadow-light);
    border-top: 4px solid var(--enfoque-primary);
    transition: all 0.3s ease;
}

.card-enfoque:hover {
    transform: translateY(-8px);
    box-shadow: var(--enfoque-shadow-medium);
}

.card-enfoque-secondary {
    border-top-color: var(--enfoque-secondary);
}

.card-enfoque-dark {
    border-top-color: var(--enfoque-dark);
}

/* Sidebar Enfoque */
.sidebar-enfoque {
    background: linear-gradient(135deg, var(--enfoque-primary) 0%, var(--enfoque-secondary) 50%, var(--enfoque-dark) 100%);
    box-shadow: 4px 0 15px rgba(77, 208, 225, 0.2);
}

.sidebar-enfoque .nav-link {
    color: rgba(255,255,255,0.9);
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.sidebar-enfoque .nav-link:hover,
.sidebar-enfoque .nav-link.active {
    color: white;
    background-color: rgba(255,255,255,0.15);
    border-left-color: white;
    transform: translateX(5px);
}

/* Badges con colores Enfoque */
.badge-enfoque {
    background: linear-gradient(135deg, var(--enfoque-primary) 0%, var(--enfoque-secondary) 100%);
    color: white;
}

.badge-enfoque-outline {
    border: 1px solid var(--enfoque-primary);
    color: var(--enfoque-primary);
    background: transparent;
}

/* Form Controls */
.form-control-enfoque:focus {
    border-color: var(--enfoque-primary);
    box-shadow: 0 0 0 0.2rem rgba(77, 208, 225, 0.25);
}

/* Alerts */
.alert-enfoque {
    background-color: var(--enfoque-bg-overlay);
    border: 1px solid var(--enfoque-primary);
    color: var(--enfoque-darkest);
}

.alert-enfoque .alert-link {
    color: var(--enfoque-darker);
}

/* Progress Bars */
.progress-enfoque .progress-bar {
    background: linear-gradient(90deg, var(--enfoque-primary) 0%, var(--enfoque-secondary) 100%);
}

/* Tables */
.table-enfoque thead {
    background-color: var(--enfoque-bg-overlay);
    color: var(--enfoque-darkest);
}

.table-enfoque tbody tr:hover {
    background-color: rgba(77, 208, 225, 0.05);
}

/* Loading Spinners */
.spinner-enfoque {
    border: 3px solid var(--enfoque-bg-overlay);
    border-top: 3px solid var(--enfoque-primary);
    animation: spin 1s linear infinite;
}

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

/* Gradientes de fondo */
.bg-gradient-enfoque {
    background: linear-gradient(135deg, var(--enfoque-primary) 0%, var(--enfoque-secondary) 50%, var(--enfoque-dark) 100%);
}

.bg-gradient-enfoque-light {
    background: linear-gradient(135deg, var(--enfoque-light) 0%, var(--enfoque-100) 100%);
}

/* Efectos de hover para iconos */
.icon-enfoque {
    color: var(--enfoque-primary);
    transition: all 0.3s ease;
}

.icon-enfoque:hover {
    color: var(--enfoque-darker);
    transform: scale(1.1);
}

/* Timeline personalizado */
.timeline-enfoque .timeline-marker {
    background-color: var(--enfoque-primary);
    border: 2px solid white;
}

.timeline-enfoque .timeline-line {
    background-color: var(--enfoque-200);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-enfoque {
        border-radius: 10px;
        margin-bottom: 15px;
    }
    
    .btn-enfoque-primary,
    .btn-enfoque-outline {
        padding: 10px 15px;
        font-size: 14px;
    }
}

/* Dark mode support (para futuras implementaciones) */
@media (prefers-color-scheme: dark) {
    :root {
        --enfoque-bg-card: #1a1a1a;
        --enfoque-bg-light: #121212;
    }
}

/* Animaciones específicas de Enfoque */
@keyframes enfoque-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.enfoque-fade-in {
    animation: enfoque-fade-in 0.6s ease-out;
}

.enfoque-fade-in-delay {
    animation: enfoque-fade-in 0.6s ease-out 0.2s both;
}

/* Utilidades de espaciado */
.p-enfoque { padding: 2rem; }
.m-enfoque { margin: 2rem; }
.mb-enfoque { margin-bottom: 2rem; }
.mt-enfoque { margin-top: 2rem; }