/*
 * GlobalSearch — estilos "liquid glass".
 *
 * Técnica (inspirada en los switches de liquid glass de CodePen):
 *   1. Relleno translúcido tintado (--gs-glass) + un velo (--gs-veil) que garantiza la legibilidad del texto.
 *   2. Una pila de inset box-shadow que simula el GROSOR del cristal: luz en el borde superior-izquierdo,
 *      sombra interior en el inferior-derecho. Su intensidad se controla con --gs-reflex-light/dark.
 *   3. backdrop-filter: blur + saturate (+ refracción SVG en Chromium, ver la opción `refraction` del JS).
 *   4. Las piezas internas (resultado seleccionado, chip) son "píldoras" de cristal con el mismo tratamiento.
 *
 * Personalización: redefine las variables --gs-* en una regla tuya, p. ej.
 *     .gs-overlay { --gs-action: #ff2d92; --gs-radius: 32px; }
 * Los valores por defecto usan :where() (especificidad 0), así que cualquier regla tuya gana,
 * da igual el orden de carga. Las clases (.gs-category, .gs-item...) también se pueden pisar sin !important.
 */

/* ───────── Tokens base ───────── */
:where(.gs-overlay) {
    /* layout y forma */
    --gs-z: 2147483000;
    --gs-width: min(780px, calc(100vw - 32px));
    --gs-top: 12vh;
    --gs-radius: 30px;
    --gs-item-radius: 20px;
    --gs-font: "DM Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
    --gs-duration: 400ms;
    --gs-ease: cubic-bezier(1, 0, .4, 1);
    --gs-spring: cubic-bezier(.2, .9, .3, 1.15);

    /* cristal */
    --gs-glass: #bbbbbc;             /* tinte del cristal */
    --gs-light: #fff;                /* color de los reflejos de luz */
    --gs-dark: #000;                 /* color de las sombras interiores */
    --gs-reflex-light: 1;            /* intensidad de los reflejos de luz (0 = sin brillo) */
    --gs-reflex-dark: 1;             /* intensidad de las sombras interiores */
    --gs-glass-opacity: 32%;         /* opacidad del tinte */
    --gs-veil: rgb(255 255 255 / .4);/* velo para legibilidad: súbelo si el fondo es muy vivo */
    --gs-blur: 22px;
    --gs-saturation: 150%;

    /* color */
    --gs-text: #222244;
    --gs-action: #0052f5;            /* color de acción: chip, cursor, puntos... */
    --gs-on-action: #fff;            /* texto sobre el color de acción */
    --gs-backdrop: rgb(20 20 40 / .22);
    --gs-solid: #f2f2f7;             /* fondo sin transparencias (accesibilidad / navegadores sin backdrop-filter) */

    /* derivados (se recalculan solos si cambias los de arriba) */
    --gs-text-muted: color-mix(in srgb, var(--gs-text) 66%, transparent);
    --gs-accent: var(--gs-action);
    --gs-accent-text: var(--gs-action);
    --gs-on-accent: var(--gs-on-action);
    --gs-divider: color-mix(in srgb, var(--gs-dark) 12%, transparent);
    --gs-kbd-bg: color-mix(in srgb, var(--gs-glass) 38%, transparent);
    --gs-item-hover: color-mix(in srgb, var(--gs-glass) 24%, transparent);
    --gs-drop: 0 34px 90px -12px color-mix(in srgb, var(--gs-dark) 38%, transparent);

    /* Efecto al mover el puntero (lo calcula el JS) */
    --gs-tilt: .4deg;                /* inclinación máxima del panel (el contenido le acompaña) */
    --gs-rim-strength: 75%;          /* intensidad de la luz que recorre el borde siguiendo al puntero */
    --gs-glare-strength: 5%;         /* resplandor muy tenue bajo el puntero (0% = sin resplandor) */
}

