/* /assets/css/navbar.css - Con escudo Font Awesome azul y cambios solicitados */
:root {
    /* Colores principales actualizados */
    --primary: #2c5f8d;        /* Azul del ADN */
    --primary-dark: #1e4469;   /* Azul más oscuro */
    --secondary: #0056a3;
    --secondary-dark: #003d7a;
    --accent: #3b82f6;
    --accent-dark: #2563eb;
    
    /* Colores del escudo azul */
    --shield-blue: #74C0FC;     /* Azul del escudo */
    --shield-border: #C0C0C0;   /* Gris plata para borde */
    
    /* Color azul del lazo cáncer colorectal */
    --colorectal-blue: #003d7a;
    --colorectal-blue-light: #0056a3;
    --colorectal-blue-dark: #002855;
    
    /* Verde claro para botones */
    --light-green: #0284c7;
    --light-green-hover: #0369a1;
    
    /* Colores complementarios */
    --success: #0284c7;
    --warning: #1d4ed8;
    --danger: #dc3545;
    --info: #2c5f8d;
    --dark: #2d3748;
    --light: #f7fafc;
    
    /* Gradientes actualizados */
    --gradient-primary: linear-gradient(135deg, #003d7a 0%, #0056a3 100%);
    --gradient-secondary: linear-gradient(135deg, #0056a3 0%, #2563eb 100%);
    --gradient-accent: linear-gradient(135deg, #3b82f6 0%, #003d7a 100%);
    --gradient-hero: linear-gradient(135deg, #003d7a 0%, #0056a3 50%, #2563eb 100%);
    --gradient-green: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
    --gradient-colorectal: linear-gradient(135deg, #003d7a 0%, #0056a3 50%, #003d7a 100%);
    
    /* Gradientes para cards - VIBRANT & DISTINCT */
    --gradient-success: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
    --gradient-info: linear-gradient(135deg, #0056a3 0%, #0284c7 100%);
    --gradient-warning: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    --gradient-danger: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    --gradient-purple: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    --gradient-blue: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    --gradient-green: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
    --gradient-orange: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
    --gradient-pink: linear-gradient(135deg, #0056a3 0%, #2563eb 100%);
    --gradient-teal: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
    --gradient-primary: linear-gradient(135deg, #003d7a 0%, #0056a3 100%);
    
    --shadow-sm: 0 2px 4px rgba(44, 95, 141, 0.1);
    --shadow: 0 4px 6px rgba(44, 95, 141, 0.15);
    --shadow-lg: 0 10px 15px rgba(44, 95, 141, 0.2);
    --shadow-xl: 0 20px 25px rgba(44, 95, 141, 0.25);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* System UI stack (22-abr-2026, iter. 3):
       se abandona Inter porque Firefox/Windows + DirectWrite la renderiza demasiado
       delgada (peso 400 se ve como 300). System UI usa la fuente nativa del SO:
         - Mac/iOS    → San Francisco (SF Pro)
         - Windows    → Segoe UI
         - Android    → Roboto
         - Linux      → Cantarell/Ubuntu según distro
       Todas ellas se renderizan nativamente con hinting optimizado por el SO,
       tienen mejor peso visual que Inter via DirectWrite y no requieren descarga.
       Referencia: PubMed (pmc.ncbi.nlm.nih.gov) usa este mismo stack. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
                 "Droid Sans", Arial, sans-serif;
    color: var(--dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* font-smoothing: solo afecta a Mac/iOS/Linux (en Windows es no-op) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================================
   OVERRIDE DE BOOTSTRAP PARA TEXTOS "MUTED"
   ------------------------------------------------------------
   Bootstrap define .text-muted con rgba(33,37,41,0.75) !important
   y .text-body-secondary idem. Usar opacidad en lugar de color sólido
   hace que los textos pequeños se vean "lavados". Forzamos color
   sólido muy oscuro (casi negro) para que los textos secundarios
   NO parezcan "apagados". Aplica a TODAS las páginas del sitio.
   Iteración 2 (22-abr-2026): endurecido a #1f2937 (15:1) tras feedback.
   ============================================================ */
.text-muted,
.text-body-secondary {
    color: #1f2937 !important;          /* casi negro, contraste 15:1 */
    --bs-text-opacity: 1 !important;     /* anula la opacidad residual de Bootstrap */
}

/* Textos pequeños muted: mismo color oscuro, sin grises extra heredados */
small.text-muted,
.small.text-muted {
    color: #1f2937 !important;
}

/* ========== NAVBAR CON ESCUDO FONT AWESOME ========== */
.navbar-modern {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 3px rgba(44, 95, 141, 0.08), 0 10px 40px rgba(44, 95, 141, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 0;
    position: sticky;
    top: 0;
    z-index: 1050;
    height: auto;
    min-height: auto;
}

.navbar-modern.scrolled {
    padding: 0.375rem 0;
    box-shadow: 0 4px 12px rgba(44, 95, 141, 0.12);
}

/* Container del navbar */
.navbar > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 0;
}

/* ========== LOGO CON IMAGEN DEL GUERRERO ========== */
.navbar-brand-modern {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-right: 2rem;
    padding: 0.25rem 0;
}

.brand-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: auto;
}

/* Imagen del logo guerrero */
.logo-warrior-img {
    height: 70px;
    width: auto;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Escudo legacy (mantener por compatibilidad) */
.logo-shield {
    width: 50px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}

.logo-shield i {
    font-size: 3rem;
    color: var(--shield-blue);
    text-shadow: 
        0 0 0 2px var(--shield-border),
        0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Texto del logo con color azul del menú activo */
.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    position: relative;
}

.logo-crc {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--colorectal-blue); /* Azul del menú activo */
    letter-spacing: -0.5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.logo-warriors {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--colorectal-blue); /* Azul del menú activo */
    margin-top: -0.25rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
    letter-spacing: 0.5px;
}

/* Hover effects del logo - DESACTIVADOS para evitar animación desincronizada */

/* Animación al scroll */
.navbar-modern.scrolled .logo-warrior-img {
    height: 55px;
}

.navbar-modern.scrolled .logo-shield {
    width: 40px;
    height: 44px;
}

.navbar-modern.scrolled .logo-shield i {
    font-size: 2.5rem;
}

.navbar-modern.scrolled .logo-crc {
    font-size: 1.5rem;
}

.navbar-modern.scrolled .logo-warriors {
    font-size: 1.1rem;
    font-weight: 800;
}

/* Navbar collapse alineado */
.navbar-collapse {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
}

/* Navigation Items */
.navbar-nav-modern {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 0;
}

.navbar-nav-modern .nav-link {
    display: flex;
    align-items: center;
    color: var(--dark);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    margin: 0 0.125rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    height: auto;
}

/* ICONOS */
.nav-icon-wrapper {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.375rem;
    transition: all 0.3s ease;
    background: none;
}

.nav-icon-wrapper i {
    font-size: 1.1rem;
    color: #2563eb;
    transition: all 0.3s ease;
}

/* Colores específicos de iconos del header */
.icon-home i {
    color: #2563eb;
}

.icon-research i {
    color: #0056a3;
}

.icon-ai i {
    color: #2563eb;
}

.icon-ai.animated i {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 5px rgba(37, 99, 235, 0.4));
    }
    50% { 
        filter: drop-shadow(0 0 15px rgba(37, 99, 235, 0.7));
    }
}

.icon-community i {
    color: #0056a3;
}

.icon-news i {
    color: #3b82f6;
}

.icon-donate i {
    color: #dc2626;
}

/* Hover effects para nav items */
.navbar-nav-modern .nav-link:hover {
    background: linear-gradient(135deg, rgba(0, 61, 122, 0.1) 0%, rgba(0, 86, 163, 0.1) 100%);
    transform: translateY(-2px);
}

.navbar-nav-modern .nav-link:hover .nav-icon-wrapper {
    transform: scale(1.1) rotate(-5deg);
}

.navbar-nav-modern .nav-link:hover .nav-icon-wrapper i {
    filter: brightness(1.2);
    color: var(--colorectal-blue);
}

/* Active state con color azul del lazo */
.navbar-nav-modern .nav-link.active {
    background: var(--colorectal-blue);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.3);
}

.navbar-nav-modern .nav-link.active .nav-icon-wrapper {
    background: none;
}

.navbar-nav-modern .nav-link.active .nav-icon-wrapper i {
    color: white;
}

/* Dropdowns */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
    user-select: none;
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    transition: transform 0.2s ease;
}

.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 1050;
    display: none;
    min-width: 320px;
    padding: 0.75rem;
    margin: 0;
    background-color: #fff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(44, 95, 141, 0.15);
}

.dropdown-menu.show {
    display: block !important;
}

.dropdown-menu-modern {
    padding: 1rem;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    margin: 0.25rem 0;
    border-radius: 12px;
    text-decoration: none;
    color: var(--dark);
    transition: all 0.2s ease;
}

.dropdown-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.dropdown-icon-box i {
    color: white;
    font-size: 1.1rem;
}

/* Gradient backgrounds */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-success { background: var(--gradient-success); }
.bg-gradient-info { background: var(--gradient-info); }
.bg-gradient-warning { background: var(--gradient-warning); }
.bg-gradient-danger { background: var(--gradient-danger); }
.bg-gradient-purple { background: var(--gradient-purple); }
.bg-gradient-blue { background: var(--gradient-blue); }
.bg-gradient-green { background: var(--gradient-green); }
.bg-gradient-orange { background: var(--gradient-orange); }
.bg-gradient-pink { background: var(--gradient-pink); }
.bg-gradient-teal { background: var(--gradient-teal); }

.dropdown-text {
    flex: 1;
}

.dropdown-title {
    display: block;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 0.125rem;
}

.dropdown-desc {
    display: block;
    font-size: 0.8125rem;       /* 13px - mínimo legible para texto auxiliar */
    font-weight: 450;            /* entre regular (400) y medium (500), más definido */
    color: #1f2937;              /* casi negro, contraste 15:1 (iter. 2 del endurecimiento) */
    letter-spacing: 0.01em;      /* ligera separación mejora legibilidad en tamaño pequeño */
    line-height: 1.4;
}

.dropdown-item:hover {
    background: rgba(0, 61, 122, 0.05);
    transform: translateX(5px);
}

.dropdown-item:hover .dropdown-icon-box {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 5px 15px rgba(0, 61, 122, 0.2);
}

.dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}

/* Badge animado con amarillo sólido */
.badge-glow {
    display: inline-block;
    background: var(--accent);
    color: var(--dark);
    padding: 0.125rem 0.375rem;
    border-radius: 15px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(244, 196, 48, 0.5);
    }
    50% { 
        box-shadow: 0 0 20px rgba(244, 196, 48, 0.8), 
                    0 0 30px rgba(244, 196, 48, 0.6);
    }
}

/* Right side menu */
.d-flex.align-items-center.gap-3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Notification Bell sin fondo - solo icono */
.notification-bell {
    position: relative;
    cursor: pointer;
    padding: 0.5rem;
}

.notification-bell > i {
    font-size: 1.3rem;
    color: #f59e0b;
    transition: all 0.3s ease;
}

.notification-bell:hover > i {
    transform: scale(1.15);
    color: #d97706;
    animation: ring 0.5s ease;
}

@keyframes ring {
    0%, 100% { transform: rotate(0deg) scale(1.15); }
    25% { transform: rotate(15deg) scale(1.15); }
    75% { transform: rotate(-15deg) scale(1.15); }
}

.notification-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid white;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ========== USER MENU ========== */

/* User Button */
.btn-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.875rem;
    background: white;
    border: 2px solid var(--secondary);
    border-radius: 50px;
    transition: all 0.3s ease;
    height: 42px;
}

.btn-user:hover {
    border-color: var(--colorectal-blue);
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.2);
    background: rgba(0, 61, 122, 0.05);
}

