/* ==========================================================
   busqueda.css — Barra de búsqueda AJAX – PortoVial
   Navbar: fondo BLANCO | Color primario: #541b1b
   ========================================================== */

/* ── Wrapper dentro del c-nav-menu ─────────────────────── */
.c-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* ── Formulario de búsqueda ─────────────────────────────── */
.c-search-form {
    display: flex;
    align-items: center;
    background: #f4f4f4;
    border: 1.5px solid #d1d5db;
    border-radius: 2rem;
    padding: 0.3rem 0.85rem;
    transition: border-color 0.22s, background 0.22s, box-shadow 0.22s, width 0.25s;
    width: 200px;
}

.c-search-form:focus-within {
    background: #ffffff;
    border-color: #541b1b;
    box-shadow: 0 0 0 3px rgba(84, 27, 27, 0.13);
    width: 265px;
}

/* ── Input ──────────────────────────────────────────────── */
.c-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #1a1a1a;
    font-size: 0.85rem;
    font-family: inherit;
    padding: 0.28rem 0;
    min-width: 0;
    /* quitar el botón de limpieza nativo del navegador */
    -webkit-appearance: none;
}

.c-search-input::placeholder {
    color: #9ca3af;
}

/* Quitar el botón "x" nativo de algunos browsers en type=search */
.c-search-input::-webkit-search-cancel-button,
.c-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    display: none;
}

/* ── Ícono lupa ─────────────────────────────────────────── */
.c-search-icon {
    display: flex;
    align-items: center;
    color: #541b1b;
    margin-right: 0.45rem;
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.c-search-form:focus-within .c-search-icon {
    opacity: 1;
}

.c-search-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Botón clear ────────────────────────────────────────── */
.c-search-clear {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 0;
    margin-left: 0.3rem;
    line-height: 1;
    flex-shrink: 0;
    font-size: 1rem;
    transition: color 0.18s;
}

.c-search-clear:hover {
    color: #541b1b;
}

.c-search-clear.is-visible {
    display: flex;
    align-items: center;
}

/* ── Dropdown ────────────────────────────────────────────── */
.c-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 390px;
    max-height: 460px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 99999;
    display: none;
    flex-direction: column;
    animation: searchFadeIn 0.17s ease-out;
    border: 1px solid #e5e7eb;
    scrollbar-width: thin;
    scrollbar-color: #d1cac4 #f9f5f5;
}

.c-search-dropdown.is-open {
    display: flex;
}

@keyframes searchFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Cabecera del dropdown ──────────────────────────────── */
.c-search-dropdown__header {
    padding: 0.55rem 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #541b1b;
    background: #fdf7f7;
    border-bottom: 1px solid #f0e8e8;
    flex-shrink: 0;
    border-radius: 0.75rem 0.75rem 0 0;
}

/* ── Ítem de resultado ──────────────────────────────────── */
.c-search-result {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.72rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.13s;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
}

.c-search-result:last-child {
    border-bottom: none;
}

.c-search-result:hover,
.c-search-result:focus {
    background: #fdf5f5;
    outline: none;
}

.c-search-result__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
}

.c-search-result__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Badges de categoría */
.c-search-result__category {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    color: #fff;
    background: #541b1b;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.c-search-result__category--servicio {
    background: #1a5c3a;
}

.c-search-result__category--tramite {
    background: #541b1b;
}

.c-search-result__category--rtv {
    background: #7c4a1e;
}

.c-search-result__category--contacto {
    background: #1a3a5c;
}

.c-search-result__category--institucional {
    background: #2d6a4f;
}

.c-search-result__desc {
    font-size: 0.74rem;
    color: #6b7280;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* Resaltado coincidencias */
.c-search-result mark {
    background: #fde68a;
    color: #541b1b;
    border-radius: 2px;
    padding: 0 1px;
    font-weight: 700;
    font-style: normal;
}

/* ── Sin resultados / cargando ──────────────────────────── */
.c-search-empty,
.c-search-loading {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: #6b7280;
}

.c-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.c-search-loading::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #541b1b;
    border-radius: 50%;
    animation: svSpin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes svSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Arreglo del logo en el navbar ──────────────────────── */
.c-navbar__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
}

.c-navbar__logo-img {
    height: 60px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    display: block;
    flex-shrink: 0;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .c-search-form {
        width: 160px;
    }

    .c-search-form:focus-within {
        width: 210px;
    }

    .c-search-dropdown {
        width: 320px;
    }
}

@media (max-width: 768px) {
    .c-search-wrapper {
        width: 100%;
        margin: 0.4rem 0;
    }

    .c-search-form {
        width: 100%;
    }

    .c-search-form:focus-within {
        width: 100%;
    }

    .c-search-dropdown {
        width: 100%;
        right: 0;
        left: 0;
    }
}