.qg-content-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .75rem;
    align-items: center;
    width: min(100% - 2rem, 64rem);
    margin: 1.5rem auto 2.75rem;
    padding: .875rem;
    border: .0625rem solid var(--qg-public-color-white-20);
    border-radius: 1rem;
    background: var(--qg-public-gradient-status);
    box-shadow: var(--qg-public-shadow-dark);
}

/* El aspecto del campo vive ahora en components-mod.css (.qg-campo), que lo comparte toda la web pública.
   Aquí se queda solo lo propio del buscador. */

/* Aspa de borrar del navegador: con la forma y los colores de la web en lugar del azul por defecto. */
.qg-content-search input[type="search"]::-webkit-search-cancel-button,
.qg-content-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: .875rem;
    height: .875rem;
    margin-left: .5rem;
    background-color: var(--qg-public-color-white-78);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    cursor: pointer;
}

.qg-content-search input[type="search"]::-webkit-search-cancel-button:hover,
.qg-content-search-input::-webkit-search-cancel-button:hover {
    background-color: var(--qg-public-color-secondary-coral);
}

/* Desplegables con el mismo aspecto que los campos. La flecha del navegador desentonaba con el resto, asi que
   se dibuja una propia con dos gradientes (nada de imagenes con color escrito a mano) y se reserva sitio para ella.
   Se repite en hover y foco porque esas reglas usan el atajo `background`, que borraria la flecha. */
select.qg-content-search-input,
select.qg-content-search-input:hover,
select.qg-content-search-input:focus {
    appearance: none;
    padding-right: 2.5rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--qg-public-text-muted) 50%), linear-gradient(135deg, var(--qg-public-text-muted) 50%, transparent 50%);
    background-position: right 1.375rem center, right 1rem center;
    background-size: .375rem .375rem;
    background-repeat: no-repeat;
}

select.qg-content-search-input {
    color-scheme: dark;
    cursor: pointer;
}

/* La lista desplegada la pinta el navegador: se le da la superficie elevada de la web. */
select.qg-content-search-input option {
    background-color: var(--qg-public-surface-raised);
    color: var(--qg-public-text-strong);
}

.qg-content-search button,
.qg-content-search-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.875rem;
    border: .0625rem solid transparent;
    border-radius: .625rem;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.qg-content-search button {
    padding: 0 1.25rem;
    background: var(--qg-public-color-secondary-coral);
    color: var(--qg-public-color-white);
}

.qg-content-search button:not(:disabled):hover,
.qg-content-search button:not(:disabled):focus {
    scale: 1;
    background: var(--qg-public-color-secondary-coral-hover);
    box-shadow: none;
    color: var(--qg-public-color-white);
    transform: translateY(-.0625rem);
}

.qg-content-search button:disabled {
    background: var(--qg-public-color-nav-muted);
    color: var(--qg-public-color-white-48);
    cursor: not-allowed;
    opacity: 1;
}

.qg-content-search-reset {
    gap: .5rem;
    padding: 0 .875rem;
    border-color: var(--qg-public-color-white-20);
    background: transparent;
    color: var(--qg-public-color-white-86);
}

.qg-content-search-reset:hover,
.qg-content-search-reset:focus {
    border-color: var(--qg-public-color-secondary-coral);
    background: var(--qg-public-color-coral-13);
    color: var(--qg-public-color-white);
}

.qg-content-search-reset.is-disabled {
    cursor: wait;
    opacity: .6;
    pointer-events: none;
}

[data-public-content-results] {
    position: relative;
    isolation: isolate;
    transition: transform .2s ease;
}

[data-public-content-results].is-loading {
    transform: translateY(.25rem);
}

[data-public-content-results].is-loading > :not(.qg-content-search-loading-indicator) {
    opacity: .48;
    pointer-events: none;
}

.qg-content-search-loading-indicator {
    position: absolute;
    top: .875rem;
    left: 50%;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: .0625rem solid var(--qg-public-color-white-20);
    border-radius: 50%;
    background: var(--qg-public-color-surface-deep);
    box-shadow: var(--qg-public-shadow-dark);
    transform: translateX(-50%);
}

[data-public-content-results].is-loading .qg-content-search-loading-indicator {
    display: inline-flex;
}

.qg-content-search-loading-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: .1875rem solid var(--qg-public-color-white-30);
    border-top-color: var(--qg-public-color-secondary-coral);
    border-radius: 50%;
    animation: qg-content-search-spin .8s linear infinite;
}

.qg-content-search-loading-message {
    position: absolute;
    width: .0625rem;
    height: .0625rem;
    padding: 0;
    margin: -.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.qg-content-search-result-item {
    opacity: 1;
    transform: translateX(0);
    transition: opacity .42s ease-out, transform .42s ease-out;
    transition-delay: var(--qg-content-search-enter-delay, 0ms);
    will-change: opacity, transform;
}

.qg-content-search-result-item.is-preparing {
    opacity: 0;
    transform: translateX(-1.25rem);
}

.qg-content-search-result-item.is-entering {
    opacity: 1;
    transform: translateX(0);
}

@keyframes qg-content-search-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .qg-content-search-loading-spinner {
        animation: none;
    }

    .qg-content-search-result-item {
        transition: none;
    }
}
@media (max-width: 575px) {
    .qg-content-search {
        grid-template-columns: 1fr 1fr;
        width: min(100% - 1.5rem, 30rem);
        margin-bottom: 2rem;
    }

    .qg-content-search input[type="search"],
    .qg-content-search-reset {
        grid-column: 1 / -1;
    }
}