/* 
 * menu_tablet_pc.css - Estilos optimizados para navegación PC/Tablet
 * Sistema dual: Frontend y BackOffice separados
 * Bootstrap 5.3.8 compatible
 * Actualizado: 2025
 * 
 * Características:
 * - Solo para PC y Tablet (no incluye estilos móviles)
 * - Variables CSS para fácil personalización
 * - Código optimizado y comentado
 * - NUEVO: Estilos para búsqueda avanzada mejorada
 */

/* ========== RESET Y VARIABLES ========== */
:root {
    --color-primario: #005BAB;
    --color-primario-light: rgba(0, 86, 179, 0.1);
    --color-secundario: #F8981D;
    --color-secundario-light: rgba(40, 167, 69, 0.1);
    --color-hoy: #17a2b8;
    --color-deshabilitado: #cccccc;
    --color-fondo: #f8f9fa;
    --color-borde: #dee2e6;
    --color-borde-light: #e9ecef;
    --color-texto: #212529;
    --color-texto-suave: #6c757d;
    --sombra: 0 4px 12px rgba(0,0,0,0.1);
    --sombra-suave: 0 2px 6px rgba(0,0,0,0.05);
    --sombra-media: 0 4px 8px rgba(0,0,0,0.08);
    --radio-borde: 50px;
    --radio-borde-sm: 8px;
    --radio-borde-md: 12px;
    --radio-borde-lg: 20px;
    --transicion-rapida: all 0.2s ease;
    --transicion-media: all 0.3s ease;
    --transicion-lenta: all 0.4s ease;
    
    /* Colores para badges de scope */
    --scope-primary: #0056b3;
    --scope-warning: #ffc107;
    --scope-success: #28a745;
    --scope-info: #17a2b8;
    --scope-secondary: #6c757d;
    --scope-danger: #dc3545;
}

/* ========== BARRA PRINCIPAL ========== */
.main-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
    padding: 0.5rem 1rem;
    transition: var(--transicion-media);
    box-shadow: var(--sombra-suave);
}

/* ========== LOGO Y CONTENEDOR IZQUIERDO ========== */
.menu-logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo {
    height: 56px;
    width: auto;
    display: block;
    transition: var(--transicion-rapida);
}

@media (min-width: 1400px) {
    .brand-logo {
        height: 70px;
    }
}

/* ========== MENÚ CENTRAL (DB-DRIVEN) ========== */
.main-navbar .nav {
    gap: 0.6rem !important;
}

.main-navbar .nav-item {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
}

.wk-nav-link {
    color: var(--color-texto) !important;
    text-decoration: none;
    padding: 0.375rem 0.75rem !important;
    line-height: 1.7;
    position: relative;
    transition: var(--transicion-rapida);
    border-radius: var(--radio-borde);
    font-weight: 500;
}

.wk-nav-link:not(.active):hover {
    color: var(--color-secundario) !important;
    background: rgba(0, 86, 179, 0.05);
}

.wk-nav-link.active {
    color: var(--color-primario) !important;
    font-weight: 600;
    background: rgba(0, 86, 179, 0.08);
}

/* Barra inferior para estados activo/hover */
.wk-nav-link::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: transparent;
    transition: background 0.15s ease;
    pointer-events: none;
}

.wk-nav-link:not(.active):hover::after {
    background: var(--color-secundario);
}

.wk-nav-link.active::after {
    background: var(--color-primario);
    height: 3px;
}

/* ========== ICONOS DE SISTEMAS INDEPENDIENTES ========== */
.system-icon {
    background: none;
    border: none;
    padding: 0;
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transicion-media);
}

.system-icon:hover {
    transform: scale(1.05);
    background: none;
}

.system-icon i {
    font-size: 16px;
    line-height: 1;
}

/* Quitar caret automático de Bootstrap en este botón */
.system-icon.dropdown-toggle::after,
#accountDropdown.dropdown-toggle::after {
    display: none !important;
}

/* Wrapper interno */
.wk-account-icon-wrapper {
    width: 100%;
    height: 100%;
}

/* Foto de usuario cuando está logueado */
.wk-account-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-primario);
}

/* Icono de usuario cuando NO hay foto */
.wk-account-icon {
    font-size: 22px;
    color: var(--color-primario);
}

/* Botón de cuenta específico */
#accountDropdown.system-icon {
    background: #fff;
    border: 2px solid var(--color-primario);
    color: var(--color-primario);
}

