/* ============================================================
   Search component · uxjosearroyo.com
   Modal de búsqueda con Lunr.js. Carga el índice search-index.json
   y permite búsqueda con highlighting + atajo Cmd+K.
   ============================================================ */

/* Botón de búsqueda en el header */
.search-button{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:transparent;color:var(--text-2,#CCC0E1);
  border:1px solid var(--hairline-strong,rgba(229,222,242,.20));
  cursor:pointer;transition:color .2s, background .2s, border-color .2s, transform .15s;
  margin-right:4px;flex-shrink:0;
}
.search-button:hover{
  color:var(--text,#E5DEF2);
  background:rgba(229,222,242,.06);
  border-color:var(--text-3,#9A8DBC);
  transform:translateY(-1px);
}
.search-button svg{width:18px;height:18px}

/* Backdrop modal */
.search-modal{
  position:fixed;inset:0;z-index:1000;
  background:rgba(28,4,66,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:88px 24px 32px;
  animation:search-fade-in 200ms cubic-bezier(0,0,.2,1);
}
.search-modal[hidden]{display:none}
@keyframes search-fade-in{
  from{opacity:0}
  to{opacity:1}
}

/* Panel principal */
.search-modal__panel{
  width:100%;max-width:680px;max-height:78vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg-2,#2A1058);
  border:1px solid var(--hairline,rgba(229,222,242,.10));
  border-radius:16px;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,0,55,.06);
  animation:search-slide-up 280ms cubic-bezier(0,0,.2,1);
}
@keyframes search-slide-up{
  from{opacity:0;transform:translateY(16px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Header del modal */
.search-modal__header{
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;
  border-bottom:1px solid var(--hairline,rgba(229,222,242,.10));
}
.search-modal__icon{color:var(--text-3,#9A8DBC);flex-shrink:0}
.search-modal__icon svg{width:20px;height:20px}
.search-modal__input{
  flex:1;background:transparent;border:0;outline:none;
  color:var(--text,#E5DEF2);
  font-family:'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight:500;font-size:1.05rem;letter-spacing:.005em;
  padding:6px 0;
}
.search-modal__input::placeholder{color:var(--text-3,#9A8DBC)}
.search-modal__close{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;
  padding:5px 9px;border-radius:6px;cursor:pointer;
  background:rgba(229,222,242,.04);
  color:var(--text-3,#9A8DBC);
  border:1px solid var(--hairline,rgba(229,222,242,.10));
  transition:color .15s, background .15s, border-color .15s;
}
.search-modal__close:hover{
  color:var(--text,#E5DEF2);
  background:rgba(229,222,242,.08);
  border-color:var(--text-3,#9A8DBC);
}

/* Lista de resultados */
.search-modal__results{
  flex:1;overflow-y:auto;padding:8px 10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(229,222,242,.15) transparent;
}
.search-modal__results::-webkit-scrollbar{width:8px}
.search-modal__results::-webkit-scrollbar-track{background:transparent}
.search-modal__results::-webkit-scrollbar-thumb{
  background:rgba(229,222,242,.15);border-radius:4px;
}

/* Item resultado */
.search-result{
  display:block;padding:14px 18px;border-radius:10px;
  text-decoration:none;color:inherit;
  border:1px solid transparent;margin-bottom:4px;
  transition:background .15s, border-color .15s, transform .15s;
}
.search-result:hover,
.search-result.is-active{
  background:rgba(255,0,55,.06);
  border-color:rgba(255,0,55,.22);
  transform:translateX(2px);
}
.search-result__tag{
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent,#FF0037);margin-bottom:6px;
}
.search-result__title{
  font-size:1rem;font-weight:600;line-height:1.3;
  color:var(--text,#E5DEF2);margin-bottom:4px;
}
.search-result__snippet{
  font-size:.85rem;line-height:1.55;
  color:var(--text-2,#CCC0E1);
}
.search-result mark{
  background:rgba(255,0,55,.22);color:var(--text,#E5DEF2);
  padding:0 3px;border-radius:3px;
  font-weight:inherit;
}

/* Estados vacíos */
.search-empty,
.search-no-results,
.search-loading{
  padding:32px 22px;text-align:center;
  color:var(--text-3,#9A8DBC);
  font-size:.92rem;line-height:1.6;
}
.search-no-results strong{color:var(--text-2,#CCC0E1)}

/* Footer del modal */
.search-modal__footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 22px;
  border-top:1px solid var(--hairline,rgba(229,222,242,.10));
  font-size:.72rem;color:var(--text-3,#9A8DBC);
}
.search-modal__footer kbd{
  display:inline-block;padding:2px 6px;border-radius:4px;
  background:rgba(229,222,242,.06);
  border:1px solid var(--hairline,rgba(229,222,242,.10));
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:.66rem;font-weight:600;letter-spacing:.04em;
  color:var(--text-2,#CCC0E1);margin:0 3px;
}

/* Mobile adjustments */
@media (max-width:640px){
  .search-modal{padding:60px 16px 16px}
  .search-modal__panel{max-height:85vh}
  .search-modal__header{padding:14px 16px}
  .search-modal__results{padding:6px}
  .search-result{padding:12px 14px}
}

@media (prefers-reduced-motion:reduce){
  .search-modal,.search-modal__panel{animation:none}
  .search-result:hover,.search-result.is-active{transform:none}
}