/*!
 * EventsCorePro CSS Framework
 * Sistema de diseño corporativo para el sistema de eventos
 * Sobreescribe Bootstrap con paleta corporativa y componentes personalizados
 * 
 * @version 1.0.0
 * @author Senior Developer
 * @date 2025-10-10
 */

/* ========================================
   VARIABLES CSS CORPORATIVAS
   ======================================== */
:root {
    /* Paleta de colores corporativa */
    --ecp-primary: #001848;
    --ecp-primary-light: #301860;
    --ecp-primary-medium: #483078;
    --ecp-primary-soft: #604878;
    --ecp-primary-accent: #906090;
    
    /* Estados funcionales */
    --ecp-success: #059669;
    --ecp-success-light: #16C60C;
    --ecp-warning: #d97706;
    --ecp-warning-light: #f59e0b;
    --ecp-danger: #dc2626;
    --ecp-danger-light: #ef4444;
    --ecp-info: #0284c7;
    --ecp-info-light: #0ea5e9;
    
    /* Colores alternativos para estadísticas - Escala corporativa */
    --ecp-alter1: #001848;      /* Base corporativa */
    --ecp-alter1-light: #1a2454;
    --ecp-alter2: #183060;      /* Escalón 2 */
    --ecp-alter2-light: #2a3c6c;
    --ecp-alter3: #304866;      /* Escalón 3 */
    --ecp-alter3-light: #425472;
    --ecp-alter4: #48546c;      /* Escalón 4 */
    --ecp-alter4-light: #5a6078;
    --ecp-alter5: #546072;      /* Escalón 5 */
    --ecp-alter5-light: #666c7e;
    --ecp-alter6: #604878;      /* Tope corporativo */
    --ecp-alter6-light: #726084;
    
    /* Grises corporativos */
    --ecp-gray-50: #f8fafc;
    --ecp-gray-100: #f1f5f9;
    --ecp-gray-200: #e2e8f0;
    --ecp-gray-300: #cbd5e1;
    --ecp-gray-400: #94a3b8;
    --ecp-gray-500: #64748b;
    --ecp-gray-600: #475569;
    --ecp-gray-700: #334155;
    --ecp-gray-800: #1e293b;
    --ecp-gray-900: #0f172a;
    
    /* Sistema de espaciado */
    --ecp-spacing-xs: 0.25rem;   /* 4px */
    --ecp-spacing-sm: 0.5rem;    /* 8px */
    --ecp-spacing-md: 0.75rem;   /* 12px */
    --ecp-spacing-lg: 1rem;      /* 16px */
    --ecp-spacing-xl: 1.5rem;    /* 24px */
    --ecp-spacing-2xl: 2rem;     /* 32px */
    --ecp-spacing-3xl: 3rem;     /* 48px */
    
    /* Sistema de border radius */
    --ecp-radius-xs: 0.25rem;    /* 4px */
    --ecp-radius-sm: 0.5rem;     /* 8px */
    --ecp-radius-md: 0.75rem;    /* 12px */
    --ecp-radius-lg: 1rem;       /* 16px */
    --ecp-radius-xl: 1.5rem;     /* 24px */
    --ecp-radius-full: 9999px;
    
    /* Sistema de sombras */
    --ecp-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ecp-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --ecp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --ecp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --ecp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    
    /* Sombras corporativas */
    --ecp-shadow-primary: 0 4px 20px rgba(0, 24, 72, 0.15);
    --ecp-shadow-primary-lg: 0 8px 35px rgba(0, 24, 72, 0.25);
    
    /* Tipografía */
    --ecp-font-weight-normal: 400;
    --ecp-font-weight-medium: 500;
    --ecp-font-weight-semibold: 600;
    --ecp-font-weight-bold: 700;
    
    /* Transiciones */
    --ecp-transition-fast: 0.15s ease-out;
    --ecp-transition-base: 0.25s ease-out;
    --ecp-transition-slow: 0.35s ease-out;
}

/* Botones de acción redondos */
.ecp-action-buttons {
    flex-wrap: nowrap !important;
}

.ecp-action-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid var(--ecp-gray-300) !important;
    background-color: white !important;
    color: var(--ecp-gray-600) !important;
    transition: all var(--ecp-transition-base) !important;
    text-decoration: none !important;
    position: relative !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.ecp-action-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    text-decoration: none !important;
}

.ecp-action-btn i {
    font-size: 0.875rem !important;
}

/* Botón Ver - Azul */
.ecp-action-view:hover {
    border-color: var(--ecp-info) !important;
    background-color: var(--ecp-info) !important;
    color: white !important;
}

/* Botón Editar - Verde */
.ecp-action-edit:hover {
    border-color: var(--ecp-success) !important;
    background-color: var(--ecp-success) !important;
    color: white !important;
}

/* Botón Eliminar - Rojo */
.ecp-action-delete:hover {
    border-color: var(--ecp-danger) !important;
    background-color: var(--ecp-danger) !important;
    color: white !important;
}

/* Animación suave para todos los botones */
.ecp-action-btn:active {
    transform: translateY(0) scale(0.95) !important;
}

/* Asegurar que los tooltips aparezcan por encima */
.tooltip {
    z-index: 10000 !important;
}

.tooltip-inner {
    background-color: var(--ecp-primary) !important;
    color: white !important;
    border-radius: var(--ecp-radius-sm) !important;
    font-size: 0.75rem !important;
    padding: 0.375rem 0.75rem !important;
}

.tooltip .tooltip-arrow::before {
    border-top-color: var(--ecp-primary) !important;
}

/* ========================================
   DROPDOWNS Y MENÚS DESPLEGABLES
   ======================================== */

/* Dropdown mejorado con z-index alto */
.dropdown {
    position: relative !important;
}

.dropdown-menu {
    z-index: 9999 !important;
    border: 1px solid rgba(0, 24, 72, 0.15) !important;
    border-radius: var(--ecp-radius-md) !important;
    box-shadow: var(--ecp-shadow-xl) !important;
    padding: var(--ecp-spacing-sm) 0 !important;
    margin-top: 4px !important;
    min-width: 200px !important;
}

.dropdown-menu.show {
    z-index: 9999 !important;
    transform: none !important;
    position: absolute !important;
}