#accountDropdown.system-icon i {
    color: inherit;
}

/* Hover del botón de cuenta */
#accountDropdown.system-icon:hover {
    background: #fff;
    border-color: var(--color-secundario);
    color: var(--color-secundario);
    transform: scale(1.05);
}

/* Caret más pequeño */
#accountDropdown.system-icon i.fa-caret-down {
    font-size: 11px;
    margin-left: 0;
}

/* Badges de estado */
.system-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-fondo);
}

.front-badge {
    background: #28a745;
}

.backoffice-badge {
    background: #ffc107;
}

/* Iconos de sistemas */
#frontUserDropdown i {
    color: var(--color-primario);
}

#backofficeDropdown i {
    color: var(--color-secundario);
}

/* ========== BUSCADOR SUPERIOR ========== */
/* Wrapper de barra + ubicación/fecha en una sola fila */
.search-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem !important;
}

/* Barra de búsqueda */
.nav-search-bar {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde-md);
    box-shadow: var(--sombra-media);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 900px;
    max-width: 900px;
    margin: 0;
    margin-left: 25%;
    transition: var(--transicion-media);
    position: relative;
}

.nav-search-bar:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
    border-color: var(--color-primario);
}

.search-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    transition: background-color 0.2s;
    position: relative;
}

.search-section:hover {
    background: #f5f5f5;
}

#searchInputPC,
#datePickerInput {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 1.4rem;
    background: transparent !important;
    border: none !important;
    outline: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--color-texto);
    transition: var(--transicion-rapida);
}

#searchInputPC:focus {
    background: rgba(0, 86, 179, 0.02) !important;
}

/* ========== BÚSQUEDA AVANZADA MEJORADA ========== */

/* Botón Advanced */
#wkSearchScopeBtn {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.375rem 0.75rem !important;
    font-weight: 500 !important;
    border-radius: var(--radio-borde-sm) !important;
    border: 1px solid var(--color-primario) !important;
    background: white !important;
    color: var(--color-primario) !important;
    transition: var(--transicion-rapida) !important;
    white-space: nowrap !important;
}

#wkSearchScopeBtn:hover {
    background: var(--color-primario-light) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--sombra-suave) !important;
}

#wkSearchScopeBtn:focus {
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2) !important;
}

/* Badge contador en botón */
#wkActiveCountBadge {
    font-size: 0.7rem !important;
    padding: 0.1rem 0.4rem !important;
    min-width: 1.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--transicion-rapida) !important;
}

/* Panel de búsqueda avanzada */
#wkSearchScopeBtn + .dropdown-menu {
    min-width: 320px !important;
    max-width: 400px !important;
    padding: 1.25rem !important;
    border-radius: var(--radio-borde-md) !important;
    border: 1px solid var(--color-borde) !important;
    box-shadow: var(--sombra) !important;
    animation: fadeInScale 0.2s ease !important;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header del panel */
#wkSearchScopeBtn + .dropdown-menu h6 {
    color: var(--color-texto) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

#wkSelectedCount {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}

/* Grid de checkboxes */
.scope-checkbox-item {
    margin-bottom: 0.25rem !important;
}

.scope-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.625rem 0.875rem !important;
    border-radius: var(--radio-borde-sm) !important;
    border: 1px solid var(--color-borde-light) !important;
    background: var(--color-fondo) !important;
    cursor: pointer !important;
    transition: var(--transicion-rapida) !important;
    user-select: none !important;
}

.scope-checkbox-label:hover {
    border-color: var(--color-primario) !important;
    background: rgba(0, 86, 179, 0.05) !important;
    transform: translateY(-1px) !important;
}

.scope-checkbox-label i {
    font-size: 1rem !important;
    transition: var(--transicion-rapida) !important;
}

.scope-checkbox-label span {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: var(--transicion-rapida) !important;
}

/* Estado activo (checked) */
.wk-scope-checkbox:checked + .scope-checkbox-label {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: white !important;
}

.wk-scope-checkbox:checked + .scope-checkbox-label i {
    color: white !important;
}

.wk-scope-checkbox:checked + .scope-checkbox-label:hover {
    background: var(--color-primario) !important;
    opacity: 0.9 !important;
}

/* Ocultar checkbox nativo */
.wk-scope-checkbox.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Grupos de scopes */
.scope-group-header {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 0.5rem !important;
    color: var(--color-texto-suave) !important;
}

