/* Logo completo: 15 % más pequeño, conservando el centrado del template. */
.app-sidebar .main-sidebar-header .header-logo img.desktop-logo,
.app-sidebar .main-sidebar-header .header-logo img.desktop-dark,
.app-sidebar .main-sidebar-header .header-logo img.desktop-white {
    height: 2.125rem;
    width: auto;
    margin-inline: auto;
}

/* Estilos para dispositivos móviles */
@media (max-width: 767.98px) {
    .main-header-container .dropdown-menu {
        left: 0px !important;
    }

    .app-header.nowa-mobile-search-active {
        z-index: 10001 !important;
    }

    .header-search .main-header-dropdown.show {
        z-index: 10003 !important;
    }

    .header-search .input-group,
    .header-search .buscar-productos,
    .header-search .search-trigger {
        position: relative;
        z-index: 10004;
    }
}

/* Estilos para el campo de búsqueda de productos */
.buscar-productos {
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
}

/* Sugerencias visuales rotativas para el buscador del header (sin JavaScript) */
.nowa-search-demo .nowa-search-demo-text {
    position: absolute;
    inset: 0 2.75rem 0 0.75rem;
    z-index: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--text-muted, #8c9097);
    font-size: 0.8125rem;
    line-height: 1.2;
    pointer-events: none;
}

.nowa-search-demo .nowa-search-demo-prefix {
    flex: 0 0 auto;
    line-height: inherit;
}

.nowa-search-demo .nowa-search-demo-terms {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 1.2em;
}

.nowa-search-demo .nowa-search-demo-terms > span {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    max-width: 100%;
    overflow: hidden;
    opacity: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    clip-path: inset(0 100% 0 0);
    line-height: inherit;
    transform: translateY(-50%);
    animation: nowa-search-suggestion 16s steps(24, end) infinite;
}

.nowa-search-demo .nowa-search-demo-terms > span:nth-child(2) {
    animation-delay: 4s;
}

.nowa-search-demo .nowa-search-demo-terms > span:nth-child(3) {
    animation-delay: 8s;
}

.nowa-search-demo .nowa-search-demo-terms > span:nth-child(4) {
    animation-delay: 12s;
}

.nowa-search-demo:focus-within .nowa-search-demo-text,
.nowa-search-demo .buscar-productos:not(:placeholder-shown) + .nowa-search-demo-text {
    display: none;
}

@keyframes nowa-search-suggestion {
    0% {
        opacity: 1;
        clip-path: inset(0 100% 0 0);
    }

    16%, 22% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }

    24% {
        opacity: 1;
        clip-path: inset(0 100% 0 0);
    }

    25%, 100% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nowa-search-demo .nowa-search-demo-terms > span {
        animation: none;
    }

    .nowa-search-demo .nowa-search-demo-terms > span:last-child {
        opacity: 1;
        clip-path: none;
    }
}

/* Ancla el dropdown del typeahead junto al input */
.main-header-center.form-group {
    position: relative;
}

.buscar-productos:focus {
    border-color: #00b894;
    box-shadow: 0 0 0 2px #00b89433;
    position: relative;
    z-index: 9999;
}

.search-trigger {
    position: relative;
    z-index: 10000;
}

.buscar-productos.active-search {
    border-color: #0984e3;
    box-shadow: 0 0 8px #0984e355;
}

.buscar-productos.loading {
    background-image: url('../images/media/loader.svg');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
}

.nowa-search-history-dropdown {
    position: fixed;
    z-index: 10002;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--default-border, #e5e7eb);
    border-radius: 0.65rem;
    background: var(--custom-white, #fff);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

.nowa-search-history-dropdown.show {
    display: block;
}

.nowa-search-history-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--default-text-color, #1f2937);
    text-align: left;
    cursor: pointer;
}

.nowa-search-history-item:hover,
.nowa-search-history-item:focus-visible {
    background: var(--default-background, #f5f7fb);
    outline: none;
}

.nowa-search-history-content {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nowa-search-history-icon {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 1rem;
}

.nowa-search-history-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
}

.nowa-search-history-remove {
    flex: 0 0 auto;
    width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1;
}

.nowa-search-history-remove:hover,
.nowa-search-history-remove:focus-visible {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    outline: none;
}

[data-theme-mode="dark"] .nowa-search-history-dropdown,
[data-bs-theme="dark"] .nowa-search-history-dropdown,
.dark .nowa-search-history-dropdown {
    background: #1f2530;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

[data-theme-mode="dark"] .nowa-search-history-item:hover,
[data-theme-mode="dark"] .nowa-search-history-item:focus-visible,
[data-bs-theme="dark"] .nowa-search-history-item:hover,
[data-bs-theme="dark"] .nowa-search-history-item:focus-visible,
.dark .nowa-search-history-item:hover,
.dark .nowa-search-history-item:focus-visible {
    background: rgba(255, 255, 255, 0.08);
}

/* Blur overlay: solo efecto visual; los clics deben llegar al input (z-index mayor) */
.blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.blur-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.mini-cart-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mini-cart-suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--default-border);
    border-radius: 0.5rem;
    background-color: var(--custom-white);
    color: var(--default-text-color);
    text-decoration: none;
}

.mini-cart-suggestion-item:hover {
    background-color: var(--default-background);
    color: var(--default-text-color);
}

.mini-cart-suggestion-img {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    border: 1px solid var(--default-border);
    background-color: var(--default-background);
    object-fit: cover;
}

/* Typeahead (bootstrap3-typeahead): flechas ↑↓ marcan li.active — debe verse claro */
.typeahead.dropdown-menu {
    position: absolute !important;
    z-index: 10000 !important;
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    margin-top: 2px !important;
    min-width: 100% !important;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.25rem 0;
    border: 1px solid var(--default-border);
    background-color: var(--custom-white);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
}

.typeahead.dropdown-menu > li > a.dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--default-text-color);
    background-color: transparent;
    border: 0;
    width: 100%;
    text-align: left;
}

.typeahead.dropdown-menu > li.active > a.dropdown-item,
.typeahead.dropdown-menu > li.active > a {
    background-color: var(--primary01, rgba(56, 202, 179, 0.12));
    color: var(--default-text-color);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--primary-color);
}

.typeahead.dropdown-menu > li > a.dropdown-item:hover,
.typeahead.dropdown-menu > li > a:hover {
    background-color: var(--default-background);
    color: var(--default-text-color);
}

[data-theme-mode=dark] .typeahead.dropdown-menu {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.45);
}

[data-theme-mode=dark] .typeahead.dropdown-menu > li.active > a.dropdown-item,
[data-theme-mode=dark] .typeahead.dropdown-menu > li.active > a {
    background-color: var(--primary02, rgba(56, 202, 179, 0.2));
    color: var(--default-text-color);
}

html[data-sidebar-fijo] .app-sidebar,
html[data-sidebar-fijo] .app-content,
html[data-sidebar-fijo] .app-header,
html[data-sidebar-fijo] .main-sidebar,
html[data-sidebar-fijo] .animated-arrow,
html[data-sidebar-fijo] .animated-arrow span,
html[data-sidebar-fijo] .animated-arrow span:before,
html[data-sidebar-fijo] .animated-arrow span:after {
    transition: none;
}