/* Avatar */
.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-colorectal);
    flex-shrink: 0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar i {
    color: white;
    font-size: 0.875rem;
}

.user-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dark);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dropdown Menu de Usuario */
.dropdown-menu-user {
    min-width: 280px;
    padding: 0;
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(44, 95, 141, 0.15);
    /* overflow: hidden; -- REMOVIDO: causaba que el dropdown se cortara */
    margin-top: 0.5rem;
}

/* Header del dropdown */
.dropdown-header {
    background: linear-gradient(135deg, rgba(0, 61, 122, 0.1) 0%, rgba(90, 138, 92, 0.1) 100%);
    padding: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 16px 16px 0 0; /* Esquinas superiores redondeadas */
}

/* Esquinas inferiores para último item */
.dropdown-menu-user > li:last-child > .dropdown-item {
    border-radius: 0 0 16px 16px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-colorectal);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 61, 122, 0.3);
}

.user-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar-large i {
    color: white;
    font-size: 1.5rem;
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-details strong {
    display: block;
    font-size: 1rem;
    color: var(--dark);
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-details small {
    display: block;
    font-size: 0.875rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Items del menú */
.dropdown-menu-user .dropdown-item {
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
    border: none;
    font-weight: 500;
    color: var(--dark);
    margin: 0;
    border-radius: 0;
}

.dropdown-menu-user .dropdown-item i {
    width: 20px;
    font-size: 1.1rem;
    color: #6b7280;
    text-align: center;
    transition: all 0.2s ease;
}

.dropdown-menu-user .dropdown-item:hover {
    background: rgba(0, 61, 122, 0.08);
    padding-left: 1.5rem;
}

.dropdown-menu-user .dropdown-item:hover i {
    color: var(--colorectal-blue);
    transform: scale(1.1);
}

/* Logout */
.dropdown-menu-user .dropdown-item.text-danger {
    color: #dc2626;
}

.dropdown-menu-user .dropdown-item.text-danger i {
    color: #dc2626;
}

.dropdown-menu-user .dropdown-item.text-danger:hover {
    background: rgba(220, 38, 38, 0.08);
}

.dropdown-menu-user .dropdown-item.text-danger:hover i {
    color: #b91c1c;
}

/* Divider */
.dropdown-menu-user .dropdown-divider {
    margin: 0;
    border-top: 1px solid #e5e7eb;
    opacity: 1;
}

/* Badge rol de usuario */
.user-role-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--gradient-colorectal);
    color: white;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* Buttons modernos - Sin degradado, verde claro sólido */
.btn-modern-primary {
    background: var(--light-green); /* Verde claro sólido */
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(127, 176, 105, 0.3);
    height: 42px;
    display: inline-flex;
    align-items: center;
}

.btn-modern-primary:hover {
    background: var(--light-green-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(127, 176, 105, 0.4);
    color: white;
}

.btn-modern-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    padding: 0.5rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    height: 42px;
    display: inline-flex;
    align-items: center;
}

.btn-modern-outline:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(44, 95, 141, 0.3);
}

/* Botón hamburguesa */
.navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: 1.125rem;
    border: 2px solid var(--primary);
    border-radius: 6px;
    background: white;
    height: 36px;
}