/* Botones de acción en panel */
#wkSearchScopeBtn + .dropdown-menu .btn {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border-radius: var(--radio-borde-sm) !important;
    transition: var(--transicion-rapida) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

#wkScopeNoneBtn {
    border-color: var(--color-danger) !important;
    color: var(--color-danger) !important;
}

#wkScopeNoneBtn:hover {
    background: var(--color-danger) !important;
    color: white !important;
}

#wkScopeResetBtn {
    border-color: var(--color-secondary) !important;
    color: var(--color-secondary) !important;
}

#wkScopeResetBtn:hover {
    background: var(--color-secondary) !important;
    color: white !important;
}

#wkScopeApplyBtn:hover {
    background: var(--color-secundario) !important;
    border-color: var(--color-secundario) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--sombra-suave) !important;
}

/* ========== BADGES ACTIVOS DEBAJO DEL CAMPO ========== */
#wkActiveScopesBadges {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 0.5rem !important;
    display: none !important;
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
    z-index: 999 !important;
    animation: fadeInUp 0.2s ease !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#wkActiveScopesBadges .badge {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.625rem !important;
    border-radius: var(--radio-borde) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    box-shadow: var(--sombra-suave) !important;
    transition: var(--transicion-rapida) !important;
    border: none !important;
}

#wkActiveScopesBadges .badge:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--sombra) !important;
}

#wkActiveScopesBadges .badge i {
    font-size: 0.65rem !important;
}

#wkActiveScopesBadges .badge .btn-close {
    font-size: 0.5rem !important;
    opacity: 0.7 !important;
    padding: 0.25rem !important;
    margin-left: 0.125rem !important;
    transition: var(--transicion-rapida) !important;
}

#wkActiveScopesBadges .badge .btn-close:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

/* Colores para badges según tipo */
#wkActiveScopesBadges .badge.bg-primary {
    background: linear-gradient(135deg, var(--scope-primary), #0069d9) !important;
}

#wkActiveScopesBadges .badge.bg-warning {
    background: linear-gradient(135deg, var(--scope-warning), #e0a800) !important;
    color: #212529 !important;
}

#wkActiveScopesBadges .badge.bg-warning .btn-close {
    filter: invert(1) brightness(0.5) !important;
}

#wkActiveScopesBadges .badge.bg-success {
    background: linear-gradient(135deg, var(--scope-success), #218838) !important;
}

#wkActiveScopesBadges .badge.bg-info {
    background: linear-gradient(135deg, var(--scope-info), #138496) !important;
}

#wkActiveScopesBadges .badge.bg-secondary {
    background: linear-gradient(135deg, var(--scope-secondary), #5a6268) !important;
}

/* ========== BOTÓN DE BÚSQUEDA ========== */
.search-btn {
    background: var(--color-primario) !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    transition: var(--transicion-media) !important;
    cursor: pointer !important;
    margin-left: 0.5rem !important;
}

.search-btn:hover {
    background: var(--color-secundario) !important;
    transform: scale(1.05) rotate(5deg) !important;
    box-shadow: var(--sombra) !important;
}

.search-btn:active {
    transform: scale(0.95) !important;
}

.search-btn i {
    font-size: 1.1rem !important;
}

/* ========== DATEPICKER PERSONALIZADO ========== */
#datePickerDropdown {
    width: 300px;
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde-md);
    box-shadow: var(--sombra);
    padding: 1rem;
    z-index: 1050;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    animation: fadeInScale 0.2s ease;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.month-title {
    font-weight: 600;
    margin: 0;
    color: var(--color-texto);
    font-size: 1rem;
}

.calendar-grid {
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: 0.5rem;
}

.weekdays,
.days {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 0.25rem;
}

.weekdays > div {
    text-align: center;
    color: var(--color-texto-suave);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.25rem;
}

.calendar-day {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.875rem;
    transition: var(--transicion-rapida);
    border: 2px solid transparent;
    background: white;
}

.calendar-day:hover:not(.disabled) {
    background: var(--color-fondo);
    border-color: var(--color-borde-light);
}

.calendar-day.today {
    border-color: var(--color-primario);
    background: var(--color-primario-light);
    color: var(--color-primario);
    font-weight: bold;
}

.calendar-day.selected {
    background: var(--color-primario);
    color: #fff;
    font-weight: bold;
}