/* ───────── Tema oscuro: forzado (data-theme="dark") o según el sistema (data-theme="auto") ───────── */
:where(.gs-overlay[data-theme="dark"]) {
    --gs-reflex-light: .35;
    --gs-reflex-dark: 2;
    --gs-glass-opacity: 14%;
    --gs-veil: rgb(14 14 22 / .52);
    --gs-text: #e8e8f0;
    --gs-action: #03d5ff;
    --gs-on-action: #00202b;
    --gs-backdrop: rgb(0 0 0 / .45);
    --gs-solid: #1c1c1e;
    --gs-divider: color-mix(in srgb, var(--gs-light) 14%, transparent);
}
@media (prefers-color-scheme: dark) {
    :where(.gs-overlay[data-theme="auto"]) {
        --gs-reflex-light: .35;
        --gs-reflex-dark: 2;
        --gs-glass-opacity: 14%;
        --gs-veil: rgb(14 14 22 / .52);
        --gs-text: #e8e8f0;
        --gs-action: #03d5ff;
        --gs-on-action: #00202b;
        --gs-backdrop: rgb(0 0 0 / .45);
        --gs-solid: #1c1c1e;
        --gs-divider: color-mix(in srgb, var(--gs-light) 14%, transparent);
    }
}

/* ───────── Overlay y panel ───────── */
.gs-overlay, .gs-overlay *, .gs-overlay *::before, .gs-overlay *::after { box-sizing: border-box; }

.gs-overlay {
    position: fixed; inset: 0; z-index: var(--gs-z);
    display: flex; justify-content: center; align-items: flex-start;
    padding-top: var(--gs-top);
    font-family: var(--gs-font); font-optical-sizing: auto; font-size: 16px; line-height: 1.4; text-align: left;
    color: var(--gs-text);
    background: var(--gs-backdrop);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.gs-overlay.gs-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 260ms ease, visibility 0s;
}

