/* ==========================================================================
   raumlab-search.css — buscador global (command palette), inyectado por
   raumlab-search.js en las 9 páginas del sitio. Solo usa variables que
   existen igual en las dos "familias" de CSS del sitio (style.css del hub,
   raumlab-chrome.css de los 3 módulos): --bg-navy, --surface-border,
   --text-color, --font-geist.
   ========================================================================== */

.rc-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Mismo padding vertical que .lang-pill/.rc-lang-pill (5px), en vez de
       una caja fija de 32px — la fila del header alinea por abajo
       (align-items: flex-end), así que si esta caja es más alta que la de
       "ES" el ícono queda centrado en una caja más alta y se ve más arriba
       que el texto. Con el mismo padding, las dos cajas terminan de una
       altura parecida y sus centros calzan. */
    padding: 5px 6px;
    /* .lang-pill/.rc-lang-pill YA tienen margin-left:auto (para pegarse al
       borde derecho). Este botón se inserta ANTES en el DOM, así que él es
       quien necesita el margin-left:auto para quedar empujado a la derecha
       — si los dos lo tienen, Flexbox reparte el espacio libre ENTRE los
       dos en vez de juntarlos, y el ícono queda flotando lejos de "ES" en
       vez de pegado. Por eso la regla de abajo cancela el margin-left:auto
       de lang-pill específicamente cuando viene justo después de este botón. */
    margin-left: auto;
    margin-right: 2px;
    background: none;
    border: none;
    border-radius: 4px;
    /* appearance:none + box-shadow:none: sin esto, algunos navegadores le
       dejan un resto de relieve/sombra nativa de <button> aunque
       background y border ya estén en "none". */
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    color: var(--text-color);
    /* Reposo bien apagado (0.55) para que el salto a hover (1, + glow) se
       note — de 0.8 a 1 era un cambio de opacidad casi imperceptible. */
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.2s ease, filter 0.2s ease;
}
.rc-search-toggle svg {
    width: 16px;
    height: 16px;
}
.rc-search-toggle:hover {
    /* Solo ilumina el ícono (opacity + un resplandor sutil vía filter),
       sin caja de fondo detrás — pedido explícito: nada de "sombreado",
       ni en reposo ni en hover. */
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}
.rc-search-toggle + .lang-pill,
.rc-search-toggle + .rc-lang-pill {
    margin-left: 0;
}

/* [hidden] antes que .rc-search-overlay (y con !important) — una regla de
   esta misma hoja con "display: flex" le gana SIEMPRE al [hidden] nativo
   del navegador (misma especificidad, pero el origen "autor" pisa al
   origen "user-agent" sin importar el orden), así que sin esto el overlay
   queda visible permanentemente apenas se inyecta en el DOM, sin importar
   lo que haga el atributo hidden en JS. */
.rc-search-overlay[hidden] {
    display: none !important;
}

.rc-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    justify-content: center;
    padding: 12vh 24px 24px;
    background: rgba(6, 6, 8, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.rc-search-box {
    width: 100%;
    max-width: 480px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.rc-search-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--surface-border);
    color: var(--text-color);
    flex-shrink: 0;
}
.rc-search-input-row svg { flex-shrink: 0; opacity: 0.6; }

.rc-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-color);
    font-family: var(--font-geist);
    font-size: 0.9rem;
    font-weight: 300;
}
.rc-search-input::placeholder { color: var(--text-color); opacity: 0.4; }

.rc-search-results {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
}

.rc-search-result {
    display: flex;
    /* flex-start, no center: con la descripción el bloque de texto pasa a
       ser de dos líneas, y el chip de módulo tiene que quedar arriba (a la
       altura del título), no centrado en la altura total del ítem. */
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-geist);
}
.rc-search-result.active,
.rc-search-result:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.rc-search-result-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.rc-search-result-titulo {
    font-size: 0.82rem;
    font-weight: 300;
    color: var(--text-color);
}

/* Chica y fina — un renglón de contexto, no compite con el título. */
.rc-search-result-descripcion {
    font-size: 0.68rem;
    font-weight: 200;
    line-height: 1.35;
    color: var(--text-color);
    opacity: 0.55;
}

.rc-search-result-modulo {
    font-size: 0.65rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-color);
    opacity: 0.45;
    flex-shrink: 0;
}

.rc-search-empty {
    padding: 20px 16px;
    text-align: center;
    font-family: var(--font-geist);
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--text-color);
    opacity: 0.5;
}

@media (max-width: 768px) {
    .rc-search-overlay { padding: 8vh 16px 16px; }
    .rc-search-box { max-height: 80vh; }
}