.calendar-day.previous-selected {
    background: var(--color-secundario);
    color: #fff;
    font-weight: bold;
}

.calendar-day.disabled {
    color: var(--color-deshabilitado);
    cursor: not-allowed;
    text-decoration: line-through;
    background: #f8f9fa;
}

/* ========== DROPDOWNS GENERALES ========== */
.dropdown-menu {
    border-radius: var(--radio-borde-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--sombra);
    padding: 0.5rem 0;
    min-width: 200px;
    animation: fadeInScale 0.2s ease;
}

.dropdown-item {
    padding: 0.5rem 1rem;
    transition: var(--transicion-rapida);
    color: var(--color-texto);
    display: block;
    border-radius: 4px;
    margin: 0 0.25rem;
}

.dropdown-item:hover {
    background: rgba(0, 86, 179, 0.06);
    color: var(--color-secundario);
}

.dropdown-item i {
    color: var(--color-primario);
    transition: var(--transicion-rapida);
}

.dropdown-item small {
    color: var(--color-texto-suave);
    transition: var(--transicion-rapida);
    font-size: 0.8rem;
}

.dropdown-item:hover i,
.dropdown-item:hover small {
    color: var(--color-secundario);
}

/* Header diferenciado para sistemas */
.dropdown-header {
    font-weight: 600;
    padding: 0.5rem 1rem;
    color: var(--color-texto);
    font-size: 0.9rem;
}

.front-header {
    border-left: 3px solid var(--color-primario);
    background: rgba(0, 86, 179, 0.05);
}

.backoffice-header {
    border-left: 3px solid var(--color-secundario);
    background: rgba(40, 167, 69, 0.05);
}

/* ========== SELECTOR DE IDIOMA ========== */
.language-selector {
    height: 40px;
    border: 2px solid var(--color-primario);
    background: transparent;
    color: var(--color-primario);
    padding: 0 0.75rem;
    border-radius: var(--radio-borde);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transicion-media);
    font-weight: 500;
}

.language-selector:hover {
    border-color: var(--color-secundario);
    color: var(--color-secundario);
    transform: translateY(-1px);
    box-shadow: var(--sombra-suave);
}

.language-flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--color-borde-light);
}

/* ========== HAMBURGER MENU (COMPACTO) ========== */
#navbarNav {
    position: absolute;
    top: calc(40% + 15px);
    width: 300px;
    background: #fff;
    z-index: 1050;
    box-shadow: var(--sombra);
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 0 0 var(--radio-borde-md) var(--radio-borde-md);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#navbarNav .navbar-nav {
    padding: 0.75rem;
}

/* ========== BOTONES GENERALES ========== */
.btn-nav {
    border-radius: var(--radio-borde);
    padding: 0.375rem 1rem;
    font-weight: 500;
    transition: var(--transicion-media);
}

/* ========== CIUDAD + FECHA A LA DERECHA DE LA BARRA ========== */
.location-inline {
    font-size: 13px;
    white-space: nowrap;
}

.location-inline .location-text {
    font-weight: bold;
    color: var(--color-primario);
}

.location-inline .separator {
    margin: 0 8px;
    color: #ccc;
}

.location-inline .date-text {
    color: #555;
}

/* Línea de ubicación + fecha debajo del buscador */
.location-bar {
    max-width: 900px;
    margin: 0.75rem auto 0;
    padding: 0 4px 4px;
    font-size: 0.85rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    white-space: nowrap;
    color: var(--color-texto-suave);
}

.location-bar .location-text {
    font-weight: bold;
    color: var(--color-primario);
}

.location-bar .separator {
    margin: 0 10px;
    color: var(--color-borde);
}

.location-bar .date-text {
    color: var(--color-texto-suave);
    font-weight: 500;
}

/* ========== MENÚ HAMBURGER ESPECÍFICO ========== */
.menu-section {
    margin-bottom: 1rem;
}

