/**
 * TEMA ILUSIONES CON FUTURO - CSS PRINCIPAL
 * Paleta de colores oficial basada en el branding
 * 
 * Colores principales:
 * - Verde: #52b69a (color principal del logo)
 * - Rosa/Magenta: #e63946 (acento del logo)
 * - Turquesa: #34a0a4 (complementario del logo)
 * - Azul oscuro: #184e77 (secundario profesional)
 */

/* ===== VARIABLES CSS GLOBALES ===== */
:root {
    /* PALETA ILUSIONES CON FUTURO */
    --color-brand-green: #52b69a;
    --color-brand-pink: #e63946;
    --color-brand-turquoise: #34a0a4;
    --color-brand-navy: #184e77;
    --color-brand-light-green: #76c893;
    --color-brand-orange: #f77f00;

    /* APLICACIÓN A BOOTSTRAP */
    --bs-primary: var(--color-brand-green);
    --bs-primary-rgb: 82, 182, 154;
    --bs-secondary: var(--color-brand-navy);
    --bs-secondary-rgb: 24, 78, 119;
    --bs-success: var(--color-brand-green);
    --bs-success-rgb: 82, 182, 154;
    --bs-danger: var(--color-brand-pink);
    --bs-danger-rgb: 230, 57, 70;
    --bs-warning: var(--color-brand-orange);
    --bs-warning-rgb: 247, 127, 0;
    --bs-info: var(--color-brand-turquoise);
    --bs-info-rgb: 52, 160, 164;

    /* COLORES DE FONDO Y SUPERFICIE */
    --bs-body-bg: #f8fffe;
    --bs-body-color: #2d3436;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;

    /* ENLACES Y TEXTO */
    --bs-link-color: var(--color-brand-green);
    --bs-link-hover-color: #40916c;
    --bs-link-color-rgb: 82, 182, 154;
    --bs-link-hover-color-rgb: 64, 145, 108;

    /* BORDES Y SEPARADORES */
    --bs-border-color: #d1f2eb;
    --bs-border-color-translucent: rgba(82, 182, 154, 0.175);

    /* CONFIGURACIÓN DE FUENTES */
    --font-family-primary: 'Bw Modelica', 'Inter', 'Outfit', 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    --font-family-headings: 'Bw Modelica', 'Outfit', 'Inter', 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    --font-family-navbar: 'Bw Modelica', 'Inter', 'Outfit', system-ui, sans-serif;
    --font-size-base: 14px;
    --line-height-base: 1.6;
}

/* ===== APLICACIÓN GLOBAL DEL TEMA ===== */

/* Botones principales */
.btn-primary {
    --bs-btn-bg: var(--color-brand-green);
    --bs-btn-border-color: var(--color-brand-green);
    --bs-btn-hover-bg: #40916c;
    --bs-btn-hover-border-color: #40916c;
    --bs-btn-focus-shadow-rgb: 82, 182, 154;
    --bs-btn-active-bg: #40916c;
    --bs-btn-active-border-color: #40916c;
}

.btn-success {
    --bs-btn-bg: var(--color-brand-green);
    --bs-btn-border-color: var(--color-brand-green);
    --bs-btn-hover-bg: var(--color-brand-light-green);
    --bs-btn-hover-border-color: var(--color-brand-light-green);
}

.btn-danger {
    --bs-btn-bg: var(--color-brand-pink);
    --bs-btn-border-color: var(--color-brand-pink);
    --bs-btn-hover-bg: #d02030;
    --bs-btn-hover-border-color: #d02030;
}

.btn-warning {
    --bs-btn-bg: var(--color-brand-orange);
    --bs-btn-border-color: var(--color-brand-orange);
    --bs-btn-hover-bg: #e06f00;
    --bs-btn-hover-border-color: #e06f00;
}

.btn-info {
    --bs-btn-bg: var(--color-brand-turquoise);
    --bs-btn-border-color: var(--color-brand-turquoise);
    --bs-btn-hover-bg: #2a8a8e;
    --bs-btn-hover-border-color: #2a8a8e;
}

/* Cards y superficies */
.card-header.bg-primary {
    background: linear-gradient(135deg, var(--color-brand-green), var(--color-brand-turquoise)) !important;
    color: white !important;
}

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

.bg-success {
    background-color: var(--color-brand-green) !important;
}

.bg-danger {
    background-color: var(--color-brand-pink) !important;
}

.bg-warning {
    background-color: var(--color-brand-orange) !important;
}

.bg-info {
    background-color: var(--color-brand-turquoise) !important;
}

/* Texto con colores del tema */
.text-primary {
    color: var(--color-brand-green) !important;
}

.text-success {
    color: var(--color-brand-green) !important;
}

.text-danger {
    color: var(--color-brand-pink) !important;
}

.text-warning {
    color: var(--color-brand-orange) !important;
}

.text-info {
    color: var(--color-brand-turquoise) !important;
}

/* Enlaces */
a {
    color: var(--color-brand-green);
}

a:hover {
    color: #40916c;
}

/* Formularios */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-brand-green);
    box-shadow: 0 0 0 0.25rem rgba(82, 182, 154, 0.25);
}

.form-check-input:checked {
    background-color: var(--color-brand-green);
    border-color: var(--color-brand-green);
}

/* Badges */
.badge.bg-primary {
    background-color: var(--color-brand-green) !important;
}

.badge.bg-success {
    background-color: var(--color-brand-green) !important;
}

.badge.bg-danger {
    background-color: var(--color-brand-pink) !important;
}