.dropdown-item {
    padding: var(--ecp-spacing-sm) var(--ecp-spacing-lg) !important;
    font-size: 0.9rem !important;
    color: var(--ecp-gray-700) !important;
    transition: all var(--ecp-transition-base) !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    text-align: left !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ecp-gray-100) !important;
    color: var(--ecp-primary) !important;
    transform: translateX(2px) !important;
}

.dropdown-item.text-danger:hover {
    background-color: rgba(220, 38, 38, 0.1) !important;
    color: var(--ecp-danger) !important;
}

.dropdown-item i {
    width: 16px !important;
    text-align: center !important;
}

.dropdown-divider {
    margin: var(--ecp-spacing-sm) 0 !important;
    border-color: var(--ecp-gray-200) !important;
}

/* Botón dropdown personalizado */
.dropdown-toggle {
    border-color: var(--ecp-gray-300) !important;
    transition: all var(--ecp-transition-base) !important;
}

.dropdown-toggle:hover {
    border-color: var(--ecp-primary) !important;
}

.dropdown-toggle:focus {
    box-shadow: 0 0 0 3px rgba(0, 24, 72, 0.1) !important;
    border-color: var(--ecp-primary) !important;
}

.dropdown-toggle::after {
    margin-left: 0.5rem !important;
}

/* Asegurar que dropdowns en tarjetas tengan prioridad máxima */
.card .dropdown-menu,
.ecp-evento-card .dropdown-menu {
    z-index: 10000 !important;
    position: absolute !important;
}

/* Contenedor de eventos con z-index controlado */
#eventosContainer {
    position: relative !important;
    z-index: 1 !important;
}

.ecp-evento-item {
    position: relative !important;
    z-index: 2 !important;
}

.ecp-evento-card {
    position: relative !important;
    z-index: 3 !important;
}

/* Cuando el dropdown está abierto, elevar toda la tarjeta */
.ecp-evento-card:has(.dropdown-menu.show) {
    z-index: 10001 !important;
}

/* Fallback para navegadores que no soportan :has() */
.ecp-evento-card.dropdown-open {
    z-index: 10001 !important;
}

/* Banner horizontal con texto deslizante para eventos en vivo */
.ecp-live-banner {
    position: relative !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-radius: 25px !important;
    padding: 0.5rem 1rem !important;
    margin-top: 0.75rem !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    height: 25px !important;
    display: flex !important;
    align-items: center !important;
}

.ecp-live-banner::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    animation: ecp-banner-shine 4s ease-in-out infinite !important;
}

.ecp-live-scrolling-container {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

.ecp-live-scrolling-text {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    animation: ecp-scroll-infinite 20s linear infinite !important;
    color: white !important;
    font-weight: var(--ecp-font-weight-bold) !important;
    font-size: 0.75rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 0.5px !important;
}

.ecp-live-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    background: white !important;
    border-radius: 50% !important;
    margin-right: 0.75rem !important;
    animation: ecp-pulse-dot 1.5s ease-in-out infinite !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important;
    flex-shrink: 0 !important;
}

.ecp-live-content {
    display: flex !important;
    align-items: center !important;
    gap: 3rem !important;
    margin-right: 3rem !important;
}

.ecp-live-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
}

/* Animaciones mejoradas para scroll infinito */
@keyframes ecp-scroll-infinite {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes ecp-banner-shine {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes ecp-pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
        box-shadow: 0 0 20px rgba(255, 255, 255, 1);
    }
}

/* Hover effect para el banner */
.ecp-evento-card:hover .ecp-live-banner {
    transform: scale(1.02) !important;
    box-shadow: 0 6px 25px rgba(16, 185, 129, 0.5) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .ecp-live-banner {
        margin-top: 0.5rem !important;
        padding: 0.4rem 0.8rem !important;
        height: 35px !important;
    }

    /* Ocultar icono del usuario en el navbar en pantallas móviles para evitar duplicados */
    .navbar .fas.fa-user-circle {
        display: none !important;
    }
    
    .ecp-live-scrolling-text {
        font-size: 0.8rem !important;
        animation-duration: 18s !important;
    }
    
    .ecp-live-content {
        gap: 2rem !important;
        margin-right: 2rem !important;
    }
}

/* ========================================
   DASHBOARD Y LISTADOS DE EVENTOS
   ======================================== */

/* ========================================
   DASHBOARD Y LISTADOS DE EVENTOS
   ======================================== */

/* Hover cards generales */
.hover-card {
    transition: all var(--ecp-transition-base) !important;
}

.hover-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15) !important;
}

/* Tarjetas de eventos profesionales */
.ecp-evento-item {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: all 0.4s ease !important;
}

.ecp-evento-item.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.ecp-evento-card {
    transition: all var(--ecp-transition-base) !important;
    border: 1px solid rgba(0, 24, 72, 0.1) !important;
    border-radius: var(--ecp-radius-lg) !important;
    overflow: hidden !important;
}

.ecp-evento-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--ecp-shadow-xl) !important;
    border-color: var(--ecp-primary-accent) !important;
}

/* Logo de eventos con dimensiones fijas */
.ecp-evento-logo-container {
    width: 250px !important;
    height: 110px !important;
    border-radius: var(--ecp-radius-md) !important;
    overflow: hidden !important;
    border: 2px solid var(--ecp-gray-200) !important;
    background: var(--ecp-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.ecp-evento-logo-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    transition: all var(--ecp-transition-base) !important;
}

.ecp-evento-logo-link:hover {
    transform: scale(1.05) !important;
}

.ecp-evento-logo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transition: all var(--ecp-transition-base) !important;
    display: block !important;
}

.ecp-evento-card:hover .ecp-evento-logo-link {
    transform: scale(1.02) !important;
}

.ecp-evento-card:hover .ecp-evento-logo {
    filter: brightness(1.1) !important;
}

.evento-nombre {
    color: var(--ecp-primary) !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
}

/* Sidebar sticky para filtros */
.sticky-top {
    position: sticky !important;
    top: 20px !important;
    z-index: 1020 !important;
}

