/* ── MICROSITE GALINDO & GARCÍA — Variables de tema ───────────────
   Paleta tomada del manual de identidad visual proporcionado por el
   usuario (sep 2026): Carbón #0E0E0E, Petróleo #0F3B3D, Piedra #C9C8C3,
   Champagne #E8E1D7. --teal/--teal-lt/--gold se mantienen como nombres de
   variable (mismo contrato que microsite.css/microsite-rematifix.css) para
   no tener que tocar el markup/JS del micrositio, solo se les liga la
   paleta nueva:
     --teal    → Petróleo (acento principal: CTAs, bordes activos, precios)
     --gold    → tono "latón" derivado de Champagne (badges, estrellas, líneas)
   Los 2 tonos secundarios que no están en el manual con hex exacto
   (--teal-lt en oscuro, --gold en claro) se ajustaron a mano solo para
   contraste — reemplazar aquí si el usuario da valores exactos. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[data-theme="dark"] {
  --bg:#0e0e0e; --bg2:#161513; --bg3:#201f1b; --border:#322f29;
  --text:#f5f2ec; --text2:#e8e1d7; --muted:#b7b2a6; --muted2:#8c8779;
  --teal:#175d56; --teal-lt:#2e9c8b; --gold:#c9a667; --card:#171613;
  --hero-ov:linear-gradient(to bottom,rgba(0,0,0,.10),rgba(14,14,14,.82));
  --hero-name:#f5f2ec; --hero-area:rgba(232,225,215,.7);
  --call-bd:#322f29; --call-bg:rgba(255,255,255,.03); --call-clr:#e8e1d7;
  --cnt-bd:#322f29; --cnt-bg:rgba(255,255,255,.03); --cnt-clr:#e8e1d7;
}
[data-theme="light"] {
  --bg:#f6f4ef; --bg2:#ffffff; --bg3:#f0eae0; --border:#dad3c5;
  --text:#14140f; --text2:#2b2a25; --muted:#6b675d; --muted2:#8c8779;
  --teal:#0f3b3d; --teal-lt:#0f3b3d; --gold:#9c7a3e; --card:#ffffff;
  --hero-ov:linear-gradient(to bottom,rgba(255,255,255,.10),rgba(255,255,255,.88));
  --hero-name:#14140f; --hero-area:#5a554a;
  --call-bd:#dad3c5; --call-bg:#fff; --call-clr:#5a554a;
  --cnt-bd:#0f3b3d; --cnt-bg:rgba(15,59,61,.06); --cnt-clr:#0f3b3d;
}

/* ── FUENTE — Satoshi self-hosted (archivos .otf reales entregados por el
   usuario, sep 2026: public/img/galindo-y-garcia/satoshi/ → copiados a
   public/fuentes/satoshi/, mismo patrón que Outfit en Rematifix). */
@font-face {
  font-family:'Satoshi'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/fuentes/satoshi/Satoshi-Regular.otf') format('opentype');
}
@font-face {
  font-family:'Satoshi'; font-weight:500; font-style:normal; font-display:swap;
  src:url('/fuentes/satoshi/Satoshi-Medium.otf') format('opentype');
}
@font-face {
  font-family:'Satoshi'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/fuentes/satoshi/Satoshi-Bold.otf') format('opentype');
}
@font-face {
  font-family:'Satoshi'; font-weight:900; font-style:normal; font-display:swap;
  src:url('/fuentes/satoshi/Satoshi-Black.otf') format('opentype');
}

/* ── BASE ──────────────────────────────────────────────────────── */
html { scroll-behavior:smooth; overflow-x:hidden; max-width:100vw; }
body {
  font-family:'Satoshi','Segoe UI',sans-serif;
  background:var(--bg); color:var(--text);
  transition:background .25s,color .25s;
  overflow-x:hidden; max-width:100vw;
}

/* ── CHROME / NAVBAR ───────────────────────────────────────────── */
.chrome {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:10px 20px;
  background:var(--bg2); border-bottom:none;
  transition:background .25s;
}
.chrome::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold),var(--gold),transparent);
}
.chrome-logo { display:flex; align-items:center; gap:8px; text-decoration:none; }
/* Logo real (sep 2026) — 2 archivos genuinos: tinta negra (tema claro) y
   tinta blanca (tema oscuro, generada invirtiendo el PNG con tinta negra —
   mismo resultado que un filter:invert() pero como archivo real). Mismo
   patrón show/hide por [data-theme] que ya usa microsite-rematifix.ejs. */
