/*!
 * Header Component CSS
 * Sistema de Sorteos - PublicSite Header Styles  
 * Diseño original restaurado
 */

/* Header principal con colores dinámicos */
header {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--dynamic-primary);
}

/* Navbar styling */
.navbar {
    position: relative;
    z-index: 1040;
    transition: all 0.3s ease;
}

/* Aumentar especificidad para evitar !important en color de fondo */
header .navbar.navbar-primary {
    background-color: var(--dynamic-primary);
    padding-top: 1.5rem !important;
    padding-bottom: 1rem !important;
}

/* Reducir padding en mobile - sobrescribir estilos inline */
@media (max-width: 767px) {
    /* Sobrescribir estilos inline del template */
    header[style*="height"] {
        height: 80px !important;
    }
    
    nav.navbar[style*="height"] {
        height: 60px !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.25rem !important;
    }
    
    .navbar-primary {
        padding-top: 0.5rem !important;
        padding-bottom: 0.25rem !important;
    }
    
    /* Asegurar que también se aplique a navbar genérico */
    .navbar {
        padding-top: 0.5rem !important;
        padding-bottom: 0.25rem !important;
    }
    
    /* Reducir tamaño del brand en mobile */
    .navbar-brand {
        font-size: 1.1rem !important;
    }
    
    /* Reducir altura del countdown container */
    .countdown-container {
        height: 20px !important;
    }

    /* (Unificado en bloque mobile al final del archivo) */
}

.navbar-brand {
    font-weight: 700;
    transition: transform 0.2s ease;
}

.navbar-brand:hover {
    transform: scale(1.02);
}

/* Botones de acción en header */
.header-action-btn img {
    width: 38px;
    height: 38px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* Escalado del contenedor para que imagen y badge crezcan juntos */
.header-action-btn {
    transition: transform 0.2s ease;
    transform-origin: left center;
}

/* Tamaño base del badge y layout (desktop/general) */
.header-badge {
    font-size: 0.75rem;
    margin-left: -12px;
    padding-left: 16px;
    border-radius: 4px;
}

/* Hover desktop */
.header-action-btn:hover {
    transform: scale(1.08);
}

/* Estado presionado (usado también por JS en mobile) */
.header-action-btn.pressed,
.header-action-btn:active {
    transform: scale(1.06);
}

/* Theme toggle button */
#theme-toggle {
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.5);
}

#theme-toggle:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.7);
    transform: scale(1.05);
}

#theme-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.25);
}

/* Countdown container */
.countdown-container {
    position: relative;
    z-index: 1020;
    height: 30px !important;
    background-color: var(--dynamic-primary) !important;
}

.countdown-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 500 !important;
    top: 60% !important;
}

/* Countdown positioning */
#raffleCountdown {
    position: absolute !important;
    transform: translateY(-50%) !important;
}

/* Desktop countdown styles */
.countdown-desktop {
    align-items: center;
}

.countdown-desktop-icon {
    font-size: 1.5rem;
    color: var(--dynamic-text-on-primary);
    margin-right: 0.5rem;
}
/* Mostrar icono apropiado según tema */
.countdown-desktop-icon.icon-dark,
.countdown-mobile-icon.icon-dark { display: none; }
[data-bs-theme="dark"] .countdown-desktop-icon.icon-light,
[data-bs-theme="dark"] .countdown-mobile-icon.icon-light { display: none; }
[data-bs-theme="dark"] .countdown-desktop-icon.icon-dark,
[data-bs-theme="dark"] .countdown-mobile-icon.icon-dark { display: inline-block; }

.countdown-desktop-text {
    font-size: 1.2rem;
    color: var(--countdown-label-color, var(--dynamic-text-on-primary));
    margin-right: 1rem;
}

.countdown-desktop-time {
    font-size: 1.2rem;
    color: var(--countdown-time-color, var(--dynamic-text-on-primary));
}

/* Mobile countdown styles */
.countdown-mobile {
    justify-content: space-between;
    align-items: center;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 0 15px;
}

.countdown-mobile-icon {
    font-size: 12px;
    color: var(--dynamic-text-on-primary);
    margin-right: 0.25rem;
}

.countdown-mobile-text {
    font-size: 12px;
    color: var(--countdown-label-color, var(--dynamic-text-on-primary));
    font-weight: 700;
}

.countdown-mobile-time {
    font-size: 12px;
    color: var(--countdown-time-color, var(--dynamic-text-on-primary));
    font-weight: 700;
}

/* No raffle message */
.countdown-no-raffle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.countdown-no-raffle-icon {
    color: var(--dynamic-text-on-primary);
    margin-right: 0.5rem;
}

.countdown-no-raffle-text {
    color: var(--dynamic-text-on-primary);
}

/* Countdown específico con z-index controlado */
header #raffleCountdown {
    position: absolute;
    z-index: 1025;
}

/* Responsive countdown positioning */
@media (min-width: 768px) {
    #raffleCountdown {
        top: 50% !important;
    }
}

/* No necesitamos media queries para display porque usamos clases Bootstrap */

/* Dark theme adjustments for header */
[data-bs-theme="dark"] header {
    background-color: var(--bs-dark);
}

[data-bs-theme="dark"] #theme-toggle {
    border-color: rgba(255,255,255,0.3);
}

[data-bs-theme="dark"] #theme-toggle:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.5);
}

/* Mobile-specific overrides placed at end to win cascade */
@media (max-width: 767px) {
    .header-action-btn img {
        width: 34px;  /* ~10% menos que 38px */
        height: 34px;
    }
    .header-badge {
        font-size: 0.58rem;   /* compacto en mobile */
        margin-left: -14px;   /* separación ligeramente mayor del icono */
        padding-left: 12px;   /* mantener legibilidad */
        border-radius: 3px;
    }

    /* Evitar sombreado/selección en mobile al tocar */
    .header-action-btn,
    .header-action-btn img,
    .header-badge {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}

/* Desktop-only adjustment: bring badge closer to icon to free space near theme toggle */
@media (min-width: 768px) {
    .header-action-btn .header-badge {
        margin-left: -17px; /* ajuste fino solicitado y consistente para ambos badges */
    }
    #theme-toggle {
        margin-left: 3px; /* separar un poco del badge en desktop */
    }
}