/* ==============================================
   TraductorEnVivo Admin - Estilo Alegre y Motivador
   Paleta: #edf4f4 (fondo), #007bff (azul), #00d1b2 (turquesa)
   Acentos: #E36E00 (naranja), #71007E (morado)
   ============================================== */

/* ============================================
   BANNER MOTIVADOR - DASHBOARD
   ============================================ */
.content-wrapper::before {
    content: "Cada evento que traduces conecta personas. Sigue adelante.";
    display: block;
    background: linear-gradient(135deg, #00d1b2 0%, #007bff 50%, #71007E 100%);
    color: white;
    padding: 16px 24px;
    margin: -15px -15px 25px -15px;
    border-radius: 0 0 12px 12px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

/* Ocultar en páginas de lista/edición */
.change-list .content-wrapper::before,
.change-form .content-wrapper::before,
.delete-confirmation .content-wrapper::before {
    display: none;
}

/* ============================================
   SIDEBAR - Alegre y Colorido
   ============================================ */
.main-sidebar {
    border-right: 4px solid #00d1b2 !important;
    background: linear-gradient(180deg, #ffffff 0%, #edf4f4 100%) !important;
}

/* Logo más grande y centrado */
.brand-link {
    padding: 15px !important;
}

.brand-link .brand-image {
    max-height: 45px !important;
    margin-right: 10px;
}

/* Iconos del sidebar coloridos */
.nav-sidebar .nav-icon {
    color: #007bff !important;
    font-size: 1.1em !important;
    transition: all 0.3s ease;
}

.nav-sidebar .nav-link:hover .nav-icon {
    color: #00d1b2 !important;
    transform: scale(1.15);
}

.nav-sidebar .nav-link.active .nav-icon {
    color: #E36E00 !important;
}

/* Links del menú con transiciones suaves */
.nav-sidebar .nav-link {
    border-radius: 8px;
    margin: 2px 8px;
    transition: all 0.2s ease;
}

.nav-sidebar .nav-link:hover {
    background-color: rgba(0, 209, 178, 0.1) !important;
}

.nav-sidebar .nav-link.active {
    background: linear-gradient(90deg, #edf4f4 0%, rgba(0, 209, 178, 0.15) 100%) !important;
    border-left: 4px solid #00d1b2 !important;
    color: #007bff !important;
    font-weight: 600;
}

/* ============================================
   BOTONES - Colores vibrantes
   ============================================ */
.btn-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(0, 123, 255, 0.4);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004094 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.5);
}

.btn-info, .btn-success {
    background: linear-gradient(135deg, #00d1b2 0%, #00a896 100%) !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(0, 209, 178, 0.4);
}

.btn-info:hover, .btn-success:hover {
    background: linear-gradient(135deg, #00a896 0%, #008577 100%) !important;
    transform: translateY(-2px);
}

.btn-warning {
    background: linear-gradient(135deg, #E36E00 0%, #c45d00 100%) !important;
    border: none !important;
    color: white !important;
}

.btn-danger {
    background: linear-gradient(135deg, #71007E 0%, #5a0065 100%) !important;
    border: none !important;
}

/* ============================================
   CARDS Y STATS - Vibrantes
   ============================================ */
.small-box {
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.small-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.small-box.bg-info {
    background: linear-gradient(135deg, #00d1b2 0%, #00a896 100%) !important;
}

.small-box.bg-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}

.small-box.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
}

.small-box.bg-warning {
    background: linear-gradient(135deg, #E36E00 0%, #c45d00 100%) !important;
}

/* Iconos de cards más grandes */
.small-box .icon {
    font-size: 80px !important;
    opacity: 0.3;
}

/* ============================================
   TABLAS - Limpias y agradables
   ============================================ */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(237, 244, 244, 0.5) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 209, 178, 0.1) !important;
}

.table th {
    background: linear-gradient(180deg, #edf4f4 0%, #dde8e8 100%);
    border-bottom: 2px solid #00d1b2 !important;
    font-weight: 600;
    color: #333;
}

/* ============================================
   FORMULARIOS - Interactivos
   ============================================ */
.form-control:focus {
    border-color: #00d1b2 !important;
    box-shadow: 0 0 0 3px rgba(0, 209, 178, 0.25) !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    border-color: #00d1b2 !important;
}

/* ============================================
   NAVBAR SUPERIOR
   ============================================ */
.main-header.navbar {
    background: linear-gradient(90deg, #edf4f4 0%, #ffffff 100%) !important;
    border-bottom: 2px solid #00d1b2;
}

/* Dropdowns del navbar */
.navbar .dropdown-menu,
.main-header .dropdown-menu,
.nav-item .dropdown-menu {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    border-radius: 10px !important;
    padding: 8px 0;
}

.navbar .dropdown-menu .dropdown-item,
.main-header .dropdown-menu .dropdown-item,
.nav-item .dropdown-menu .dropdown-item {
    color: #333333 !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease;
    border-radius: 0;
}

.navbar .dropdown-menu .dropdown-item:hover,
.main-header .dropdown-menu .dropdown-item:hover,
.nav-item .dropdown-menu .dropdown-item:hover {
    background: linear-gradient(90deg, rgba(0, 209, 178, 0.1) 0%, rgba(0, 123, 255, 0.1) 100%) !important;
    color: #007bff !important;
}

.navbar-nav .dropdown-menu {
    background-color: #ffffff !important;
    min-width: 220px;
}

/* ============================================
   FOOTER - Con mensaje motivador
   ============================================ */
.main-footer {
    background: linear-gradient(90deg, #edf4f4 0%, #ffffff 100%) !important;
    border-top: 3px solid #00d1b2 !important;
    padding: 15px 20px;
}

/* ============================================
   BREADCRUMBS - Coloridos
   ============================================ */
.breadcrumb-item a {
    color: #007bff !important;
}

.breadcrumb-item.active {
    color: #00d1b2 !important;
    font-weight: 600;
}

/* ============================================
   ALERTAS Y MENSAJES
   ============================================ */
.alert-success {
    background: linear-gradient(135deg, rgba(0, 209, 178, 0.15) 0%, rgba(40, 167, 69, 0.15) 100%);
    border-left: 4px solid #00d1b2;
    color: #155724;
}

.alert-info {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.15) 0%, rgba(0, 209, 178, 0.15) 100%);
    border-left: 4px solid #007bff;
    color: #0c5460;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(227, 110, 0, 0.15) 0%, rgba(255, 193, 7, 0.15) 100%);
    border-left: 4px solid #E36E00;
    color: #856404;
}

.alert-danger {
    background: linear-gradient(135deg, rgba(113, 0, 126, 0.15) 0%, rgba(220, 53, 69, 0.15) 100%);
    border-left: 4px solid #71007E;
    color: #721c24;
}

/* ============================================
   BADGES - Coloridos
   ============================================ */
.badge-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}

.badge-success, .badge-info {
    background: linear-gradient(135deg, #00d1b2 0%, #00a896 100%) !important;
}

.badge-warning {
    background: linear-gradient(135deg, #E36E00 0%, #c45d00 100%) !important;
    color: white !important;
}

.badge-danger {
    background: linear-gradient(135deg, #71007E 0%, #5a0065 100%) !important;
}

/* ============================================
   PAGINACIÓN - Estilizada
   ============================================ */
.page-item.active .page-link {
    background: linear-gradient(135deg, #007bff 0%, #00d1b2 100%) !important;
    border-color: #007bff !important;
}

.page-link {
    color: #007bff !important;
    transition: all 0.2s ease;
}

.page-link:hover {
    background-color: rgba(0, 209, 178, 0.1) !important;
    color: #00d1b2 !important;
}

/* ============================================
   ENLACES - Vibrantes
   ============================================ */
a {
    color: #007bff;
    transition: color 0.2s ease;
}

a:hover {
    color: #00d1b2;
}

/* ============================================
   SCROLLBAR - Personalizada
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #edf4f4;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #007bff 0%, #00d1b2 100%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #0056b3 0%, #00a896 100%);
}

/* ============================================
   ANIMACIONES SUTILES
   ============================================ */
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.nav-icon {
    animation: none;
}

.nav-link.active .nav-icon {
    animation: pulse-soft 2s ease-in-out infinite;
}