.menu-section h6 {
    color: var(--color-primario);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.menu-section_2 {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.menu-section_2 li {
    /*margin-bottom: 0.5rem;*/
}

.menu-section_2 a {
    text-decoration: none;
    color: var(--color-texto);
    transition: var(--transicion-rapida);
    font-size: 0.9rem;
    padding: 0.25rem 0;
    display: block;
}

.menu-section_2 a:hover {
    color: var(--color-secundario);
    padding-left: 0.25rem;
}

/* ========== RESPONSIVE PARA TABLET ========== */
@media (max-width: 1199.98px) {
    .nav-search-bar {
        flex: 0 0 85% !important;
        max-width: 85% !important;
        margin-left: 15% !important;
    }
    
    .location-bar {
        max-width: 85% !important;
        margin-left: 15% !important;
    }
}

@media (max-width: 991.98px) {
    .nav-search-bar {
        flex: 0 0 90% !important;
        max-width: 90% !important;
        margin-left: 5% !important;
    }
    
    .location-bar {
        max-width: 90% !important;
        margin-left: 5% !important;
    }
    
    /* Ajustar tamaño del panel de búsqueda avanzada */
    #wkSearchScopeBtn + .dropdown-menu {
        min-width: 280px !important;
        max-width: 350px !important;
    }
}

@media (max-width: 767.98px) {
    .main-navbar {
        padding: 0.5rem;
    }
    
    .nav-search-bar {
        flex: 0 0 95% !important;
        max-width: 95% !important;
        margin-left: 2.5% !important;
    }
    
    .search-section {
        flex: 0 0 auto !important;
    }
    
    .search-section:first-child {
        flex: 1 !important;
    }
    
    .location-bar {
        max-width: 95% !important;
        margin-left: 2.5% !important;
        justify-content: center !important;
        font-size: 0.8rem !important;
    }
    
    /* Ocultar badges en móvil si hay muchos */
    #wkActiveScopesBadges {
        max-height: 60px !important;
        overflow-y: auto !important;
    }
}

/* ========== ESTILOS PARA SELECTORES ========== */
#sel_city {
    border-radius: var(--radio-borde);
    padding-right: 30px;
    text-align: right;
    border: 1px solid var(--color-borde);
    font-size: 0.9rem;
}

#sel_city + .fa-caret-down {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
    color: var(--color-texto-suave);
}

/* ========== SPINNER DE CARGA ========== */
#spinnerPC {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1001;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0 0 var(--radio-borde-md) var(--radio-borde-md);
    padding: 0.5rem;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========== UTILIDADES ========== */
.mt-3 {
    margin-top: 1rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.bg-white {
    background-color: #fff !important;
}

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

.rounded {
    border-radius: var(--radio-borde-md) !important;
}

/* Smooth transitions for all interactive elements */
button, 
input, 
select, 
.dropdown-item, 
.scope-checkbox-label,
.badge {
    transition: var(--transicion-rapida) !important;
}

/* Focus states for accessibility */
button:focus-visible,
input:focus-visible,
.dropdown-toggle:focus-visible {
    outline: 2px solid var(--color-primario) !important;
    outline-offset: 2px !important;
}

/* Print styles */
@media print {
    .nav-search-bar,
    #wkSearchScopeBtn,
    .search-btn,
    #datePickerInput,
    .location-bar {
        display: none !important;
    }
}

/* =========================================================
   NUEVO: SELECTOR PAÍS (igual al de ciudad + bandera inline)
   ========================================================= */
.wk-country-select-wrap{
    position:relative;
    width:45%;
    display:inline-block;
}

.wk-country-flag{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    width:20px;
    height:15px;
    object-fit:cover;
    border-radius:2px;
    border:1px solid var(--color-borde-light);
    pointer-events:none;
    z-index:2;
}

#sel_country{
    border-radius: var(--radio-borde);
    padding-left: 42px; /* espacio para bandera */
    padding-right: 30px; /* espacio caret */
    text-align: left;
    border: 1px solid var(--color-borde);
    font-size: 0.9rem;
    height: auto;
}

.wk-country-caret{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
    font-size:14px;
    color: var(--color-texto-suave);
}

/* ========= LOCATION ROW: país + ciudad en una línea ========= */
.wk-location-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
}

/* wrappers con el mismo alto/forma */
.wk-country-select-wrap,
.wk-city-select-wrap{
  position:relative;
  flex:1 1 0;
  min-width:0;
}

/* -------- País: bandera dentro, a la izquierda -------- */
.wk-country-flag{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:15px;
  object-fit:cover;
  border-radius:2px;
  border:1px solid var(--color-borde-light);
  pointer-events:none;
  z-index:2;
}