/* Filtros de estado mejorados */
.btn[data-filter] {
    transition: all var(--ecp-transition-base) !important;
    text-align: left !important;
    border-radius: var(--ecp-radius-md) !important;
    padding: var(--ecp-spacing-md) var(--ecp-spacing-lg) !important;
    font-weight: var(--ecp-font-weight-medium) !important;
}

.btn[data-filter]:not(.active):hover {
    border-color: var(--ecp-primary-accent) !important;
    transform: translateX(3px) !important;
}

.btn[data-filter].active {
    background: linear-gradient(135deg, var(--ecp-primary) 0%, var(--ecp-primary-light) 100%) !important;
    border-color: var(--ecp-primary) !important;
    color: white !important;
    box-shadow: var(--ecp-shadow-primary) !important;
}

.btn[data-filter].active .badge {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

/* Buscador específico de eventos */
#filtroEventos {
    border-radius: var(--ecp-radius-md) !important;
    border: 2px solid var(--ecp-gray-200) !important;
    transition: all var(--ecp-transition-base) !important;
}

#filtroEventos:focus {
    border-color: var(--ecp-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 24, 72, 0.1) !important;
}

/* ========================================
   ELEMENTOS BASE Y LAYOUT
   ======================================== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    background-color: var(--ecp-gray-50) !important;
    color: var(--ecp-primary-light) !important;
    line-height: 1.6 !important;
}

.main-content {
    padding: var(--ecp-spacing-2xl) 0 !important;
    min-height: calc(100vh - 120px) !important;
}

/* ========================================
   NAVBAR CORPORATIVA
   ======================================== */
.navbar {
    background: linear-gradient(135deg, var(--ecp-primary) 0%, var(--ecp-primary-light) 100%) !important;
    box-shadow: var(--ecp-shadow-primary) !important;
    border: none !important;
    padding: var(--ecp-spacing-md) 0 !important;
}

.navbar-brand {
    font-weight: var(--ecp-font-weight-bold) !important;
    font-size: 1.3rem !important;
    color: white !important;
    transition: all var(--ecp-transition-base) !important;
}

.navbar-brand:hover {
    color: var(--ecp-primary-accent) !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: var(--ecp-font-weight-medium) !important;
    transition: all var(--ecp-transition-base) !important;
}

.navbar-nav .nav-link:hover {
    color: white !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5) !important;
}

.navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
}

/* ========================================
   BADGES DE ROLES
   ======================================== */