.chrome-logo-img { height:60px; width:auto; display:block; }
.chrome-logo-dark { display:none; }
[data-theme="dark"] .chrome-logo-light { display:none; }
[data-theme="dark"] .chrome-logo-dark { display:block; }
.chrome-brand { font-size:14px; font-weight:700; color:var(--text); }
.chrome-slogan {
  flex:1; text-align:center;
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);
}
.chrome-site-link {
  display:flex; align-items:center; gap:6px; text-decoration:none;
  font-size:11px; font-weight:600; color:var(--muted); padding:6px 12px;
  border-radius:20px; border:1px solid var(--border); background:var(--bg3);
  transition:border-color .2s,color .2s;
}
.chrome-site-link:hover { border-color:var(--teal); color:var(--teal-lt); }
@media (max-width:640px) { .chrome-site-link span { display:none; } }
.toggle {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:6px 10px; border-radius:20px;
  border:1px solid var(--border); background:var(--bg3);
  transition:border-color .2s,background .2s; flex-shrink:0;
}
.toggle:hover { border-color:var(--teal); }
.toggle-ico { width:14px; height:14px; stroke:var(--teal-lt); fill:none; stroke-width:1.8; }
.toggle-lbl { font-size:11px; color:var(--muted); font-weight:500; }
.trk { width:28px; height:16px; border-radius:8px; background:var(--teal); position:relative; transition:background .25s; }
.thb { position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:transform .25s; }
[data-theme="light"] .thb { transform:translateX(12px); }

/* ── HERO ──────────────────────────────────────────────────────── */
.hero { position:relative; height:220px; overflow:hidden; }
/* Banner real de marca (sep 2026) — skyline + isotipo "G", tonos Champagne.
   background-color de respaldo por si la imagen tarda/falla en cargar. */