#sel_country{
  width:100%;
  border-radius: var(--radio-borde);
  padding-left: 44px;  /* espacio para bandera */
  padding-right: 34px; /* caret */
  text-align:left;
  border:1px solid var(--color-borde);
  font-size:0.9rem;
  height:40px;
  line-height:40px;
  appearance:none;
}

.wk-country-caret{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  font-size:14px;
  color: var(--color-texto-suave);
}

/* -------- Ciudad: estilo igual, sin bandera -------- */
#sel_city{
  width:100%;
  border-radius: var(--radio-borde);
  padding-right: 34px;
  text-align:left; /* en tu CSS estaba right; aquí lo dejo coherente */
  border:1px solid var(--color-borde);
  font-size:0.9rem;
  height:40px;
  line-height:40px;
  appearance:none;
}

.wk-city-caret{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  font-size:14px;
  color: var(--color-texto-suave);
}

/* ===== Location: ciudad izquierda + país derecha (como imagen 2) ===== */
.wk-location-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
}

/* cada pill ocupa ~50% */
.wk-pill{
  position:relative;
  flex:1 1 0;
  min-width:0;
  height:40px;
  border:1px solid #dfe3e8;
  border-radius:999px;
  background:#fff;
  display:flex;
  align-items:center;
  padding:0 12px;
}

/* SELECT dentro del pill */
.wk-pill-select{
  width:100%;
  height:38px;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:0.95rem;
  padding-right:28px; /* espacio caret */
  appearance:none;
}

/* caret */
.wk-pill-caret{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  font-size:14px;
  color:#6c757d;
}

/* País: bandera dentro del mismo pill, a la izquierda */
.wk-pill-flag{
  width:20px !important;
  height:15px !important;
  object-fit:cover !important;
  border-radius:2px !important;
  border:1px solid #e9ecef !important;
  display:block !important;
  margin-right:10px !important;
  flex:0 0 auto;
}

/* select del país necesita padding-left extra por la bandera */
.wk-pill-select-country{
  padding-left:0 !important;
}

/* hover suave */
.wk-pill:hover{
  border-color:#cfd6dd;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

/* ===== Social icons: ocupar todo el ancho + colores primario/hover secundario ===== */
.wk-social-icons{
  width:100%;
  display:flex;
  justify-content:space-between; /* reparte todo el ancho */
  align-items:center;
  gap:12px;
  flex-wrap:wrap; /* si no caben, bajan */
}

.wk-social-icons .btn-social{
  flex:1 1 0;                 /* cada uno intenta ocupar espacio */
  min-width:44px;             /* tamaño mínimo clickeable */
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  text-decoration:none;
  background:transparent;
  border:1px solid var(--color-borde-light);
  transition: var(--transicion-rapida);
}

/* color normal */
.wk-social-icons .btn-social i{
  color: var(--color-primario) !important;
  font-size:18px;
  line-height:1;
  transition: var(--transicion-rapida);
}

/* hover */
.wk-social-icons .btn-social:hover{
  border-color: var(--color-secundario);
  box-shadow: var(--sombra-suave);
  transform: translateY(-1px);
}

.wk-social-icons .btn-social:hover i{
  color: var(--color-secundario) !important;
}

/* ===== FIX: hover de iconos SIEMPRE secundario ===== */
.wk-social-icons{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* el link controla el color */
.wk-social-icons a.btn-social{
  flex:1 1 0;
  min-width:0px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  text-decoration:none !important;
  background:#fff; /* como tu screenshot (blanco) */
  border:1px solid var(--color-borde-light) !important;
  color: var(--color-primario) !important;
  transition: var(--transicion-rapida) !important;
}

/* icono normal */
.wk-social-icons a.btn-social i{
  color: var(--color-primario) !important;
  transition: var(--transicion-rapida) !important;
}

/* hover: cambia TODO a secundario */
.wk-social-icons a.btn-social:hover,
.wk-social-icons a.btn-social:focus{
  border-color: #F8981D !important;
  color: #F8981D !important;
  box-shadow: var(--sombra-suave) !important;
  transform: translateY(-1px);
}

.wk-social-icons a.btn-social:hover i,
.wk-social-icons a.btn-social:focus i{
  color: #F8981D !important;
}

/* si hay estados "active" o similares, también */
.wk-social-icons a.btn-social:active{
  border-color: var(--color-secundario) !important;
  color: var(--color-secundario) !important;
}
.wk-social-icons a.btn-social:active i{
  color: var(--color-secundario) !important;
}