.badge-role {
    padding: var(--ecp-spacing-sm) var(--ecp-spacing-md) !important;
    border-radius: var(--ecp-radius-full) !important;
    font-weight: var(--ecp-font-weight-medium) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.badge-admin { 
    background: var(--ecp-danger) !important;
    color: white !important;
}

.badge-jurado { 
    background: var(--ecp-info) !important;
    color: white !important;
}

.badge-visor { 
    background: var(--ecp-success) !important;
    color: white !important;
}

/* ========================================
   ALERTAS DE IMPERSONACIÓN
   ======================================== */
.impersonation-alert {
    background: linear-gradient(135deg, var(--ecp-warning-light) 0%, var(--ecp-warning) 100%) !important;
    color: white !important;
    padding: var(--ecp-spacing-lg) !important;
    text-align: center !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1040 !important;
    box-shadow: var(--ecp-shadow-lg) !important;
    border-bottom: 3px solid var(--ecp-warning) !important;
}

.impersonation-alert .btn {
    font-size: 0.85rem !important;
    padding: var(--ecp-spacing-xs) var(--ecp-spacing-sm) !important;
}

/* ========================================
   DROPDOWNS CORPORATIVOS
   ======================================== */
.dropdown-menu {
    border-radius: var(--ecp-radius-lg) !important;
    border: none !important;
    box-shadow: var(--ecp-shadow-xl) !important;
    padding: var(--ecp-spacing-sm) !important;
}

.dropdown-item {
    border-radius: var(--ecp-radius-md) !important;
    margin: var(--ecp-spacing-xs) 0 !important;
    padding: var(--ecp-spacing-sm) var(--ecp-spacing-lg) !important;
    transition: all var(--ecp-transition-fast) !important;
    font-weight: var(--ecp-font-weight-medium) !important;
}

.dropdown-item:hover {
    background: linear-gradient(135deg, var(--ecp-primary) 0%, var(--ecp-primary-light) 100%) !important;
    color: white !important;
    transform: translateX(4px) !important;
}

.dropdown-divider {
    border-color: var(--ecp-gray-200) !important;
    margin: var(--ecp-spacing-sm) 0 !important;
}

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

/* ========================================
   BOTONES CORPORATIVOS
   ======================================== */

/* Botón Primary */
.btn-primary {
    background: linear-gradient(135deg, var(--ecp-primary) 0%, var(--ecp-primary-light) 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
    border-radius: var(--ecp-radius-md) !important;
    transition: all var(--ecp-transition-base) !important;
    box-shadow: var(--ecp-shadow-md) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background: linear-gradient(135deg, var(--ecp-primary-light) 0%, var(--ecp-primary-medium) 100%) !important;
    color: white !important;
    border: none !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--ecp-shadow-primary-lg) !important;
}

/* Botón Warning (usando colores corporativos) */
.btn-warning {
    background: linear-gradient(135deg, var(--ecp-primary-soft) 0%, var(--ecp-primary-accent) 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
    border-radius: var(--ecp-radius-md) !important;
    transition: all var(--ecp-transition-base) !important;
    box-shadow: var(--ecp-shadow-md) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    background: linear-gradient(135deg, var(--ecp-primary-medium) 0%, var(--ecp-primary-soft) 100%) !important;
    color: white !important;
    border: none !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--ecp-shadow-primary-lg) !important;
}

/* Botón Success */
.btn-success {
    background: linear-gradient(135deg, var(--ecp-success) 0%, var(--ecp-success-light) 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
    border-radius: var(--ecp-radius-md) !important;
    transition: all var(--ecp-transition-base) !important;
    box-shadow: var(--ecp-shadow-md) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background: linear-gradient(135deg, var(--ecp-success-light) 0%, var(--ecp-success) 100%) !important;
    color: white !important;
    border: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(5, 150, 105, 0.3) !important;
}

/* Botón Dark */
.btn-dark {
    background: linear-gradient(135deg, var(--ecp-primary) 0%, var(--ecp-gray-800) 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
    border-radius: var(--ecp-radius-md) !important;
    transition: all var(--ecp-transition-base) !important;
    box-shadow: var(--ecp-shadow-md) !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active {
    background: linear-gradient(135deg, var(--ecp-gray-800) 0%, var(--ecp-primary) 100%) !important;
    color: white !important;
    border: none !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--ecp-shadow-primary-lg) !important;
}

/* Botones Outline */
.btn-outline-primary {
    border: 2px solid var(--ecp-primary) !important;
    color: var(--ecp-primary) !important;
    background: transparent !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
    border-radius: var(--ecp-radius-md) !important;
    transition: all var(--ecp-transition-base) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background: var(--ecp-primary) !important;
    border-color: var(--ecp-primary) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--ecp-shadow-primary) !important;
}

.btn-outline-info {
    border: 2px solid var(--ecp-primary-light) !important;
    color: var(--ecp-primary-light) !important;
    background: transparent !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
    border-radius: var(--ecp-radius-md) !important;
    transition: all var(--ecp-transition-base) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active {
    background: var(--ecp-primary-light) !important;
    border-color: var(--ecp-primary-light) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--ecp-shadow-primary) !important;
}

/* Tamaños de botones */
.btn-lg {
    border-radius: var(--ecp-radius-lg) !important;
    padding: var(--ecp-spacing-lg) var(--ecp-spacing-2xl) !important;
    font-size: 1.125rem !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
}

.btn-sm {
    border-radius: var(--ecp-radius-sm) !important;
    padding: var(--ecp-spacing-sm) var(--ecp-spacing-md) !important;
    font-size: 0.875rem !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
}

/* ========================================
   BADGES CORPORATIVOS
   ======================================== */
.badge {
    font-weight: var(--ecp-font-weight-semibold) !important;
    letter-spacing: 0.025em !important;
    border-radius: var(--ecp-radius-md) !important;
}

.badge.bg-primary {
    background: linear-gradient(135deg, var(--ecp-primary) 0%, var(--ecp-primary-light) 100%) !important;
    color: white !important;
}

.badge.bg-secondary {
    background: linear-gradient(135deg, var(--ecp-primary-soft) 0%, var(--ecp-primary-accent) 100%) !important;
    color: white !important;
}

.badge.bg-success {
    background: linear-gradient(135deg, var(--ecp-success) 0%, var(--ecp-success-light) 100%) !important;
    color: white !important;
}

.badge.bg-warning {
    background: linear-gradient(135deg, var(--ecp-warning) 0%, var(--ecp-warning-light) 100%) !important;
    color: white !important;
}

.badge.bg-danger {
    background: linear-gradient(135deg, var(--ecp-danger) 0%, var(--ecp-danger-light) 100%) !important;
    color: white !important;
}

.badge.bg-info {
    background: linear-gradient(135deg, var(--ecp-info) 0%, var(--ecp-info-light) 100%) !important;
    color: white !important;
}

/* ========================================
   CARDS CORPORATIVAS
   ======================================== */
.card {
    border-radius: var(--ecp-radius-lg) !important;
    box-shadow: var(--ecp-shadow-md) !important;
    border: 1px solid var(--ecp-gray-200) !important;
    overflow: hidden !important;
    transition: all var(--ecp-transition-base) !important;
}

.card:hover {
    box-shadow: var(--ecp-shadow-xl) !important;
    transform: translateY(-4px) !important;
}

.card-header {
    background: linear-gradient(135deg, var(--ecp-primary) 0%, var(--ecp-primary-light) 100%) !important;
    border-bottom: 2px solid var(--ecp-primary-light) !important;
    padding: var(--ecp-spacing-lg) var(--ecp-spacing-xl) !important;
    font-weight: var(--ecp-font-weight-bold) !important;
    color: white !important;
    font-size: 1.125rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: white !important;
    font-weight: var(--ecp-font-weight-bold) !important;
    margin-bottom: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.card-header i {
    color: white !important;
    opacity: 0.9 !important;
}

.card-header.bg-info {
    background: linear-gradient(135deg, var(--ecp-primary-light) 0%, var(--ecp-primary-medium) 100%) !important;
    color: white !important;
    border-bottom-color: var(--ecp-primary-medium) !important;
}

.card-body {
    padding: var(--ecp-spacing-xl) !important;
}

/* Cards especiales */
.card.border-success {
    border-color: var(--ecp-success) !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15) !important;
}

.card.border-success .card-header {
    background: linear-gradient(135deg, var(--ecp-success) 0%, var(--ecp-success-light) 100%) !important;
    border-bottom-color: var(--ecp-success-light) !important;
}

.card.border-success:hover {
    box-shadow: 0 8px 25px rgba(5, 150, 105, 0.25) !important;
}

/* ========================================
   TABLAS CORPORATIVAS
   ======================================== */
.table {
    border-radius: var(--ecp-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--ecp-shadow-md) !important;
}

.table thead {
    background: linear-gradient(135deg, var(--ecp-primary-accent) 0%, var(--ecp-primary-soft) 100%) !important;
}

.table thead th {
    border-bottom: 2px solid var(--ecp-primary-soft) !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: var(--ecp-spacing-lg) !important;
}

.table tbody tr {
    transition: all var(--ecp-transition-fast) !important;
}

.table tbody tr:hover {
    background: linear-gradient(135deg, rgba(0, 24, 72, 0.05) 0%, rgba(48, 24, 96, 0.05) 100%) !important;
    transform: scale(1.01) !important;
    box-shadow: var(--ecp-shadow-primary) !important;
}

.table tbody td {
    padding: var(--ecp-spacing-lg) !important;
    vertical-align: middle !important;
    border-color: rgba(0, 24, 72, 0.1) !important;
    color: var(--ecp-primary-light) !important;
}

/* ========================================
   NAVEGACIÓN (TABS)
   ======================================== */
.nav-tabs {
    border: none !important;
    background: linear-gradient(135deg, var(--ecp-primary-accent) 0%, var(--ecp-primary-soft) 100%) !important;
    border-radius: var(--ecp-radius-lg) !important;
    padding: var(--ecp-spacing-sm) !important;
    box-shadow: var(--ecp-shadow-primary) !important;
}

.nav-tabs .nav-item {
    margin-bottom: 0 !important;
}

.nav-tabs .nav-link {
    color: var(--ecp-primary) !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
    border: none !important;
    border-radius: var(--ecp-radius-md) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    transition: all var(--ecp-transition-base) !important;
    margin: var(--ecp-spacing-xs) !important;
}

.nav-tabs .nav-link:hover {
    color: white !important;
    background: linear-gradient(135deg, var(--ecp-primary-light) 0%, var(--ecp-primary-medium) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--ecp-shadow-primary) !important;
}

.nav-tabs .nav-link.active {
    color: white !important;
    background: linear-gradient(135deg, var(--ecp-primary) 0%, var(--ecp-primary-light) 100%) !important;
    transform: translateY(-4px) !important;
    box-shadow: var(--ecp-shadow-primary-lg) !important;
}

/* ========================================
   LISTAS Y GRUPOS
   ======================================== */
.list-group {
    border-radius: var(--ecp-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--ecp-shadow-primary) !important;
}

.list-group-item {
    border: none !important;
    border-bottom: 1px solid rgba(0, 24, 72, 0.1) !important;
    padding: var(--ecp-spacing-lg) !important;
    transition: all var(--ecp-transition-fast) !important;
}

.list-group-item:hover {
    background: linear-gradient(135deg, rgba(0, 24, 72, 0.05) 0%, rgba(48, 24, 96, 0.05) 100%) !important;
    transform: translateX(4px) !important;
    border-left: 4px solid var(--ecp-primary) !important;
}

.list-group-item:last-child {
    border-bottom: none !important;
}

/* ========================================
   FORMULARIOS CORPORATIVOS
   ======================================== */
.form-control {
    border-radius: var(--ecp-radius-md) !important;
    border: 2px solid var(--ecp-gray-200) !important;
    transition: all var(--ecp-transition-base) !important;
    padding: var(--ecp-spacing-md) var(--ecp-spacing-lg) !important;
}

.form-control:focus {
    border-color: var(--ecp-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 24, 72, 0.1) !important;
}

.form-select {
    border-radius: var(--ecp-radius-md) !important;
    border: 2px solid var(--ecp-gray-200) !important;
    transition: all var(--ecp-transition-base) !important;
}

.form-select:focus {
    border-color: var(--ecp-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 24, 72, 0.1) !important;
}

/* ========================================
   ALERTAS CORPORATIVAS
   ======================================== */
.alert {
    border-radius: var(--ecp-radius-lg) !important;
    border: none !important;
    font-weight: var(--ecp-font-weight-medium) !important;
    box-shadow: var(--ecp-shadow-md) !important;
}

.alert-success {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%) !important;
    color: var(--ecp-success) !important;
    border-left: 4px solid var(--ecp-success) !important;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
    color: var(--ecp-warning) !important;
    border-left: 4px solid var(--ecp-warning) !important;
}

.alert-danger {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(239, 68, 68, 0.1) 100%) !important;
    color: var(--ecp-danger) !important;
    border-left: 4px solid var(--ecp-danger) !important;
}

