/* ==========================================================================
   AVALPAYCENTER - SEARCH BAR & FLOATING AUTOCOMPLETE SYSTEM
   Elimina definitivamente el solapamiento del label y ofrece
   el buscador predictivo oficial con resaltado azul y footer de límite.
   ========================================================================== */

/* 1. Contenedor del buscador */
.input-search,
div.input-search,
[class*="input-search"] {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}

.input-wrapper,
div.input-wrapper,
[class*="input-wrapper"] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 48px !important;
    background: #ffffff !important;
    border: 1.5px solid #8fa2b8 !important;
    border-radius: 28px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
    z-index: 10 !important;
}

.input-wrapper:focus-within,
.input-wrapper.active,
.input-wrapper.is-focused {
    border-color: #002d72 !important;
    box-shadow: 0 0 0 3px rgba(93, 186, 235, 0.25) !important;
}

/* 2. Ícono de Lupa oficial */
.lens,
div.lens,
[class*="lens"] {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23314b70' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat center center !important;
    background-size: contain !important;
    transform: none !important;
    padding: 0 !important;
}

/* 3. Input Container */
.input-container,
div.input-container,
[class*="input-container"] {
    position: relative !important;
    flex: 1 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* 4. Input de Búsqueda */
.search-input,
input.search-input,
input[id="search-input"],
input[type="search"] {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #002d72 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 5 !important;
    -webkit-appearance: none !important;
}

/* 5. Placeholder / Label: cuando está vacío queda centrado */
.search-label,
label.search-label,
label[for="search-input"] {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #627d98 !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out !important;
    background: transparent !important;
    z-index: 4 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ELIMINACIÓN TOTAL DEL SOLAPAMIENTO:
   Si el input tiene foco, si tiene contenido, si el usuario escribe o si tiene la clase apc-has-text / hide-label */
.search-input:focus ~ .search-label,
.search-input:not(:placeholder-shown) ~ .search-label,
.search-input.apc-has-text ~ .search-label,
.search-input.has-content ~ .search-label,
.search-label.hide-label,
.search-label.apc-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
}

/* Si en el DOM el label va ANTES del input: .search-container:focus-within .search-label */
.input-container:focus-within > .search-label,
.input-wrapper:focus-within .search-label,
.input-wrapper.is-focused .search-label {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

/* 6. Menú desplegable predictivo oficial (Dropdown) */
.apc-search-dropdown {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 340px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 45, 114, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #d9e2ec !important;
    z-index: 99999 !important;
    overflow: hidden !important;
    display: none;
    font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif !important;
    box-sizing: border-box !important;
}

.apc-search-dropdown-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    max-height: 290px !important;
    overflow-y: auto !important;
}

.apc-search-dropdown-item {
    padding: 10px 18px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #002d72 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.12s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
}

.apc-search-dropdown-item:hover,
.apc-search-dropdown-item.active {
    background-color: #f0f6fc !important;
}

.apc-search-dropdown-item .item-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
}

.apc-search-dropdown-item .item-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
}

.apc-search-dropdown-item .item-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #002d72 !important;
    line-height: 1.3 !important;
}

.apc-search-dropdown-item .item-category-tag {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.item-category-tag.cat-obligaciones {
    background-color: #e6f0fa !important;
    color: #002d72 !important;
    border: 1px solid #cce0f5 !important;
}

.item-category-tag.cat-publicos {
    background-color: #e6f7ec !important;
    color: #007a33 !important;
    border: 1px solid #c2ebd0 !important;
}

.item-category-tag.cat-conjuntos {
    background-color: #fff4e5 !important;
    color: #b45309 !important;
    border: 1px solid #fde3bf !important;
}

/* Resaltado del texto buscado en azul celeste oficial (#5dbaeb / #0091ff) */
.apc-search-dropdown-item .highlight-match {
    color: #5dbaeb !important;
    font-weight: 700 !important;
    text-transform: inherit !important;
}

/* Pie de advertencia cuando hay más de 20 resultados */
.apc-search-dropdown-footer {
    background-color: #f8fafc !important;
    border-top: 1px solid #eef2f6 !important;
    padding: 12px 18px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #486581 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.apc-search-dropdown-footer .footer-icon {
    width: 20px !important;
    height: 20px !important;
    background: #f97316 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

.apc-search-dropdown-footer a {
    color: #5dbaeb !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}