/* search.css — Búsqueda por texto libre */

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 15px;
}

/* base: `input { width: 80% }` es global; aquí ocupamos todo el ancho */
.search-wrapper input[type="search"] {
    width: 100%;
    padding-right: 40px;
    font-size: 16px;            /* <16px hace que iOS haga zoom al enfocar */
    -webkit-appearance: none;
    appearance: none;
}
.search-wrapper input[type="search"]::-webkit-search-cancel-button { display: none; } /* usamos nuestro botón */

.search-clear {
    position: absolute;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--maintxt);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
}
.search-clear:hover { opacity: 1; }
.search-clear[hidden] { display: none; }

/* Oculta lo que no coincide. !important: debe ganar a las reglas
   `display:flex` de filter.css (Modo Enfoque) → combinación AND. */
#tasksContainer .task-wrapper.search-hidden { display: none !important; }

/* Con búsqueda activa no se puede arrastrar: el cursor no debe sugerirlo */
#tasksContainer.search-active .task-wrapper,
#tasksContainer.search-active .task-wrapper:active { cursor: pointer; }

.search-empty {
    text-align: center;
    color: var(--maintxt);
    font-family: 'Roboto', sans-serif;
    opacity: 0.7;
    margin: 10px 0 20px;
}
.search-empty[hidden] { display: none; }

/* Pista de por qué coincide: la subtarea que coincidió. El texto viene de
   attr(), o sea texto plano — sin riesgo de XSS. */
.task-wrapper[data-search-hint]::after {
    content: attr(data-search-hint);
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    color: var(--maintxt);
    opacity: 0.7;
    padding: 4px 15px 0;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}