.gs-panel {
    position: relative; overflow: hidden; isolation: isolate;
    width: var(--gs-width); max-height: 72vh; display: flex; flex-direction: column;
    border-radius: var(--gs-radius);
    background:
        linear-gradient(var(--gs-veil), var(--gs-veil)),
        color-mix(in srgb, var(--gs-glass) var(--gs-glass-opacity), transparent);
    -webkit-backdrop-filter: blur(var(--gs-blur)) saturate(var(--gs-saturation));
    /* --gs-filter lo pone el JS (refracción SVG) solo en navegadores que lo soportan; si no, queda vacío */
    backdrop-filter: blur(var(--gs-blur)) var(--gs-filter, ) saturate(var(--gs-saturation));
    /* Grosor del cristal: pila de sombras interiores (luz arriba-izquierda y abajo-derecha, sombra en el lado contrario) */
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--gs-light) calc(var(--gs-reflex-light) * 10%), transparent),
        inset 1.8px 3px 0 -2px color-mix(in srgb, var(--gs-light) calc(var(--gs-reflex-light) * 90%), transparent),
        inset -2px -2px 0 -2px color-mix(in srgb, var(--gs-light) calc(var(--gs-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--gs-light) calc(var(--gs-reflex-light) * 60%), transparent),
        inset -.3px -1px 4px 0 color-mix(in srgb, var(--gs-dark) calc(var(--gs-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0 -2px color-mix(in srgb, var(--gs-dark) calc(var(--gs-reflex-dark) * 20%), transparent),
        inset 0 3px 4px -2px color-mix(in srgb, var(--gs-dark) calc(var(--gs-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--gs-dark) calc(var(--gs-reflex-dark) * 10%), transparent),
        0 1px 5px 0 color-mix(in srgb, var(--gs-dark) calc(var(--gs-reflex-dark) * 10%), transparent),
        var(--gs-drop);
    /* entrada con translate + scale (propiedades sueltas) y la inclinación con transform, para no pisarse */
    translate: 0 12px;
    scale: .96;
    transform: perspective(1200px) rotateX(calc(var(--gs-my, 0) * var(--gs-tilt) * -1)) rotateY(calc(var(--gs-mx, 0) * var(--gs-tilt)));
    transition: translate var(--gs-duration) var(--gs-ease), scale var(--gs-duration) var(--gs-ease), transform 120ms ease-out;
}
.gs-open .gs-panel { translate: none; scale: none; }
/* resplandor muy tenue bajo el puntero (--gs-px / --gs-py, en %) */
.gs-panel::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background: radial-gradient(760px circle at var(--gs-px, 50%) var(--gs-py, 0%),
        color-mix(in srgb, var(--gs-light) calc(var(--gs-reflex-light) * var(--gs-glare-strength)), transparent), transparent 70%);
    opacity: var(--gs-glare-on, 0);
    transition: opacity 400ms;
}
/* Luz que recorre el borde: un arco brillante en la dirección donde está el puntero (--gs-angle, 0deg = arriba,
   en sentido horario) y otro más débil en el lado opuesto, como la luz rebotando en el canto del cristal.
   Solo se ve el aro (máscara que deja libre el interior). */
.gs-panel::before {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from calc(var(--gs-angle, 315deg) - 38deg) at 50% 50%,
        transparent 0deg,
        color-mix(in srgb, var(--gs-light) calc(var(--gs-reflex-light) * var(--gs-rim-strength)), transparent) 38deg,
        transparent 76deg,
        transparent 180deg,
        color-mix(in srgb, var(--gs-light) calc(var(--gs-reflex-light) * var(--gs-rim-strength) * .35), transparent) 218deg,
        transparent 256deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: var(--gs-rim-on, 0);
    transition: opacity 200ms;
}

/* ───────── Barra de búsqueda ───────── */
.gs-search { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--gs-divider); }
.gs-search svg { flex: none; width: 22px; height: 22px; opacity: .65; }

/* all: unset evita que los estilos globales de la página (Bootstrap, Tailwind...) toquen el input */
.gs-input {
    all: unset; box-sizing: border-box;
    flex: 1; min-width: 0;
    font: inherit; font-size: 21px; font-weight: 400; color: var(--gs-text); caret-color: var(--gs-action);
}
.gs-input::placeholder { color: var(--gs-text-muted); opacity: 1; }
.gs-input::-webkit-search-cancel-button { display: none; }

.gs-kbd {
    flex: none; font: 600 11px/1 var(--gs-font); padding: 6px 10px; border-radius: 99em;
    background: var(--gs-kbd-bg); color: var(--gs-text-muted);
}

/* chip de categoría (modo "Ver más" / categoría elegida): píldora de cristal teñida con el color de acción */
.gs-chip {
    flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 14px; border-radius: 99em;
    font-size: 14px; font-weight: 600; color: var(--gs-on-action);
    background: color-mix(in srgb, var(--gs-action) 92%, transparent);
}
.gs-chip[hidden] { display: none; }
.gs-chip-remove {
    all: unset; box-sizing: border-box;
    display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    font-size: 15px; line-height: 1; color: inherit; cursor: pointer;
    transition: background 160ms, scale 200ms var(--gs-ease);
}
.gs-chip-remove:hover { background: color-mix(in srgb, var(--gs-on-action) 26%, transparent); scale: 1.12; }

/* ───────── Resultados ───────── */
.gs-list { overflow-y: auto; padding: 10px 4px 10px 10px; overscroll-behavior: contain; }

/* Barra de desplazamiento a juego con el cristal: fina, redondeada y casi invisible hasta que la necesitas.
   Firefox: scrollbar-width / scrollbar-color. Chrome, Edge y Safari: pseudo-elementos ::-webkit-scrollbar
   (Chrome ignora estos si se declara scrollbar-color, por eso se anulan dentro del @supports). */
.gs-list, .gs-search-scroll {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--gs-text) 28%, transparent) transparent;
}
@supports selector(::-webkit-scrollbar) {
    .gs-list { scrollbar-width: auto; scrollbar-color: auto; }
    .gs-list::-webkit-scrollbar { width: 14px; }
    .gs-list::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
    .gs-list::-webkit-scrollbar-thumb {
        /* el borde transparente deja un hilo de 6px dentro de un área de agarre de 14px */
        background: color-mix(in srgb, var(--gs-text) 24%, transparent) padding-box;
        border: 4px solid transparent; border-radius: 99em;
        transition: background-color .2s;
    }
    .gs-list::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--gs-text) 42%, transparent) padding-box; }
    .gs-list::-webkit-scrollbar-thumb:active { background: color-mix(in srgb, var(--gs-action) 70%, transparent) padding-box; }
}
.gs-list:empty { display: none; }