.alert-info {
    background: linear-gradient(135deg, rgba(0, 24, 72, 0.1) 0%, rgba(48, 24, 96, 0.1) 100%) !important;
    color: var(--ecp-primary) !important;
    border-left: 4px solid var(--ecp-primary) !important;
}

/* ========================================
   TIPOGRAFÍA CORPORATIVA
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--ecp-primary) !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
}

.text-primary {
    color: var(--ecp-primary) !important;
}

.text-muted {
    color: var(--ecp-primary-soft) !important;
}

.text-secondary {
    color: var(--ecp-primary-light) !important;
}

/* ========================================
   ESTADOS ESPECIALES
   ======================================== */
.ecp-empty-state {
    background: linear-gradient(135deg, rgba(0, 24, 72, 0.05) 0%, rgba(48, 24, 96, 0.05) 100%) !important;
    border: 2px dashed var(--ecp-primary-accent) !important;
    border-radius: var(--ecp-radius-lg) !important;
    padding: var(--ecp-spacing-3xl) var(--ecp-spacing-xl) !important;
    text-align: center !important;
    margin: var(--ecp-spacing-xl) 0 !important;
}

.ecp-empty-state i {
    font-size: 3rem !important;
    color: var(--ecp-primary-accent) !important;
    margin-bottom: var(--ecp-spacing-xl) !important;
}

.ecp-empty-state h5 {
    color: var(--ecp-primary) !important;
    font-size: 1.25rem !important;
    margin-bottom: var(--ecp-spacing-sm) !important;
}

.ecp-empty-state p {
    color: var(--ecp-primary-soft) !important;
    margin-bottom: var(--ecp-spacing-xl) !important;
}

/* ========================================
   ANIMACIONES Y TRANSICIONES
   ======================================== */
@keyframes ecp-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

.ecp-pulse {
    animation: ecp-pulse 2s infinite;
}

@keyframes ecp-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ========================================
   UTILIDADES CORPORATIVAS
   ======================================== */
.ecp-gradient-primary {
    background: linear-gradient(135deg, var(--ecp-primary) 0%, var(--ecp-primary-light) 100%) !important;
}

.ecp-gradient-soft {
    background: linear-gradient(135deg, var(--ecp-primary-soft) 0%, var(--ecp-primary-accent) 100%) !important;
}

.ecp-shadow-primary {
    box-shadow: var(--ecp-shadow-primary) !important;
}

.ecp-shadow-primary-lg {
    box-shadow: var(--ecp-shadow-primary-lg) !important;
}

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

.ecp-bg-primary {
    background-color: var(--ecp-primary) !important;
    color: white !important;
}

.ecp-text-primary {
    color: var(--ecp-primary) !important;
}

/* ========================================
   FOOTER CORPORATIVO
   ======================================== */
.ecp-footer {
    background: linear-gradient(135deg, var(--ecp-gray-800) 0%, var(--ecp-primary) 100%) !important;
    color: white !important;
    padding: var(--ecp-spacing-xl) 0 !important;
    text-align: center !important;
    margin-top: var(--ecp-spacing-3xl) !important;
    border-top: 3px solid var(--ecp-primary-accent) !important;
    box-shadow: var(--ecp-shadow-primary) !important;
}