.navbar-toggler-icon {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232c5f8d' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Main Content */
main {
    flex: 1;
    min-height: 60vh;
    padding-top: 10px;
}

/* Footer */
.footer-modern {
    background: var(--gradient-colorectal);
    color: white;
    margin-top: 80px;
    padding: 60px 0 20px;
    position: relative;
    overflow: hidden;
}

.footer-modern p,
.footer-modern li,
.footer-modern span {
    color: rgba(255, 255, 255, 0.9) !important;
}

.footer-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"><path fill="white" d="M0,50 C360,100 720,0 1440,50 L1440,0 L0,0 Z"></path></svg>');
    background-size: cover;
    background-position: bottom;
}

.footer-content {
    position: relative;
    z-index: 1;
}

.footer-modern h3 {
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
    color: white !important;
}

.footer-modern h3 i {
    color: white !important;
}

.footer-modern h5 {
    font-weight: 600;
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: 0.75rem;
    color: white !important;
}

.footer-modern h5 i {
    color: white !important;
}

.footer-modern h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}

.footer-modern a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-modern a:hover {
    color: white;
    transform: translateX(5px);
}

.footer-modern ul {
    list-style: none;
    padding: 0;
}

.footer-modern ul li {
    margin-bottom: 0.75rem;
}

.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: white;
    transform: translateY(-5px);
}

