/**
 * Barra de busqueda tipo pastilla. Icono: public/images/shared/iconos/busqueda-pill-icon.svg
 * Marcado: .busqueda-pill > .busqueda-pill__input + button.busqueda-pill__icon
 */
.busqueda-pill {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    min-height: 2.375rem;
    padding: 0 var(--space-3) 0 var(--space-4);
    /* Mismo criterio que .filtros-listado.form-combobox-floating: campo semitransparente + vidrio */
    background-color: transparent;
    border: 1px solid rgba(var(--color-granate-rgb), 0.12);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.busqueda-pill:focus-within {
    border-color: var(--color-granate);
    box-shadow: 0 0 0 2px rgba(var(--color-granate-rgb), 0.28);
}
.busqueda-pill__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--color-text-default);
}
.busqueda-pill__input::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}
.busqueda-pill__input:focus {
    outline: 0;
}

/* Autocompletado del navegador: el celeste no pinta la pastilla.
   El recuadro interior tiene que ser opaco; un transparente no tapa el azul de Chrome. */
.busqueda-pill__input:-webkit-autofill,
.busqueda-pill__input:-webkit-autofill:hover,
.busqueda-pill__input:-webkit-autofill:focus,
.busqueda-pill__input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--color-text-default);
    caret-color: var(--color-text-default);
    background-color: var(--panel-main-bg, var(--color-crema)) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--panel-main-bg, var(--color-crema)) inset !important;
    box-shadow: 0 0 0 1000px var(--panel-main-bg, var(--color-crema)) inset !important;
    transition: background-color 5000s ease-out;
}

.busqueda-pill__input:autofill {
    background-color: var(--panel-main-bg, var(--color-crema)) !important;
    box-shadow: 0 0 0 1000px var(--panel-main-bg, var(--color-crema)) inset;
    -webkit-text-fill-color: var(--color-text-default);
    caret-color: var(--color-text-default);
}

/* X de limpiar (type=search): mismo granate que listado-tabla__filtro-input */
.busqueda-pill__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 0.95rem;
    height: 0.95rem;
    margin-right: 0.05rem;
    cursor: pointer;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath stroke='%23661414' stroke-width='1.75' stroke-linecap='round' d='M2 2l8 8M10 2L2 10'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.92;
}

.busqueda-pill__input::-webkit-search-cancel-button:hover {
    opacity: 1;
}

.busqueda-pill__input::-webkit-search-decoration,
.busqueda-pill__input::-webkit-search-results-button,
.busqueda-pill__input::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.busqueda-pill__input::-moz-search-clear-button {
    -moz-appearance: none;
    appearance: none;
    width: 0.95rem;
    height: 0.95rem;
    cursor: pointer;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath stroke='%23661414' stroke-width='1.75' stroke-linecap='round' d='M2 2l8 8M10 2L2 10'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.92;
}

.busqueda-pill__input::-moz-search-clear-button:hover {
    opacity: 1;
}

[data-theme="dark"] .busqueda-pill {
    background-color: var(--panel-floating-bg, rgba(240, 235, 224, 0.08));
    border-color: rgba(var(--color-blanco-rgb), 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] .busqueda-pill:focus-within {
    border-color: var(--color-dorado, #e0b070);
    box-shadow: 0 0 0 2px rgba(var(--color-dorado-rgb), 0.28);
}

[data-theme="dark"] .busqueda-pill__input {
    color: var(--color-blanco);
}

[data-theme="dark"] .busqueda-pill__input:-webkit-autofill,
[data-theme="dark"] .busqueda-pill__input:-webkit-autofill:hover,
[data-theme="dark"] .busqueda-pill__input:-webkit-autofill:focus,
[data-theme="dark"] .busqueda-pill__input:-webkit-autofill:active,
[data-theme="dark"] .busqueda-pill__input:autofill {
    -webkit-text-fill-color: var(--color-blanco);
    caret-color: var(--color-blanco);
}

[data-theme="dark"] .busqueda-pill__input::placeholder {
    color: rgba(var(--color-blanco-rgb), 0.62);
}

/* SVG de lupa hardcodea granate oscuro (#661414): en oscuro se funde con el fondo. */
[data-theme="dark"] .busqueda-pill__icon {
    filter: brightness(0) saturate(100%) invert(88%) sepia(18%) saturate(700%) hue-rotate(346deg) brightness(1.05);
}

[data-theme="dark"] .busqueda-pill__input::-webkit-search-cancel-button,
[data-theme="dark"] .busqueda-pill__input::-moz-search-clear-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath stroke='%23e0b070' stroke-width='1.75' stroke-linecap='round' d='M2 2l8 8M10 2L2 10'%3E%3C/path%3E%3C/svg%3E");
}

.busqueda-pill__icon {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent url('../../images/shared/iconos/busqueda-pill-icon.svg') center / contain no-repeat;
}

/** Drawer / formulario: pastilla angosta, borde granate y relleno rosado muy claro */
.busqueda-pill--granate-suave {
    --busqueda-pill-h: 1.875rem;
    width: fit-content;
    min-width: min(100%, 22rem);
    max-width: min(100%, 27rem);
    min-height: var(--busqueda-pill-h);
    padding: 0 0.85rem 0 0.55rem;
    gap: 0.35rem;
    background-color: color-mix(in srgb, var(--color-granate, #661414) 7%, var(--color-crema, #f7f3e8));
    border: 1px solid var(--color-granate, #661414);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.busqueda-pill--granate-suave:focus-within {
    border-color: var(--color-granate-deep, #5c1212);
    box-shadow: 0 0 0 2px rgba(var(--color-granate-rgb, 102, 20, 20), 0.18);
}

/* Opt-in: el borde de 1px se pierde sobre el fondo del drawer. No altera el resto de pastillas. */
.busqueda-pill--borde-grueso {
    border-width: 2px;
}

.busqueda-pill--granate-suave.busqueda-pill--borde-grueso {
    --busqueda-pill-h: 2.375rem;
    min-height: var(--busqueda-pill-h);
    /* 22rem corta «…» contra la lupa. 26rem deja el placeholder entero. */
    width: min(100%, 26rem);
    min-width: min(100%, 26rem);
}

.busqueda-pill--granate-suave.busqueda-pill--borde-grueso .busqueda-pill__input {
    font-size: 0.875rem;
}

.busqueda-pill--granate-suave.busqueda-pill--borde-grueso .busqueda-pill__icon {
    flex-basis: 1.15rem;
    width: 1.15rem;
    height: 1.15rem;
}

.busqueda-pill--borde-grueso:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--color-granate-rgb, 102, 20, 20), 0.22);
}

.busqueda-pill--granate-suave .busqueda-pill__input {
    font-size: 0.8125rem;
    line-height: 1.2;
}

.busqueda-pill--granate-suave .busqueda-pill__input::placeholder {
    color: var(--color-granate, #661414);
    opacity: 0.9;
}

.busqueda-pill--granate-suave .busqueda-pill__icon {
    flex: 0 0 0.95rem;
    width: 0.95rem;
    height: 0.95rem;
}

.busqueda-pill--icono-izquierda .busqueda-pill__icon {
    order: -1;
    margin-right: 0.15rem;
    margin-left: 0.05rem;
}

[data-theme="dark"] .busqueda-pill--granate-suave {
    background-color: color-mix(in srgb, var(--color-granate, #661414) 18%, var(--panel-main-bg, #12100d));
    border-color: rgba(var(--color-dorado-rgb), 0.45);
}

[data-theme="dark"] .busqueda-pill--granate-suave .busqueda-pill__input::placeholder {
    color: rgba(var(--color-blanco-rgb), 0.62);
}