.ecp-footer-text {
    font-weight: var(--ecp-font-weight-medium) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.95rem !important;
}

.ecp-author-link {
    text-decoration: none !important;
    color: var(--ecp-primary-accent) !important;
    transition: all var(--ecp-transition-base) !important;
}

.ecp-author-link:hover {
    color: white !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5) !important;
}

.ecp-version {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: var(--ecp-font-weight-normal) !important;
}

/* ========================================
   SWEETALERT2 CORPORATIVO
   ======================================== */

/* Popup principal */
.swal2-popup {
    border-radius: var(--ecp-radius-lg) !important;
    box-shadow: 0 20px 60px rgba(0, 24, 72, 0.3) !important;
    border: none !important;
    background: white !important;
    padding: 2rem !important;
    max-width: 480px !important;
}

/* Overlay/backdrop */
.swal2-backdrop {
    background-color: rgba(0, 24, 72, 0.4) !important;
    backdrop-filter: blur(4px) !important;
}

/* Icono de advertencia personalizado */
.swal2-icon.swal2-warning {
    border-color: var(--ecp-warning) !important;
    color: var(--ecp-warning) !important;
    font-size: 1.5rem !important;
    width: 125px !important;
    height: 125px !important;
    margin: 0 auto 1.5rem !important;
}

.swal2-icon.swal2-warning .swal2-icon-content {
    color: var(--ecp-warning) !important;
    font-weight: var(--ecp-font-weight-bold) !important;
}

/* Icono de error personalizado */
.swal2-icon.swal2-error {
    border-color: var(--ecp-danger) !important;
    color: var(--ecp-danger) !important;
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 1.5rem !important;
}

/* Icono de éxito personalizado */
.swal2-icon.swal2-success {
    border-color: var(--ecp-success) !important;
    color: var(--ecp-success) !important;
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 1.5rem !important;
}

/* Título del popup */
.swal2-title {
    color: var(--ecp-primary) !important;
    font-weight: var(--ecp-font-weight-bold) !important;
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.4 !important;
}

/* Contenido/texto del popup */
.swal2-html-container {
    color: var(--ecp-gray-700) !important;
    font-weight: var(--ecp-font-weight-medium) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
}

/* Contenedor de botones */
.swal2-actions {
    margin-top: 2rem !important;
    gap: 1rem !important;
}

/* Botón confirmar/eliminar */
.swal2-confirm {
    background: linear-gradient(135deg, var(--ecp-danger) 0%, var(--ecp-danger-light) 100%) !important;
    border: none !important;
    border-radius: var(--ecp-radius-md) !important;
    color: white !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
    padding: 0.75rem 2rem !important;
    font-size: 0.95rem !important;
    transition: all var(--ecp-transition-base) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

.swal2-confirm:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4) !important;
    background: linear-gradient(135deg, #b91c1c 0%, var(--ecp-danger) 100%) !important;
}

.swal2-confirm:active {
    transform: translateY(0) !important;
}

/* Botón cancelar */
.swal2-cancel {
    background: white !important;
    border: 2px solid var(--ecp-gray-300) !important;
    border-radius: var(--ecp-radius-md) !important;
    color: var(--ecp-gray-700) !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
    padding: 0.75rem 2rem !important;
    font-size: 0.95rem !important;
    transition: all var(--ecp-transition-base) !important;
}

.swal2-cancel:hover {
    background: var(--ecp-gray-50) !important;
    border-color: var(--ecp-primary) !important;
    color: var(--ecp-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 24, 72, 0.1) !important;
}

.swal2-cancel:active {
    transform: translateY(0) !important;
}

/* Toast notifications */
.swal2-toast {
    border-radius: var(--ecp-radius-md) !important;
    box-shadow: var(--ecp-shadow-xl) !important;
    border-left: 4px solid var(--ecp-success) !important;
    background: white !important;
    padding: 1rem 1.5rem !important;
}

.swal2-toast .swal2-title {
    color: var(--ecp-primary) !important;
    font-weight: var(--ecp-font-weight-semibold) !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
}

.swal2-toast .swal2-html-container {
    color: var(--ecp-gray-600) !important;
    font-size: 0.875rem !important;
    margin: 0 !important;
}

/* Popup de confirmación de eliminación específico */
.ecp-delete-confirmation .swal2-icon.swal2-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 3px solid var(--ecp-warning) !important;
    border-radius: 50% !important;
}

.ecp-delete-confirmation .swal2-title {
    color: var(--ecp-danger) !important;
}

.ecp-delete-confirmation .swal2-html-container {
    color: var(--ecp-gray-800) !important;
}

/* Animaciones de entrada y salida */
.swal2-popup.swal2-show {
    animation: ecp-swal-show 0.3s ease-out !important;
}

.swal2-popup.swal2-hide {
    animation: ecp-swal-hide 0.2s ease-in !important;
}