.badge.bg-warning {
    background-color: var(--color-brand-orange) !important;
}

.badge.bg-info {
    background-color: var(--color-brand-turquoise) !important;
}

/* Alertas */
.alert-primary {
    --bs-alert-color: #0f5132;
    --bs-alert-bg: #d1f2eb;
    --bs-alert-border-color: #baecdc;
    --bs-alert-link-color: #0c4128;
}

.alert-success {
    --bs-alert-color: #0f5132;
    --bs-alert-bg: #d1f2eb;
    --bs-alert-border-color: #baecdc;
    --bs-alert-link-color: #0c4128;
}

.alert-danger {
    --bs-alert-color: #842029;
    --bs-alert-bg: #f8d7da;
    --bs-alert-border-color: #f5c2c7;
    --bs-alert-link-color: #6a1a21;
}

.alert-warning {
    --bs-alert-color: #664d03;
    --bs-alert-bg: #fff3cd;
    --bs-alert-border-color: #ffecb5;
    --bs-alert-link-color: #523e02;
}

.alert-info {
    --bs-alert-color: #055160;
    --bs-alert-bg: #cff4fc;
    --bs-alert-border-color: #b6effb;
    --bs-alert-link-color: #04414d;
}

/* Navegación y tabs */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--color-brand-green);
}

.nav-tabs .nav-link.active {
    color: var(--color-brand-green);
    border-color: var(--color-brand-green) var(--color-brand-green) #fff;
}

/* Progress bars */
.progress-bar {
    background-color: var(--color-brand-green);
}

.progress-bar.bg-success {
    background-color: var(--color-brand-green) !important;
}

.progress-bar.bg-danger {
    background-color: var(--color-brand-pink) !important;
}

.progress-bar.bg-warning {
    background-color: var(--color-brand-orange) !important;
}

.progress-bar.bg-info {
    background-color: var(--color-brand-turquoise) !important;
}

/* Bordes con colores del tema */
.border-primary {
    border-color: var(--color-brand-green) !important;
}

.border-success {
    border-color: var(--color-brand-green) !important;
}

.border-danger {
    border-color: var(--color-brand-pink) !important;
}

.border-warning {
    border-color: var(--color-brand-orange) !important;
}

.border-info {
    border-color: var(--color-brand-turquoise) !important;
}

/* Spinners */
.spinner-border.text-primary {
    color: var(--color-brand-green) !important;
}

.spinner-border.text-success {
    color: var(--color-brand-green) !important;
}

.spinner-border.text-danger {
    color: var(--color-brand-pink) !important;
}

.spinner-border.text-warning {
    color: var(--color-brand-orange) !important;
}

.spinner-border.text-info {
    color: var(--color-brand-turquoise) !important;
}

/* ===== GRADIENTES ESPECIALES DEL TEMA ===== */
.gradient-primary {
    background: linear-gradient(135deg, var(--color-brand-green), var(--color-brand-turquoise));
}

.gradient-success {
    background: linear-gradient(135deg, var(--color-brand-green), var(--color-brand-light-green));
}

.gradient-danger {
    background: linear-gradient(135deg, var(--color-brand-pink), #d02030);
}

.gradient-brand {
    background: linear-gradient(135deg, var(--color-brand-green), var(--color-brand-turquoise), var(--color-brand-pink));
}

/* Header del logo con gradiente completo */
.logo-gradient {
    background: linear-gradient(90deg, var(--color-brand-green), var(--color-brand-turquoise), var(--color-brand-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

/* ===== ELEMENTOS ESPECÍFICOS DE LA APLICACIÓN ===== */

/* Sidebar personalizado */
.sidebar-option-selected {
    background: linear-gradient(135deg, var(--color-brand-green), var(--color-brand-turquoise)) !important;
    color: white !important;
    font-weight: bold !important;
}

/* Title shadow con nuevos colores */
.title-shadow {
    background: linear-gradient(135deg, var(--color-brand-green), var(--color-brand-turquoise), var(--color-brand-pink)) !important;
}

/* Botones flotantes y especiales */
.btn-floating {
    background: linear-gradient(135deg, var(--color-brand-green), var(--color-brand-turquoise));
    border: none;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(82, 182, 154, 0.3);
    transition: all 0.3s ease;
}

.btn-floating:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(82, 182, 154, 0.4);
    color: white;
}

/* Tablas con header del tema */
.table-branded thead {
    background: linear-gradient(135deg, var(--color-brand-turquoise), var(--color-brand-pink));
    color: white;
}

/* Cards especiales con bordes del tema */
.card-branded {
    border-top: 4px solid;
    border-image: linear-gradient(90deg, var(--color-brand-green), var(--color-brand-turquoise), var(--color-brand-pink)) 1;
}

/* ===== MODO RESPONSIVE ===== */
@media (max-width: 768px) {
    .gradient-brand {
        background: var(--color-brand-green);
    }

    .btn-floating {
        width: 48px;
        height: 48px;
    }
}

/* ===== ANIMACIONES DEL TEMA ===== */
@keyframes brandPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(82, 182, 154, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(82, 182, 154, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(82, 182, 154, 0);
    }
}

.pulse-brand {
    animation: brandPulse 2s infinite;
}

/* ===== UTILIDADES ESPECÍFICAS DEL TEMA ===== */
.bg-brand-light {
    background-color: #f8fffe !important;
}

.text-brand-green {
    color: var(--color-brand-green) !important;
}

.text-brand-pink {
    color: var(--color-brand-pink) !important;
}

.text-brand-turquoise {
    color: var(--color-brand-turquoise) !important;
}

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

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

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