.hero-banner { position:absolute; inset:0; background-color:#12100d; background-image:url('/img/galindogarcia/img/banner.png'); background-size:cover; background-position:center; }
.hero-ov { position:absolute; inset:0; background:var(--hero-ov); }
.hero-content { position:absolute; bottom:0; left:0; right:0; padding:20px 24px; display:flex; align-items:flex-end; gap:16px; }
.avatar-ring {
  width:76px; height:76px; border-radius:50%;
  border:3px solid var(--teal); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Satoshi',sans-serif; font-size:26px; font-weight:700; color:#fff; margin-bottom:-8px;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  background:linear-gradient(135deg,#175d56,#0e0e0e); overflow:hidden;
}
.avatar-ring img { width:100%; height:100%; object-fit:contain; border-radius:50%; background:#fff; padding:10px; }
.hero-info { flex:1; }
.hero-role { font-size:10px; color:var(--gold); letter-spacing:.12em; text-transform:uppercase; font-weight:600; margin-bottom:4px; }
.hero-name { font-size:22px; font-weight:700; color:var(--hero-name,#fff); line-height:1.1; margin-bottom:3px; }
.hero-area { font-size:11px; color:var(--hero-area,rgba(255,255,255,.55)); }

/* ── RATING ────────────────────────────────────────────────────── */
.rating-bar {
  background:var(--bg2); border-bottom:1px solid var(--border);
  padding:10px 24px; display:flex; align-items:center; gap:10px;
  transition:background .25s,border-color .25s;
}
.stars { color:var(--gold); font-size:16px; letter-spacing:2px; }
.rating-val { font-size:13px; font-weight:700; color:var(--text); }
.rating-badge {
  font-size:10px; color:var(--teal-lt); font-weight:600;
  background:rgba(23,93,86,.12); border:1px solid rgba(23,93,86,.25);
  padding:3px 10px; border-radius:20px; display:flex; align-items:center; gap:5px;
}

/* ── FRANJA CONTACTO ───────────────────────────────────────────── */
.contact-strip {
  background:var(--bg2); border-bottom:1px solid var(--border);
  padding:14px 24px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  transition:background .25s;
}
.btn-call,.btn-wa,.btn-contact {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:50px;
  font-size:13px; font-weight:600; cursor:pointer; text-decoration:none;
  transition:opacity .18s,transform .15s;
}
.btn-call:hover,.btn-wa:hover,.btn-contact:hover { opacity:.88; transform:translateY(-1px); }
.btn-call { border:1.5px solid var(--call-bd); background:var(--call-bg); color:var(--call-clr); }
.btn-wa { background:#22c55e; color:#fff; border:none; }
.btn-contact { border:1.5px solid var(--cnt-bd); background:var(--cnt-bg); color:var(--cnt-clr); }
.contact-note { font-size:10px; color:var(--muted2); margin-left:4px; }
.btn-ico { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }

/* ── BARRA BÚSQUEDA / FILTROS ──────────────────────────────────── */
.filter-section {
  background:var(--bg2); border-bottom:1px solid var(--border);
  padding:14px 32px; display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; transition:background .25s;
}
.search-wrap {
  display:flex; align-items:center; gap:6px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:20px; padding:6px 14px;
  flex:0 0 auto; min-width:200px; transition:border-color .18s;
}
.search-wrap:focus-within { border-color:var(--teal); }
.search-wrap input { border:none; background:transparent; color:var(--text); font-size:12px; outline:none; width:100%; }
.search-wrap input::placeholder { color:var(--muted2); }
.search-ico { width:13px; height:13px; stroke:var(--muted2); fill:none; flex-shrink:0; }
.pills { display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; flex:1; }
.pills::-webkit-scrollbar { display:none; }
.fwrap {
  position:relative; display:inline-flex; align-items:center; gap:5px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:20px; padding:7px 13px 7px 10px;
  cursor:pointer; transition:border-color .18s,background .18s;
  flex-shrink:0; white-space:nowrap; user-select:none;
}
.fwrap:hover { border-color:var(--teal); background:rgba(23,93,86,.08); }
.fwrap select { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; border:none; color:#14140f; background-color:#fff; }
.fwrap select option { color:#14140f; background-color:#fff; }
.fw-ico { width:12px; height:12px; stroke:var(--muted2); fill:none; stroke-width:1.8; flex-shrink:0; }
.fw-lbl { font-size:11px; color:var(--text); font-weight:500; pointer-events:none; }
.sort-pill { border-color:rgba(23,93,86,.45); background:rgba(23,93,86,.08); }
.sort-pill .fw-lbl { color:var(--teal-lt); font-weight:600; }
.fsep { width:1px; height:22px; background:var(--border); flex-shrink:0; }

/* ── LAYOUT PRINCIPAL — sin sidebars (mismo criterio que Rematifix: sin
   línea de productos/infografías ni anuncios de Altaltium que clonar) ── */
.main-wrap { display:block; width:100%; max-width:1100px; margin:0 auto; padding:20px 16px; }

/* ── COLUMNA PROPIEDADES ───────────────────────────────────────── */
.catalog-col { min-width:0; width:100%; }
.catalog-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.catalog-title { font-size:14px; font-weight:700; color:var(--text); }
.cat-count { font-size:11px; color:var(--muted); background:var(--bg3); border:1px solid var(--border); padding:3px 10px; border-radius:20px; }
.empty-state { text-align:center; padding:60px 20px; color:var(--muted); font-size:13px; }

/* ── PROPERTY CARDS ────────────────────────────────────────────── */
.prop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
.pcard {
  background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden;
  opacity:0; transform:translateY(24px);
  transition:opacity .45s ease,transform .45s ease,box-shadow .2s;
}
.pcard.revealed { opacity:1; transform:translateY(0); }
.pcard.revealed:hover { transform:translateY(-3px); box-shadow:0 10px 32px rgba(0,0,0,.22); }

.cslider { position:relative; height:140px; overflow:hidden; background:var(--bg3); }
.cslider-inner { display:flex; height:100%; transition:transform .35s ease; }
.cslide { min-width:100%; height:100%; object-fit:cover; flex-shrink:0; }
.cslide-placeholder { min-width:100%; height:100%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1c2b29,#0e0e0e); }
.skel-ov {
  position:absolute; inset:0; z-index:5;
  background:linear-gradient(90deg,var(--bg3) 25%,var(--border) 50%,var(--bg3) 75%);
  background-size:1600px 100%; animation:shimmer 1.5s infinite linear;
  transition:opacity .5s ease; pointer-events:none;
}
.skel-ov.done { opacity:0; }
@keyframes shimmer { 0%{background-position:-800px 0} 100%{background-position:800px 0} }
.carrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.5); border:none; color:#fff; cursor:pointer; z-index:4;
  display:flex; align-items:center; justify-content:center; transition:background .18s;
  font-size:20px; line-height:1;
}
.carrow:hover { background:rgba(0,0,0,.75); }
.carrow.lft { left:-8px; } .carrow.rgt { right:-8px; }
.cdots { position:absolute; bottom:6px; left:0; right:0; display:flex; justify-content:center; gap:5px; z-index:4; }
.cdot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:background .2s; }
.cdot.active { background:#fff; }
.card-badge {
  position:absolute; top:8px; left:8px; z-index:4;
  background:rgba(23,93,86,.92); color:#fff;
  font-size:9px; font-weight:700; padding:2px 8px; border-radius:20px;
  text-transform:uppercase; letter-spacing:.06em;
}
.card-body { padding:10px 12px 12px; cursor:pointer; }
.card-tipo { font-size:9px; color:var(--muted2); text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px; }
.card-title { font-size:13px; font-weight:700; color:var(--text2); line-height:1.3; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-loc { font-size:11px; color:var(--muted2); line-height:1.3; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-price { font-size:15px; font-weight:700; color:var(--teal-lt); margin-bottom:8px; }
.card-metrics { display:flex; gap:8px; flex-wrap:wrap; }
.mitem { font-size:10px; color:var(--muted2); display:flex; align-items:center; gap:4px; }
.mico { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.8; }
.card-btns { display:flex; gap:6px; border-top:1px solid var(--border); padding:10px 12px 12px; margin-top:0; }
.cbtn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  padding:6px 4px; border-radius:8px; border:1px solid var(--border);
  background:transparent; color:var(--muted); font-size:10px; font-weight:600;
  cursor:pointer; text-decoration:none; transition:border-color .18s,color .18s;
}
.cbtn:hover { border-color:var(--teal); color:var(--teal-lt); }
.cbtn-ico { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.8; }
.cbtn.wa { color:#22c55e; border-color:rgba(34,197,94,.3); }
.cbtn.wa:hover { border-color:#22c55e; background:rgba(34,197,94,.06); }

/* ── PAGINACIÓN ────────────────────────────────────────────────── */
.pagination { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:24px; }
.pag-btn { padding:7px 16px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; text-decoration:none; transition:border-color .18s,color .18s; }
.pag-btn:hover,.pag-btn.active { border-color:var(--teal); color:var(--teal-lt); }

/* ── EQUIPO (solo micrositio general) ─────────────────────────── */
.team-section { max-width:1100px; margin:8px auto 32px; padding:0 16px; }
.team-header { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.team-title { font-size:14px; font-weight:700; color:var(--text); }
.team-sub { font-size:11px; color:var(--muted2); }
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.team-card {
  position:relative; border-radius:12px; overflow:hidden; aspect-ratio:3/4;
  background:#0e0e0e; border:1px solid var(--border);
}
.team-card img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05); transition:transform .35s ease; }
.team-card:hover img { transform:scale(1.04); }
.team-ov { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(14,14,14,0) 45%,rgba(14,14,14,.92) 100%); }
.team-info { position:absolute; left:0; right:0; bottom:0; padding:14px; }
.team-name { font-size:15px; font-weight:700; color:#f5f2ec; line-height:1.2; }
.team-role { font-size:9px; font-weight:700; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; margin-top:3px; }
.team-email { font-size:10px; color:rgba(245,242,236,.65); margin-top:6px; display:inline-block; text-decoration:none; border-bottom:1px solid rgba(245,242,236,.25); }
.team-email:hover { color:#f5f2ec; border-color:rgba(245,242,236,.6); }
@media (max-width:1024px) { .team-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .team-grid { grid-template-columns:1fr; } .team-card { aspect-ratio:4/3; } }

/* ── FOOTER ────────────────────────────────────────────────────── */
.site-footer { background:var(--bg2); transition:background .25s; }
.gold-line { height:2px; background:linear-gradient(90deg,transparent,var(--gold),var(--gold),var(--gold),transparent); border:none; margin:0; }
.brand-logo-sm { height:44px; opacity:0.92; }

/* ── FAB WHATSAPP ──────────────────────────────────────────────── */
.fab-wa { position:fixed; bottom:20px; right:20px; width:48px; height:48px; border-radius:50%; background:#22c55e; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(34,197,94,.4); text-decoration:none; z-index:99; transition:transform .2s,box-shadow .2s; }
.fab-wa:hover { transform:scale(1.08); box-shadow:0 6px 24px rgba(34,197,94,.5); }
.fab-wa svg { width:24px; height:24px; fill:#fff; }

/* ── MODAL CONTACTO ────────────────────────────────────────────── */
.modal-ov { position:fixed; inset:0; z-index:999; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .25s; }
.modal-ov.open { opacity:1; pointer-events:auto; }
.modal-box { background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:28px; width:100%; max-width:420px; position:relative; transform:scale(.95); transition:transform .25s; }
.modal-ov.open .modal-box { transform:scale(1); }
.modal-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:4px; }
.modal-sub { font-size:12px; color:var(--muted); margin-bottom:20px; }
.modal-field { margin-bottom:14px; }
.modal-label { font-size:11px; font-weight:600; color:var(--muted); margin-bottom:5px; display:block; }
.modal-input { width:100%; padding:10px 14px; border-radius:8px; border:1px solid var(--border); background:var(--bg3); color:var(--text); font-size:13px; outline:none; transition:border-color .18s; }
.modal-input:focus { border-color:var(--teal); }
.modal-submit { width:100%; padding:12px; border-radius:10px; background:var(--teal); color:#fff; border:none; font-size:13px; font-weight:700; cursor:pointer; transition:opacity .18s; margin-top:6px; }
.modal-submit:hover { opacity:.9; }
.modal-submit:disabled { opacity:.6; cursor:default; }
.modal-close { position:absolute; top:12px; right:14px; background:transparent; border:none; cursor:pointer; color:var(--muted); font-size:20px; line-height:1; }
.modal-msg { font-size:12px; color:var(--teal-lt); margin-top:10px; text-align:center; min-height:18px; }

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width:1200px) {
  .prop-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .main-wrap { padding:16px; }
  .prop-grid { grid-template-columns:1fr; }
  .chrome-slogan { display:none; }
}
@media (max-width:480px) {
  .btn-call span,.btn-contact span { display:none; }
  .hero-name { font-size:18px; }
}

/* ── ACCESIBILIDAD ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
  .pcard:hover { transform:none !important; }
}
:focus-visible { outline:2px solid var(--teal-lt); outline-offset:2px; border-radius:4px; }

/* ── LOADING ───────────────────────────────────────────────────── */
#page-load-bar { position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--teal),var(--teal-lt)); z-index:10000; border-radius:0 2px 2px 0; box-shadow:0 0 12px rgba(23,93,86,.55); transition:width .45s cubic-bezier(.4,0,.2,1); pointer-events:none; }
.prop-grid.is-loading { opacity:.42; pointer-events:none; transition:opacity .22s; }
.prop-grid.is-loading .pcard { overflow:hidden; }
.prop-grid.is-loading .pcard::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.07) 50%,transparent 100%); background-size:200% 100%; animation:card-shimmer 1.35s linear infinite; }
@keyframes card-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── MÁS FILTROS ───────────────────────────────────────────────── */
.mas-filtros-btn { font-size:11px; font-weight:600; }
.mas-filtros-btn.mf-active { background:rgba(23,93,86,.10); border-color:var(--teal) !important; color:var(--teal-lt) !important; }
.filter-badge { min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--teal); font-size:9px; font-weight:700; color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.mas-filtros-panel { background:var(--bg2); border-bottom:1px solid var(--border); border-top:1px solid var(--border); }
.panel-inner { max-width:1100px; margin:0 auto; padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.panel-row { display:flex; gap:20px; flex-wrap:wrap; align-items:flex-end; }
.panel-section { display:flex; flex-direction:column; gap:7px; }
.panel-label { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.num-pills { display:flex; gap:5px; flex-wrap:wrap; }
.npill { display:inline-flex; align-items:center; justify-content:center; padding:4px 13px; border-radius:20px; font-size:11px; font-weight:600; border:1px solid var(--border); color:var(--muted2); cursor:pointer; transition:all .15s; user-select:none; }
.npill input[type="radio"] { display:none; }
.npill:has(input[type="radio"]:checked) { background:var(--teal); color:#fff; border-color:var(--teal); }
.panel-input { height:32px; padding:0 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg3); color:var(--text); font-size:12px; outline:none; transition:border-color .18s; width:130px; }
.panel-input:focus { border-color:var(--teal); }
.panel-actions { display:flex; flex-direction:row; gap:8px; align-items:flex-end; }
.panel-clear { padding:5px 13px; border-radius:8px; font-size:11px; border:1px solid var(--border); color:var(--muted2); text-decoration:none; white-space:nowrap; transition:all .15s; display:inline-flex; align-items:center; }
.panel-clear:hover { border-color:var(--teal-lt); color:var(--teal-lt); }
.panel-apply { padding:5px 16px; border-radius:8px; font-size:11px; font-weight:700; background:var(--teal); color:#fff; border:none; cursor:pointer; white-space:nowrap; transition:opacity .15s; }
.panel-apply:hover { opacity:.85; }