@keyframes ecp-swal-show {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes ecp-swal-hide {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
}



/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .btn-lg {
        padding: var(--ecp-spacing-md) var(--ecp-spacing-xl) !important;
        font-size: 1rem !important;
    }
    
    .card-header {
        padding: var(--ecp-spacing-md) var(--ecp-spacing-lg) !important;
        font-size: 1rem !important;
    }
    
    .card-body {
        padding: var(--ecp-spacing-lg) !important;
    }
    
    .nav-tabs {
        flex-direction: column !important;
    }
    
    .nav-tabs .nav-link {
        margin: var(--ecp-spacing-xs) 0 !important;
        text-align: center !important;
    }
    
    .ecp-footer {
        padding: var(--ecp-spacing-lg) 0 !important;
        margin-top: var(--ecp-spacing-xl) !important;
    }
    
    .ecp-footer-text {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 576px) {
    .ecp-empty-state {
        padding: var(--ecp-spacing-xl) var(--ecp-spacing-lg) !important;
    }
    
    .ecp-empty-state i {
        font-size: 2rem !important;
    }
    
    .ecp-empty-state h5 {
        font-size: 1.125rem !important;
    }
    
    .ecp-footer-text {
        font-size: 0.8rem !important;
    }
    
    .ecp-version {
        display: block !important;
        margin-top: var(--ecp-spacing-xs) !important;
    }
}

/* ========================================
   MODO OSCURO (OPCIONAL)
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --ecp-gray-50: #0f172a;
        --ecp-gray-100: #1e293b;
        --ecp-gray-200: #334155;
    }
    
    .card {
        background-color: var(--ecp-gray-100) !important;
        color: white !important;
    }
    
    .table tbody td {
        color: white !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .btn, .nav-tabs, .alert {
        box-shadow: none !important;
        background: white !important;
        color: black !important;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
}

/* Event Banners and Visual Elements */
.ecp-event-banner {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
    border-radius: var(--border-radius-lg) !important;
}

.ecp-event-logo {
    height: 60px !important;
    width: auto !important;
    max-width: 120px !important;
    border-radius: var(--border-radius-sm) !important;
    border: 0px solid #dee2e6 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

.ecp-detail-logo {
    max-height: 150px !important;
    max-width: 300px !important;
    width: auto !important;
    height: auto !important;
    border-radius: var(--border-radius-sm) !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

.ecp-progress-bar {
    height: 8px !important;
    background: rgba(255,255,255,0.2) !important;
}

/* Login and Authentication */
.ecp-subtitle {
    font-size: 0.9rem !important;
}

.ecp-password-toggle {
    cursor: pointer !important;
}

.ecp-author-link {
    text-decoration: none !important;
    color: var(--color-text) !important;
}

.ecp-author-link:hover {
    color: var(--color-primary) !important;
}

/* Version Display */
.ecp-version {
    font-size: small !important;
}

/* Password Strength Indicators */
.ecp-password-strength {
    height: 5px !important;
}

/* Logo Variants */
.ecp-announcement-logo {
    max-height: 100px !important;
    border-radius: var(--border-radius-sm) !important;
}

.ecp-dashboard-logo {
    height: 50px !important;
    width: 50px !important;
    object-fit: cover !important;
    border-radius: var(--border-radius-sm) !important;
}

.ecp-dashboard-placeholder {
    height: 50px !important;
    width: 50px !important;
    border-radius: var(--border-radius-sm) !important;
}

.ecp-dashboard-progress {
    height: 20px !important;
}

.ecp-table-logo {
    height: 40px !important;
    object-fit: cover !important;
    border-radius: var(--ecp-radius-xs) !important;
}

/* Visor Components */
.ecp-sidebar-flex {
    flex: 1 !important;
    overflow: hidden !important;
}

.ecp-waiting-text {
    font-size: 1.5rem !important;
}

.ecp-count-number {
    font-size: 2rem !important;
}

/* Statistics Cards */
.ecp-stat-card-primary {
    background: linear-gradient(135deg, var(--ecp-primary) 0%, var(--ecp-primary-light) 100%) !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0, 24, 72, 0.15) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

.ecp-stat-card-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.ecp-stat-card-primary:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 40px rgba(0, 24, 72, 0.25) !important;
}

.ecp-stat-card-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.15) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

.ecp-stat-card-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.ecp-stat-card-success:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.25) !important;
}

.ecp-stat-card-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.15) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

.ecp-stat-card-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.ecp-stat-card-warning:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 40px rgba(245, 158, 11, 0.25) !important;
}

.ecp-stat-card-info {
    background: linear-gradient(135deg, var(--ecp-primary-medium) 0%, var(--ecp-primary-soft) 100%) !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(72, 48, 120, 0.15) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

.ecp-stat-card-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.ecp-stat-card-info:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 40px rgba(72, 48, 120, 0.25) !important;
}

/* Statistics Card Content */
.ecp-stat-card-primary .card-body,
.ecp-stat-card-success .card-body,
.ecp-stat-card-warning .card-body,
.ecp-stat-card-info .card-body,
.ecp-stat-card-alter1 .card-body,
.ecp-stat-card-alter2 .card-body,
.ecp-stat-card-alter3 .card-body,
.ecp-stat-card-alter4 .card-body,
.ecp-stat-card-alter5 .card-body,
.ecp-stat-card-alter6 .card-body {
    position: relative !important;
    z-index: 2 !important;
    padding: 1.5rem !important;
}

.ecp-stat-card-primary h6,
.ecp-stat-card-success h6,
.ecp-stat-card-warning h6,
.ecp-stat-card-info h6,
.ecp-stat-card-alter1 h6,
.ecp-stat-card-alter2 h6,
.ecp-stat-card-alter3 h6,
.ecp-stat-card-alter4 h6,
.ecp-stat-card-alter5 h6,
.ecp-stat-card-alter6 h6 {
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 0.8rem !important;
    margin-bottom: 0.75rem !important;
}

