/* Estilos específicos para la página de busqueda avanzada */

:root {
    /*light, dark*/
    --button-color-light: white;
    --button-color-dark: black;
    --chip-color-text: 95, 108, 114;      /* Gris oscuro apagado */
    --chip-color-ap: 62, 140, 176;        /* Azul apagado (tu referencia) */
    --chip-color-tit: 76, 150, 99;        /* Verde apagado */
    --chip-color-top: 184, 134, 67;       /* Naranja apagado */
    --chip-color-car: 169, 86, 86;        /* Rojo apagado */
    --chip-color-ofi: 118, 104, 171;      /* Lavanda apagado */
}

h3 { margin: 1em 0;}

.search-text-toggle {
    cursor: pointer;
    user-select: none;
}

.search-text-toggle::after {
    content: ' (mostrar)';
    font-size: 0.85em;
    font-weight: normal;
    opacity: 0.7;
}

.search-text-toggle[aria-expanded='true']::after {
    content: ' (ocultar)';
}

.chip-container,
.search-text {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    min-height: 5em;
    margin: 1em 0em;
    padding: 1em;
    background: white;
    border-radius: 6px;
    border: 1px solid  var(--color-border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-text {
    display: none;
    background-color: rgba(214, 214, 214, 0.2);
    border-style: dotted;
}

.search-text.is-visible {
    display: flex;
}

.search-copy-actions {
    display: none;
    margin-top: 0.5em;
}

.search-copy-actions.is-visible {
    display: flex;
    justify-content: flex-end;
}

.search-copy-actions .button {
    margin: 0;
}

.search-text:focus{
    border: 1px;
    border-style: dotted;
    box-shadow: none;
    outline: none;
}
.chip-container .chip {
    display: inline-flex;
    position: relative;
    align-items: center;
    padding: 0.4em 0.2em 0.4em 0.4em;
    border-radius: 5px;
    font-weight: bolder;
    animation: slideIn 0.2s ease;
    color: #495057;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

/* Iconos en botones y chips */

.chip-ap { --current-chip-color: var(--chip-color-ap); }
.chip-tit { --current-chip-color: var(--chip-color-tit); }
.chip-top { --current-chip-color: var(--chip-color-top); }
.chip-car { --current-chip-color: var(--chip-color-car); }
.chip-ofi { --current-chip-color: var(--chip-color-ofi); }
.chip-text { --current-chip-color: var(--chip-color-text); }

.button-chip .icon-tit,
.button-chip .icon-top,
.button-chip .icon-ofi,
.button-chip .icon-car,
.button-chip .icon-text,
.button-chip .icon-ap {  fill: var(--button-color-light);}
.chip .icon-text { fill: rgb(var(--chip-color-text)); }
.chip .icon-ap { fill: rgb(var(--chip-color-ap)); }
.chip .icon-tit { fill: rgb(var(--chip-color-tit)); }
.chip .icon-top { fill: rgb(var(--chip-color-top)); }
.chip .icon-ofi { fill: rgb(var(--chip-color-ofi)); }
.chip .icon-car { fill: rgb(var(--chip-color-car)); }

/* Definiciones para botones */
.button-chip[class*="chip-"] {
    color: var(--button-color-light);
    background-color: rgb(var(--current-chip-color));
    border: 1px solid rgb(var(--current-chip-color));
}
.button-chip[class*="chip-"]:hover {
    background-color: rgba(var(--current-chip-color), 0.8);
}
/* Definiciones para chips */
.chip[class*="chip-"] {
    color: rgb(var(--current-chip-color));
    background-color: rgba(var(--current-chip-color), 0.1);
    border: 1px solid rgba(var(--current-chip-color), 1);
}
.chip[class*="chip-"]:hover {
    background-color: rgba(var(--current-chip-color), 0.2);
}

/* Contenedores */
.chip-container .chip .chip-text {
    display: block;
    border: none;
    background: var(--chip-background);
    padding: 0 0.5em;
    cursor: text;
}
.chip-container .chip .chip-text[contenteditable="true"] {
    outline: none;
}
.chip-container .chip .chip-words{
    padding: 0 0.2em;
}
.chip-container .chip .chip-words .chip-word {
    margin: auto 0.1em;
}
.chip-container .chip .chip-words .chip-word:hover {
    text-decoration: underline;
}
.chip-container .chip .chip-words .chip-word sup {
    min-width: 1.3em;
    min-height: 1.3em;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    color: var(--button-color-light);
    background-color: rgb(var(--current-chip-color));
    border: 1px solid rgb(var(--current-chip-color));
    margin-left: 0.2em;
}
.chip-container .chip .chip-remove {
    background: rgba(0,0,0,0.25);
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    margin-left: 8px;
    color: #fff;
    font-size: 0.8rem;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .chip-remove {
        width: 44px !important;
        height: 44px !important;
        font-size: 1rem;
    }

    .chip-container .chip {
        padding: 0.6em 0.4em 0.6em 0.6em;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .chip-container,
    .search-text {
        min-height: 3em;
        padding: 0.75em;
    }

    /*#filters .toolbar {
        flex-direction: column;
        gap: 0.75em;
    }*/

    /*#filters .toolbar button {
        width: 100%;
        justify-content: center;
    }*/

    .search-form .search-form-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5em;
    }

    .search-form .search-form-header h2 {
        font-size: 1.5em;
    }
}

/* Responsive - Mobile small */
@media (max-width: 479px) {
    .button-chip {
        padding: 0.6em 1em;
        font-size: 0.9em;
    }
}

.toolbar {
    margin: 0.5em 0;
}
.toolbar button {
    margin: 0;
}
.score-value {
    background: #f3f4f6;
    padding: 0.25em 0.5em;
    border-radius: 4px;
    font-weight: 600;
    color: var(--color-blue);
    font-size: 1.2em;
    margin-left: 0.5em;
}