.social-icon:hover i {
    color: var(--colorectal-blue);
}

.footer-divider {
    border: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 3rem 0 2rem;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* ========== RESPONSIVE ========== */

/* Tablets */
@media (max-width: 991px) {
    .navbar-modern {
        padding: 0.375rem 0;
    }
    
    /* Logo guerrero responsive */
    .logo-warrior-img {
        height: 55px;
    }
    
    .navbar-modern.scrolled .logo-warrior-img {
        height: 45px;
    }
    
    .logo-shield {
        width: 45px;
        height: 50px;
    }
    
    .logo-shield i {
        font-size: 2.7rem;
    }
    
    .navbar-modern.scrolled .logo-shield {
        width: 38px;
        height: 42px;
    }
    
    .navbar-modern.scrolled .logo-shield i {
        font-size: 2.3rem;
    }
    
    .logo-crc {
        font-size: 1.5rem;
    }
    
    .logo-warriors {
        font-size: 1.1rem;
        font-weight: 800;
    }
    
    .navbar-nav-modern {
        padding: 1rem 0;
    }
    
    .navbar-nav-modern .nav-link {
        margin: 0.25rem 0;
        font-size: 0.9rem;
        padding: 0.45rem 0.875rem;
    }
    
    .nav-icon-wrapper i {
        font-size: 1rem;
    }
    
    .dropdown-menu {
        position: static !important;
        width: 100%;
        margin: 0.5rem 0;
        box-shadow: none;
        background-color: rgba(248, 249, 250, 0.95);
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* Móviles */
@media (max-width: 768px) {
    .navbar-modern {
        padding: 0.375rem 0;
    }
    
    /* Logo guerrero en móvil */
    .logo-warrior-img {
        height: 50px;
    }
    
    .navbar-modern.scrolled .logo-warrior-img {
        height: 42px;
    }
    
    .logo-shield {
        width: 40px;
        height: 44px;
    }
    
    .logo-shield i {
        font-size: 2.4rem;
    }
    
    .navbar-modern.scrolled .logo-shield {
        width: 35px;
        height: 39px;
    }
    
    .navbar-modern.scrolled .logo-shield i {
        font-size: 2.1rem;
    }
    
    .logo-crc {
        font-size: 1.4rem;
    }
    
    .logo-warriors {
        font-size: 1rem;
        font-weight: 800;
    }
    
    .notification-bell {
        padding: 0.375rem;
    }
    
    .notification-bell > i {
        font-size: 1.2rem;
    }
    
    .btn-user {
        padding: 0.3rem 0.625rem;
        height: 38px;
    }
    
    .user-name {
        display: none;
    }
    
    .user-avatar {
        width: 24px;
        height: 24px;
    }
    
    .dropdown-menu-user {
        min-width: 240px;
    }
    
    .btn-modern-primary,
    .btn-modern-outline {
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
        height: 38px;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    .navbar-modern {
        padding: 0.25rem 0;
    }
    
    /* Logo guerrero en móviles pequeños */
    .logo-warrior-img {
        height: 42px;
    }
    
    .navbar-modern.scrolled .logo-warrior-img {
        height: 36px;
    }
    
    .logo-shield {
        width: 35px;
        height: 39px;
    }
    
    .logo-shield i {
        font-size: 2.1rem;
    }
    
    .navbar-modern.scrolled .logo-shield {
        width: 32px;
        height: 35px;
    }
    
    .navbar-modern.scrolled .logo-shield i {
        font-size: 1.9rem;
    }
    
    .logo-crc {
        font-size: 1.25rem;
    }
    
    .logo-warriors {
        font-size: 0.9rem;
        font-weight: 800;
    }
    
    .navbar-nav-modern .nav-link {
        font-size: 0.85rem;
        padding: 0.375rem 0.75rem;
    }
    
    .nav-icon-wrapper i {
        font-size: 0.95rem;
    }
}

/* Pantallas muy grandes */
@media (min-width: 1400px) {
    /* Logo guerrero en pantallas grandes */
    .logo-warrior-img {
        height: 80px;
    }
    
    .navbar-modern.scrolled .logo-warrior-img {
        height: 60px;
    }
    
    .logo-shield {
        width: 55px;
        height: 60px;
    }
    
    .logo-shield i {
        font-size: 3.3rem;
    }
    
    .navbar-modern.scrolled .logo-shield {
        width: 45px;
        height: 50px;
    }
    
    .navbar-modern.scrolled .logo-shield i {
        font-size: 2.7rem;
    }
    
    .logo-crc {
        font-size: 1.875rem;
    }
    
    .logo-warriors {
        font-size: 1.375rem;
        font-weight: 800;
    }
    
    .navbar-nav-modern .nav-link {
        font-size: 1rem;
        padding: 0.625rem 1.125rem;
    }
    
    .nav-icon-wrapper i {
        font-size: 1.2rem;
    }
    
    .notification-bell > i {
        font-size: 1.4rem;
    }
    
    .btn-user {
        height: 45px;
        padding: 0.5rem 1rem;
    }
    
    .btn-modern-primary,
    .btn-modern-outline {
        height: 45px;
        padding: 0.625rem 1.375rem;
        font-size: 1rem;
    }
}

/* Loading Animation */
.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 61, 122, 0.1);
    border-top-color: var(--colorectal-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
/* Remove any background/emoji from AI Assistant icon */
.nav-icon-wrapper.icon-ai {
    background: transparent !important;
}

.nav-icon-wrapper.icon-ai::before,
.nav-icon-wrapper.icon-ai::after {
    content: none !important;
    display: none !important;
}

.nav-icon-wrapper.icon-ai i {
    color: #2563eb !important; /* blue */
}

/* Remove any background/emoji from Community icon */
.nav-icon-wrapper.icon-community {
    background: transparent !important;
}

.nav-icon-wrapper.icon-community::before,
.nav-icon-wrapper.icon-community::after {
    content: none !important;
    display: none !important;
}

.nav-icon-wrapper.icon-community i {
    color: #0056a3 !important; /* blue */
}

/* Nav icon color overrides */
.nav-icon-wrapper.icon-home i {
    color: #2563eb !important; /* blue */
}
.nav-icon-wrapper.icon-research i {
    color: #0056a3 !important; /* blue */
}
.nav-icon-wrapper.icon-news i {
    color: #3b82f6 !important; /* blue */
}

/* Ensure all nav icons show properly */
.nav-icon-wrapper {
    background: transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-icon-wrapper i {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "bootstrap-icons" !important;
    font-style: normal;
}

/* Remove animated class effects if causing issues */
.nav-icon-wrapper.animated {
    animation: none !important;
}

/* Donate button - red like cancer.org */
.donate-nav-link {
    transition: all 0.3s !important;
}
.donate-nav-link:hover {
    background: #b91c1c !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3) !important;
}
.donate-nav-link .nav-icon-wrapper {
    background: transparent !important;
}
.donate-nav-link .nav-icon-wrapper::before,
.donate-nav-link .nav-icon-wrapper::after {
    display: none !important;
}