:root{
  --ts360gs-bg: rgba(255,255,255,0.7);
  --ts360gs-fg: #0f172a;
  --ts360gs-accent: #7c3aed;
  --ts360gs-muted: #64748b;
  --ts360gs-radius: 24px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ts360gs-bg: rgba(17,24,39,0.7);
    --ts360gs-fg: #e2e8f0;
    --ts360gs-accent: #a78bfa;
    --ts360gs-muted: #94a3b8;
  }
}

.ts360gs{ width:100%; display:block; }
.ts360gs-wrap{ position:relative; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ts360gs-fg); }
.ts360gs-searchbar{
  display:flex; align-items:center; gap:.5rem;
  border-radius: var(--ts360gs-radius);
  background: var(--ts360gs-bg);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.06);
  padding: .75rem 1rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.ts360gs-input{ flex:1; border:none; background:transparent; outline:0; font-size:1rem; color:var(--ts360gs-fg); }
.ts360gs-input::placeholder{ color: var(--ts360gs-muted); }
.ts360gs .ts360gs-btn{
  width:40px; height:40px; border-radius:999px; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:0;
  background:var(--ts360gs-accent); color:white;
  box-shadow: 0 6px 18px rgba(124,58,237,.35);
}
.ts360gs-btn svg{ display:block; width:18px; height:18px; }
.ts360gs-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.ts360gs-chip{
  font-size:.875rem; padding:.35rem .7rem; border-radius:999px; border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.55); cursor:pointer; user-select:none;
}
@media (prefers-color-scheme: dark){
  .ts360gs-chip{ background: rgba(17,24,39,.55); }
}
.ts360gs-dropdown{
  position:absolute; left:0; right:0; top: calc(100% + .5rem); z-index: 50;
  background: var(--ts360gs-bg); border:1px solid rgba(0,0,0,.06); border-radius:16px; overflow:hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.12); max-height: 420px; overflow:auto;
}
.ts360gs-item{ display:flex; gap:1rem; padding:.85rem 1rem; border-bottom:1px solid rgba(0,0,0,.05); text-decoration:none; color:inherit; }
.ts360gs-item:hover{ background: rgba(0,0,0,.03); }
.ts360gs-thumb{ width:56px; height:56px; border-radius:12px; background:#e2e8f0; flex-shrink:0; overflow:hidden; }
.ts360gs-title{ font-weight:600; line-height:1.2; }
.ts360gs-excerpt{ font-size:.9rem; color: var(--ts360gs-muted); margin-top:.2rem; }
.ts360gs-mark{ background: color-mix(in srgb, var(--ts360gs-accent) 22%, transparent); padding:.05rem .2rem; border-radius:4px; }

.ts360gs-skeleton{ height:72px; display:flex; gap:1rem; padding:1rem; }
.ts360gs-skeleton .a{ width:56px; height:56px; border-radius:12px; background: linear-gradient(90deg, #eee, #ddd, #eee); animation: ts360gs-shine 1.6s infinite; }
.ts360gs-skeleton .b{ flex:1; display:grid; gap:.5rem; }
.ts360gs-skeleton .b div{ height:12px; border-radius:8px; background: linear-gradient(90deg, #eee, #ddd, #eee); animation: ts360gs-shine 1.6s infinite; }
@keyframes ts360gs-shine{ 0%{background-position:-100px 0} 100%{background-position:200px 0} }

@media (prefers-reduced-motion: reduce){
  .ts360gs .ts360gs-btn, .ts360gs .ts360gs-chip{ transition:none !important; }
}


/* ===== Variantes visuales (2025) ===== */
.ts360gs--glass .ts360gs-searchbar{ 
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45));
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(124,58,237,.15);
}
@media (prefers-color-scheme: dark){
  .ts360gs--glass .ts360gs-searchbar{ 
    background: linear-gradient(180deg, rgba(17,24,39,.65), rgba(17,24,39,.45));
    border-color: rgba(167,139,250,.15);
  }
}
.ts360gs--neumo .ts360gs-searchbar{
  background: #f8fafc;
  box-shadow: 9px 9px 18px rgba(15,23,42,.08), -9px -9px 18px rgba(255,255,255,.9);
}
@media (prefers-color-scheme: dark){
  .ts360gs--neumo .ts360gs-searchbar{
    background: var(--ts360gs-bg, #0b1220);
    box-shadow: 9px 9px 18px rgba(0,0,0,.45), -9px -9px 18px rgba(255,255,255,.03);
  }
}

/* Tamaños */
.ts360gs--size-s .ts360gs-searchbar{ padding:.55rem .8rem; }
.ts360gs--size-s .ts360gs-input{ font-size:.95rem; }
.ts360gs--size-l .ts360gs-searchbar{ padding:1rem 1.25rem; }
.ts360gs--size-l .ts360gs-input{ font-size:1.05rem; }

/* Radios */
.ts360gs--pill .ts360gs-searchbar{ border-radius:999px; }
.ts360gs--r16 .ts360gs-searchbar{ border-radius:16px; }
.ts360gs--r28 .ts360gs-searchbar{ border-radius:28px; }

/* Items como “cards” */
.ts360gs-item{
  border-bottom:none; margin:.25rem .4rem; border-radius:14px;
  background: rgba(255,255,255,.6); transition: transform .18s ease;
}
@media (prefers-color-scheme: dark){
  .ts360gs-item{ background: rgba(17,24,39,.5); }
}
.ts360gs-item:hover{ transform: translateY(-1px); }
.ts360gs-taxchips{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.35rem; }
.ts360gs-taxchip{ font-size:.74rem; padding:.2rem .5rem; border-radius:999px; background: rgba(124,58,237,.12); color: var(--ts360gs-fg); }

/* CTA Ver todos */
.ts360gs-viewall{
  display:flex; align-items:center; justify-content:center; line-height:0; gap:.5rem;
  padding:.75rem; font-weight:600; text-decoration:none; color:var(--ts360gs-fg);
  border-top:1px dashed rgba(0,0,0,.08); background: var(--ts360gs-bg);
}
.ts360gs-viewall:hover{ filter:brightness(1.03); }

/* Sombras configurables */
.ts360gs--shadow-none .ts360gs-searchbar{ box-shadow:none; }
.ts360gs--shadow-soft .ts360gs-searchbar{ box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.ts360gs--shadow-strong .ts360gs-searchbar{ box-shadow: 0 16px 50px rgba(0,0,0,.18); }

/* Minimal variant just reduces chrome */
.ts360gs--minimal .ts360gs-searchbar{ background:transparent; border:1px dashed rgba(0,0,0,.15); box-shadow:none; }
@media (prefers-color-scheme: dark){ .ts360gs--minimal .ts360gs-searchbar{ border-color: rgba(255,255,255,.15);} }

.ts360gs .ts360gs-btn:hover{ filter: saturate(1.02) brightness(1.02); }

.ts360gs .ts360gs-btn{padding:0; margin:0; align-self:center;}
.ts360gs .ts360gs-btn svg{ display:block; width:18px; height:18px; margin:0; transform: translateY(0); }

.ts360gs .ts360gs-searchbar{ width:100%; }