.gs-category { margin: 0 0 6px; }
.gs-category-title {
    margin: 0; padding: 12px 14px 6px; font: inherit; font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--gs-text-muted);
}
.gs-scoped .gs-category-title { display: none; }
.gs-items { display: flex; flex-direction: column; gap: 3px; }
.gs-category[data-layout="grid"] .gs-items { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.gs-category[data-layout="grid"] .gs-item { flex: 1 1 calc(33% - 8px); min-width: 160px; }

.gs-item {
    position: relative;
    display: flex; align-items: center; gap: 14px; padding: 11px 16px; cursor: pointer;
    border-radius: var(--gs-item-radius);
    transition: background-color 160ms, box-shadow 220ms var(--gs-ease), scale 220ms var(--gs-ease);
}
.gs-item:hover { background-color: var(--gs-item-hover); }
/* el resultado seleccionado es una píldora de cristal */
.gs-item[aria-selected="true"] {
    background-color: color-mix(in srgb, var(--gs-glass) 38%, transparent);
    scale: 1.008;
}
.gs-item[aria-disabled="true"] { opacity: .5; cursor: default; }
.gs-item[aria-disabled="true"]:hover { background-color: transparent; }
.gs-item[aria-disabled="true"][aria-selected="true"] { background-color: var(--gs-item-hover); box-shadow: none; scale: 1; }

/* Icono minimalista: <i> de una fuente de iconos o <svg> que heredan el color del texto (currentColor) */
.gs-item-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; font-size: 15px; color: var(--gs-text-muted); border-radius: 50%; background: var(--gs-kbd-bg); transition: color 160ms; }