.ecp-stat-card-primary h2,
.ecp-stat-card-success h2,
.ecp-stat-card-warning h2,
.ecp-stat-card-info h2,
.ecp-stat-card-alter1 h2,
.ecp-stat-card-alter2 h2,
.ecp-stat-card-alter3 h2,
.ecp-stat-card-alter4 h2,
.ecp-stat-card-alter5 h2,
.ecp-stat-card-alter6 h2 {
    font-weight: 700 !important;
    font-size: 2.5rem !important;
    line-height: 1 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.ecp-stat-card-primary .fs-1,
.ecp-stat-card-success .fs-1,
.ecp-stat-card-warning .fs-1,
.ecp-stat-card-info .fs-1,
.ecp-stat-card-alter1 .fs-1,
.ecp-stat-card-alter2 .fs-1,
.ecp-stat-card-alter3 .fs-1,
.ecp-stat-card-alter4 .fs-1,
.ecp-stat-card-alter5 .fs-1,
.ecp-stat-card-alter6 .fs-1 {
    opacity: 0.3 !important;
    transition: all 0.3s ease !important;
}

.ecp-stat-card-primary:hover .fs-1,
.ecp-stat-card-success:hover .fs-1,
.ecp-stat-card-warning:hover .fs-1,
.ecp-stat-card-info:hover .fs-1,
.ecp-stat-card-alter1:hover .fs-1,
.ecp-stat-card-alter2:hover .fs-1,
.ecp-stat-card-alter3:hover .fs-1,
.ecp-stat-card-alter4:hover .fs-1,
.ecp-stat-card-alter5:hover .fs-1,
.ecp-stat-card-alter6:hover .fs-1 {
    opacity: 0.5 !important;
    transform: scale(1.1) !important;
}

/* Statistics Cards - Alternative Colors */
.ecp-stat-card-alter1 {
    background: linear-gradient(135deg, var(--ecp-alter1) 0%, var(--ecp-alter1-light) 100%) !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

.ecp-stat-card-alter1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.ecp-stat-card-alter1:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 40px rgba(139, 92, 246, 0.25) !important;
}

.ecp-stat-card-alter2 {
    background: linear-gradient(135deg, var(--ecp-alter2) 0%, var(--ecp-alter2-light) 100%) !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(236, 72, 153, 0.15) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

.ecp-stat-card-alter2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.ecp-stat-card-alter2:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 40px rgba(236, 72, 153, 0.25) !important;
}

.ecp-stat-card-alter3 {
    background: linear-gradient(135deg, var(--ecp-alter3) 0%, var(--ecp-alter3-light) 100%) !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(6, 182, 212, 0.15) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

.ecp-stat-card-alter3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.ecp-stat-card-alter3:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 40px rgba(6, 182, 212, 0.25) !important;
}

.ecp-stat-card-alter4 {
    background: linear-gradient(135deg, var(--ecp-alter4) 0%, var(--ecp-alter4-light) 100%) !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(132, 204, 22, 0.15) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

.ecp-stat-card-alter4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.ecp-stat-card-alter4:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 40px rgba(132, 204, 22, 0.25) !important;
}

.ecp-stat-card-alter5 {
    background: linear-gradient(135deg, var(--ecp-alter5) 0%, var(--ecp-alter5-light) 100%) !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(249, 115, 22, 0.15) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

.ecp-stat-card-alter5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.ecp-stat-card-alter5:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 40px rgba(249, 115, 22, 0.25) !important;
}

.ecp-stat-card-alter6 {
    background: linear-gradient(135deg, var(--ecp-alter6) 0%, var(--ecp-alter6-light) 100%) !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

.ecp-stat-card-alter6::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.ecp-stat-card-alter6:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.25) !important;
}

/* Statistics Card Icons */
.stat-icon {
    font-size: 3rem !important;
    opacity: 0.3 !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

.ecp-stat-card-primary:hover .stat-icon,
.ecp-stat-card-success:hover .stat-icon,
.ecp-stat-card-warning:hover .stat-icon,
.ecp-stat-card-info:hover .stat-icon,
.ecp-stat-card-alter1:hover .stat-icon,
.ecp-stat-card-alter2:hover .stat-icon,
.ecp-stat-card-alter3:hover .stat-icon,
.ecp-stat-card-alter4:hover .stat-icon,
.ecp-stat-card-alter5:hover .stat-icon,
.ecp-stat-card-alter6:hover .stat-icon {
    opacity: 0.5 !important;
    transform: scale(1.1) rotate(5deg) !important;
}

/* Text Color Utilities for Stats */
.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Responsive Statistics Cards */
@media (max-width: 768px) {
    .ecp-stat-card-primary h2,
    .ecp-stat-card-success h2,
    .ecp-stat-card-warning h2,
    .ecp-stat-card-info h2,
    .ecp-stat-card-alter1 h2,
    .ecp-stat-card-alter2 h2,
    .ecp-stat-card-alter3 h2,
    .ecp-stat-card-alter4 h2,
    .ecp-stat-card-alter5 h2,
    .ecp-stat-card-alter6 h2 {
        font-size: 2rem !important;
    }
    
    .stat-icon {
        font-size: 2.5rem !important;
    }
}

/* Form Elements and Previews */
.ecp-hidden {
    display: none !important;
}

.ecp-logo-preview {
    max-height: 200px !important;
}

.ecp-current-logo {
    max-height: 100px !important;
    border-radius: var(--ecp-radius-sm) !important;
    border: 1px solid #dee2e6 !important;
}

/* ========================================
   WIZARD STEPS - Indicadores de Progreso
   ======================================== */
.step-indicator {
    position: relative;
    padding: 20px 10px;
}

.step-indicator::before {
    content: '';
    position: absolute;
    top: 35px;
    left: -50%;
    width: 100%;
    height: 3px;
    background: var(--ecp-gray-200);
}

.step-indicator:first-child::before {
    display: none;
}

.step-number {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--ecp-gray-200);
    color: var(--ecp-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-weight: bold;
    font-size: 1.3rem;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.step-title {
    font-size: 0.9rem;
    color: var(--ecp-gray-600);
    font-weight: 500;
}

/* Step Activo */
.step-indicator.active .step-number {
    background: var(--ecp-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 24, 72, 0.3);
}

.step-indicator.active .step-title {
    color: var(--ecp-primary);
    font-weight: 600;
}

/* Step Completado */
.step-indicator.completed .step-number {
    background: var(--ecp-success);
    color: white;
}

.step-indicator.completed .step-number::after {
    content: '✓';
    font-size: 1.5rem;
}

.step-indicator.completed::before {
    background: var(--ecp-success);
}

.step-indicator.completed .step-title {
    color: var(--ecp-success);
}

/* Responsive Wizard */
@media (max-width: 768px) {
    .step-indicator {
        padding: 15px 5px;
    }
    
    .step-number {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    
    .step-title {
        font-size: 0.8rem;
    }
    
    .step-indicator::before {
        height: 2px;
        top: 28px;
    }
}

.pregunta-item {
    transition: all 0.3s ease;
}

.pregunta-item:hover {
    transform: translateX(5px);
}

.fa-grip-vertical {
    cursor: move;
}

#preguntasContainer {
    min-height: 100px;
}

/* SweetAlert2 - Popup ancho para eliminar */
.swal-wide {
    width: 650px !important;
    max-width: 95% !important;
}

/* Offcanvas user menu width */
.offcanvas.offcanvas-end {
    width: 320px; /* comfortable mobile width */
}

.offcanvas .list-group-item i {
    width: 20px;
}