/* Grosor de las píldoras de cristal (tecla, chip, icono y resultado seleccionado): pila fina */
.gs-kbd, .gs-chip, .gs-item-icon, .gs-item[aria-selected="true"] {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--gs-light) calc(var(--gs-reflex-light) * 12%), transparent),
        inset 2px 1px 0 -1px color-mix(in srgb, var(--gs-light) calc(var(--gs-reflex-light) * 90%), transparent),
        inset -1.5px -1px 0 -1px color-mix(in srgb, var(--gs-light) calc(var(--gs-reflex-light) * 80%), transparent),
        inset -2px -6px 1px -5px color-mix(in srgb, var(--gs-light) calc(var(--gs-reflex-light) * 60%), transparent),
        inset -1px 2px 3px -1px color-mix(in srgb, var(--gs-dark) calc(var(--gs-reflex-dark) * 20%), transparent),
        inset 0 -4px 1px -2px color-mix(in srgb, var(--gs-dark) calc(var(--gs-reflex-dark) * 10%), transparent),
        0 3px 6px 0 color-mix(in srgb, var(--gs-dark) calc(var(--gs-reflex-dark) * 10%), transparent);
}
.gs-item-icon svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gs-item[aria-selected="true"] .gs-item-icon { color: var(--gs-action); }
.gs-item-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gs-item-title { font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-item-subtitle { font-size: 13px; color: var(--gs-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Coincidencias con lo buscado: un tono del color de acción, discreto */
.gs-overlay .gs-mark {
    padding: 0 2px; margin: 0 -2px; border-radius: 5px; color: inherit; font-weight: inherit;
    background: color-mix(in srgb, var(--gs-action) 17%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gs-action) 14%, transparent);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.gs-item-content { font-size: 12.5px; color: var(--gs-text-muted); }

/* categorías ofrecidas al abrir */
.gs-suggestion::after { content: "›"; margin-left: auto; font-size: 22px; line-height: 1; color: var(--gs-text-muted); transition: translate 220ms var(--gs-ease); }
.gs-suggestion[aria-selected="true"]::after, .gs-suggestion:hover::after { translate: 3px 0; color: var(--gs-action); }

/* búsquedas recientes: reloj, término y una "x" que aparece al pasar el ratón */
.gs-recent .gs-item-icon { width: 30px; height: 30px; background: none; box-shadow: none; }
.gs-recent .gs-item-title { flex: 1; min-width: 0; font-size: 15px; }
.gs-recent-remove {
    all: unset; box-sizing: border-box; flex: none;
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    font-size: 17px; line-height: 1; color: var(--gs-text-muted); cursor: pointer;
    opacity: 0; transition: opacity 160ms, background 160ms;
}
.gs-recent:hover .gs-recent-remove, .gs-recent[aria-selected="true"] .gs-recent-remove { opacity: 1; }
.gs-recent-remove:hover { background: var(--gs-kbd-bg); color: var(--gs-text); }
@media (hover: none) { .gs-recent-remove { opacity: .7; } }

.gs-more { justify-content: center; font-size: 14px; font-weight: 600; color: var(--gs-action); }
.gs-more[aria-busy="true"] { color: var(--gs-text-muted); cursor: progress; }
.gs-category[data-layout="grid"] .gs-more { flex-basis: 100%; }

/* ───────── Estados y pie ───────── */
.gs-status { padding: 30px 18px; text-align: center; font-size: 15px; color: var(--gs-text-muted); }
.gs-status[hidden] { display: none; }

.gs-footer { display: flex; gap: 14px; align-items: center; padding: 10px 20px; border-top: 1px solid var(--gs-divider); font-size: 12.5px; color: var(--gs-text-muted); }
.gs-hints { display: flex; gap: 16px; margin-left: auto; }

/* barra de carga */
.gs-loading .gs-search::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gs-action), transparent);
    background-size: 40% 100%; background-repeat: no-repeat;
    animation: gs-shimmer 1s linear infinite;
}
@keyframes gs-shimmer { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* ───────── Botón de búsqueda (data-gs-trigger) ─────────
   Vive fuera del buscador (en tu página), así que no usa las variables --gs-*: todo se calcula con currentColor
   y se adapta al color del texto donde lo pongas. */
.gs-trigger {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px 9px 12px; border-radius: 12px;
    cursor: text; text-align: left; font: inherit; font-size: .875rem; color: inherit;
    background: color-mix(in srgb, currentColor 8%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    transition: background .15s, border-color .15s;
}
.gs-trigger:hover, .gs-trigger:focus-visible {
    background: color-mix(in srgb, currentColor 14%, transparent);
    border-color: color-mix(in srgb, currentColor 40%, transparent); outline: none;
}
.gs-trigger > svg { flex: none; width: 15px; height: 15px; opacity: .7; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.gs-trigger-label { flex: 1; min-width: 0; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-trigger-keys { display: flex; align-items: center; gap: 6px; }
.gs-trigger-combo { display: inline-flex; gap: 2px; }
/* tecla pequeña */
.gs-trigger kbd {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
    font: 600 11px/1 system-ui, sans-serif; color: inherit; opacity: .85;
    background: color-mix(in srgb, currentColor 10%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-bottom-width: 2px;
}
@media (hover: none) { .gs-trigger-keys { display: none; } }   /* en táctil no hay atajos de teclado */

/* ───────── Accesibilidad y fallbacks ───────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .gs-panel { background: var(--gs-solid); }
}
@media (prefers-reduced-transparency: reduce) {
    .gs-panel { background: var(--gs-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gs-panel { transform: none; }
    .gs-panel::before, .gs-panel::after { display: none; }
    .gs-overlay, .gs-panel, .gs-item, .gs-chip-remove, .gs-suggestion::after { transition: none; }
    .gs-loading .gs-search::after { animation: none; }
}
@media (max-width: 520px) { .gs-overlay { --gs-top: 8vh; } .gs-hints { display: none; } }