/* Compuasociados · barra de búsqueda Liquid Glass (macOS Tahoe) — 2026-10-21
   Fusiona «Buscar actuaciones» + «Estado de fuentes» (dos botones inyectados por scripts inline de index.html, NO React)
   en UNA píldora de vidrio, restilizando en sitio: el indicador de estado se superpone a la derecha DENTRO de la barra.
   Los nodos originales siguen siendo los controles reales (clic = misma búsqueda / mismo estado por fuente).
   Además aplica el mismo vidrio a los campos de búsqueda de las vistas sin tocar anchos, alturas ni paddings (tahoe-compacto.css).
   Reglas: UN solo nivel de backdrop-filter (el aside ya tiene blur → aquí fondo translúcido sin blur); nunca se anima blur ni box-shadow;
   solo transform/opacity breves. Oscuro = vidrio NEUTRO (blanco con alfa sobre negro), sin tinte azul. */

:root {
  --bq-font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --bq-fill: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .64) 100%);
  --bq-fill-hover: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .78) 100%);
  --bq-field: rgba(255, 255, 255, .58);
  --bq-gloss: linear-gradient(180deg, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 72%);
  --bq-edge: rgba(255, 255, 255, .9);
  --bq-ring: rgba(11, 31, 58, .11);
  --bq-hl: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(11, 31, 58, .05);
  --bq-shadow: 0 8px 18px -12px rgba(11, 31, 58, .38), 0 1px 2px rgba(11, 31, 58, .07);
  --bq-shadow-sm: 0 5px 12px -9px rgba(11, 31, 58, .34);
  --bq-text: #0f1e33; --bq-muted: #56667d; --bq-icon: #66778f;
  --bq-chip: rgba(255, 255, 255, .72); --bq-chip-hover: rgba(255, 255, 255, .95);
  --bq-chip-edge: rgba(11, 31, 58, .09); --bq-chip-hl: rgba(255, 255, 255, .95);
  --bq-gold: #C9A961; --bq-gold-d: #9A7E3A; --bq-focus: rgba(201, 169, 97, .55);
  --bq-ok: #34c759; --bq-ok-halo: rgba(52, 199, 89, .24);
  --bq-warn: #ff9500; --bq-warn-halo: rgba(255, 149, 0, .24);
  --bq-bad: #ff3b30; --bq-bad-halo: rgba(255, 59, 48, .24);
  --bq-solid: #f4f7fb;
  --bq-blur: blur(18px) saturate(1.5);
  --bq-L: 10px; --bq-T: 10px; --bq-hdr: 83px; /* carril: margen del aside y alto de su cabecera (solo para el punto flotante) */
}
html.dark {
  --bq-fill: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .06) 100%);
  --bq-fill-hover: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .09) 100%);
  --bq-field: rgba(255, 255, 255, .075);
  --bq-gloss: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 72%);
  --bq-edge: rgba(255, 255, 255, .14);
  --bq-ring: rgba(0, 0, 0, .45);
  --bq-hl: inset 0 1px 0 rgba(255, 255, 255, .20), inset 0 -1px 0 rgba(0, 0, 0, .35);
  --bq-shadow: 0 8px 18px -10px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .5);
  --bq-shadow-sm: 0 5px 12px -8px rgba(0, 0, 0, .85);
  --bq-text: #ffffff; --bq-muted: rgba(235, 235, 245, .62); --bq-icon: rgba(235, 235, 245, .6);
  --bq-chip: rgba(255, 255, 255, .10); --bq-chip-hover: rgba(255, 255, 255, .17);
  --bq-chip-edge: rgba(255, 255, 255, .12); --bq-chip-hl: rgba(255, 255, 255, .16);
  --bq-focus: rgba(226, 199, 122, .5);
  --bq-ok: #30d158; --bq-ok-halo: rgba(48, 209, 88, .28);
  --bq-warn: #ffd60a; --bq-warn-halo: rgba(255, 214, 10, .26);
  --bq-bad: #ff453a; --bq-bad-halo: rgba(255, 69, 58, .30);
  --bq-solid: #1c1c1e;
}
@media (max-width: 767px) { :root { --bq-L: 6px; --bq-T: 6px; } }

/* ============ 1. PÍLDORA DE VIDRIO (compartida por el buscador y el estado cuando va solo) ============ */
html:is(:root, .dark) body aside.w-64 > button:not(:has(#mjmf-badge)),
html:is(:root, .dark) body button:has(#mjmf-badge) {
  box-sizing: border-box !important; border-radius: 999px !important;
  border: 1px solid var(--bq-edge) !important; background: var(--bq-fill) !important;
  color: var(--bq-muted) !important; font: 500 12px/1 var(--bq-font) !important; letter-spacing: 0 !important;
  box-shadow: var(--bq-hl), 0 0 0 1px var(--bq-ring), var(--bq-shadow) !important;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html:is(:root, .dark) body aside.w-64 > button:not(:has(#mjmf-badge)):hover,
html:is(:root, .dark) body button:has(#mjmf-badge):hover { background: var(--bq-fill-hover) !important; color: var(--bq-text) !important; }
html:is(:root, .dark) body aside.w-64 > button:not(:has(#mjmf-badge)):focus-visible,
html:is(:root, .dark) body button:has(#mjmf-badge):focus-visible {
  outline: none !important; border-color: var(--bq-gold) !important; box-shadow: var(--bq-hl), 0 0 0 3px var(--bq-focus) !important;
}
/* el estado flotante en <body> no tiene ancestro con blur: aquí sí lleva su propio vidrio (un solo nivel) */
html:is(:root, .dark) body > button:has(#mjmf-badge) { -webkit-backdrop-filter: var(--bq-blur); backdrop-filter: var(--bq-blur); }

/* ============ 2. BUSCADOR (expandido) ============ */
html:is(:root, .dark) body aside.w-64 > button:not(:has(#mjmf-badge)) {
  position: relative !important; display: flex !important; align-items: center !important;
  width: calc(100% - 16px) !important; height: 34px !important; margin: 7px 8px 6px !important;
  padding: 0 52px 0 10px !important; text-align: left !important; font-size: 11px !important;
}
html:is(:root, .dark) body aside.w-64 > button:not(:has(#mjmf-badge)) > span { flex: 1 1 auto; min-width: 0; gap: 6px !important; }
html:is(:root, .dark) body aside.w-64 > button:not(:has(#mjmf-badge)) > span > svg { width: 13px; height: 13px; flex: none; stroke-width: 1.6; color: var(--bq-icon); }
html:is(:root, .dark) body aside.w-64 > button:not(:has(#mjmf-badge)) > span > span { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html:is(:root, .dark) body aside.w-64 > button:not(:has(#mjmf-badge)) > span > span::after { content: "…"; }
html:is(:root, .dark) body aside.w-64 > button:not(:has(#mjmf-badge)):hover > span > svg { color: var(--bq-gold-d); }
html.dark body aside.w-64 > button:not(:has(#mjmf-badge)):hover > span > svg { color: #E2C77A; }

/* ============ 3. INDICADOR DE ESTADO (punto + OK / n) ============ */
html:is(:root, .dark) body #mjmf-badge {
  display: inline-flex !important; align-items: center !important; gap: 6px !important; flex: none !important;
  box-sizing: border-box; min-width: 0 !important; height: 22px !important; padding: 0 9px 0 8px !important;
  border-radius: 999px !important; border: 1px solid var(--bq-chip-edge) !important; background: var(--bq-chip) !important;
  box-shadow: inset 0 1px 0 var(--bq-chip-hl) !important; color: var(--bq-text) !important;
  font: 700 11px/1 var(--bq-font) !important; letter-spacing: .03em !important;
}
html:is(:root, .dark) body #mjmf-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--bq-dot, var(--bq-warn)); box-shadow: 0 0 0 3px var(--bq-halo, var(--bq-warn-halo));
}
html:is(:root, .dark) body #mjmf-badge:empty::after { content: "…"; }
/* estado real: lo refleja tahoe-busqueda.js en data-bq; el selector por style es el respaldo sin JS */
html:is(:root, .dark) body #mjmf-badge[data-bq="ok"], html:is(:root, .dark) body #mjmf-badge[style*="27, 175, 122"] { --bq-dot: var(--bq-ok); --bq-halo: var(--bq-ok-halo); }
html:is(:root, .dark) body #mjmf-badge[data-bq="fail"], html:is(:root, .dark) body #mjmf-badge[style*="227, 73, 72"] { --bq-dot: var(--bq-bad); --bq-halo: var(--bq-bad-halo); }
html:is(:root, .dark) body #mjmf-badge[data-bq="warn"], html:is(:root, .dark) body #mjmf-badge[data-bq="wait"] { --bq-dot: var(--bq-warn); --bq-halo: var(--bq-warn-halo); }

/* ============ 4. ESTADO SOLO (usuarios sin buscador): píldora propia con etiqueta + indicador ============ */
html:is(:root, .dark) body aside.w-64 > button:has(#mjmf-badge) {
  position: relative !important; display: flex !important; align-items: center !important; gap: 8px !important;
  width: calc(100% - 16px) !important; height: 34px !important; margin: 7px 8px 6px !important; padding: 0 6px 0 14px !important;
}
html:is(:root, .dark) body button:has(#mjmf-badge) > span:first-child { color: var(--bq-text); font: 600 12px/1 var(--bq-font) !important; }
html:is(:root, .dark) body aside.w-64 > button:has(#mjmf-badge) > #mjmf-badge { margin-left: auto; }

/* ============ 5. FUSIÓN: con buscador, el estado se superpone a la derecha DENTRO de la barra ============ */
html:is(:root, .dark) body aside.w-64:has(> button > span > svg) > button:has(#mjmf-badge) {
  position: relative !important; z-index: 3 !important; display: block !important; width: 100% !important; height: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
  border-radius: 0 !important; overflow: visible !important; font-size: 0 !important;
}
html:is(:root, .dark) body aside.w-64:has(> button > span > svg) > button:has(#mjmf-badge) > span:first-child {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; flex: none !important;
}
html:is(:root, .dark) body aside.w-64:has(> button > span > svg) > button:has(#mjmf-badge) > #mjmf-badge {
  position: absolute !important; right: 12px; top: 13px; margin: 0; gap: 5px !important; padding: 0 7px 0 6px !important;
}
html:is(:root, .dark) body aside.w-64:has(> button > span > svg) > button:has(#mjmf-badge):hover > #mjmf-badge { background: var(--bq-chip-hover) !important; }
html:is(:root, .dark) body aside.w-64:has(> button > span > svg) > button:has(#mjmf-badge):focus-visible { outline: none !important; box-shadow: none !important; }
html:is(:root, .dark) body aside.w-64:has(> button > span > svg) > button:has(#mjmf-badge):focus-visible > #mjmf-badge { box-shadow: inset 0 1px 0 var(--bq-chip-hl), 0 0 0 2px var(--bq-gold) !important; }

/* ============ 6. CARRIL COLAPSADO (64 px) / móvil ============ */
/* con buscador: botón-icono de vidrio con la lupa; el estado pasa a ser un punto superpuesto en su esquina */
html.th-min:is(:root, .dark) body aside.w-64 > button:not(:has(#mjmf-badge)) {
  display: flex !important; justify-content: center !important; width: 38px !important; height: 38px !important;
  margin: 10px auto 0 !important; padding: 0 !important; border-radius: 50% !important;
}
html.th-min:is(:root, .dark) body aside.w-64 > button:not(:has(#mjmf-badge)) > span { flex: none; }
html.th-min:is(:root, .dark) body aside.w-64 > button:not(:has(#mjmf-badge)) > span > span { display: none !important; }
html.th-min:is(:root, .dark) body aside.w-64 > button:not(:has(#mjmf-badge)) > span > svg { width: 16px; height: 16px; }
html.th-min:is(:root, .dark) body aside.w-64:has(> button > span > svg) nav { margin-top: 8px; }
html.th-min:is(:root, .dark) body:has(aside.w-64 > button > span > svg) > button:has(#mjmf-badge) {
  left: calc(var(--bq-L) + 36px) !important; top: calc(var(--bq-T) + var(--bq-hdr) + 8px) !important; bottom: auto !important;
  width: 18px !important; height: 18px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; justify-content: center !important; align-items: center !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 50% !important;
  font-size: 0 !important; z-index: 40 !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.th-min:is(:root, .dark) body:has(aside.w-64 > button > span > svg) > button:has(#mjmf-badge) > span:first-child { display: none !important; }
html.th-min:is(:root, .dark) body:has(aside.w-64 > button > span > svg) > button:has(#mjmf-badge) > #mjmf-badge {
  width: 11px !important; height: 11px !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; font-size: 0 !important;
  border: 2px solid var(--bq-solid) !important; border-radius: 50% !important;
  background: var(--bq-dot, var(--bq-warn)) !important; box-shadow: 0 0 0 2px var(--bq-halo, var(--bq-warn-halo)) !important;
}
html.th-min:is(:root, .dark) body:has(aside.w-64 > button > span > svg) > button:has(#mjmf-badge) > #mjmf-badge::before,
html.th-min:is(:root, .dark) body:has(aside.w-64 > button > span > svg) > button:has(#mjmf-badge) > #mjmf-badge::after { display: none !important; }
html.th-min:is(:root, .dark) body:has(aside.w-64 > button > span > svg) > button:has(#mjmf-badge):focus-visible > #mjmf-badge { box-shadow: 0 0 0 2px var(--bq-gold) !important; }
/* sin buscador (o aún no montado): el estado flotante conserva la geometría de tahoe.css pero con el vidrio nuevo */
html.th-min:is(:root, .dark) body > button:has(#mjmf-badge) { border-radius: 999px !important; }
html.th-min:is(:root, .dark) body > button:has(#mjmf-badge) > #mjmf-badge {
  gap: 5px !important; padding: 0 6px 0 5px !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important;
}

/* ============ 7. CAMPOS DE BÚSQUEDA DE LAS VISTAS (Publicaciones, Remates, Mis procesos, Mis actuaciones) ============ */
/* (tahoe.css fija .bg-white con !important y index.html fija el borde oscuro con !important: por eso fondo y borde llevan !important aquí)
   solo pintura: ancho, alto, padding y fuente siguen siendo los de tahoe.css / tahoe-compacto.css. «:not(#bq)» solo sube la especificidad por encima de la regla genérica de campos de tahoe.css */
html:is(:root, .dark) body main div.relative > svg + input:is([type=text], :not([type])):not(#bq) {
  border-radius: 999px; border: 1px solid var(--bq-edge) !important;
  background-color: var(--bq-field) !important; background-image: var(--bq-gloss);
  -webkit-backdrop-filter: var(--bq-blur); backdrop-filter: var(--bq-blur);
  box-shadow: var(--bq-hl), 0 0 0 1px var(--bq-ring), var(--bq-shadow-sm); color: var(--bq-text);
}
html:is(:root, .dark) body main div.relative > svg + input:is([type=text], :not([type])):not(#bq):focus {
  border-color: var(--bq-gold) !important; box-shadow: var(--bq-hl), 0 0 0 3px var(--bq-focus);
}
html:is(:root, .dark) body main div.relative > svg:has(+ input:is([type=text], :not([type]))) { stroke-width: 1.6; z-index: 1; }

/* tableta (aside de 200 px): un poco más compacta para que «Buscar actuaciones…» no se corte */
@media (min-width: 768px) and (max-width: 1023px) {
  html:not(.th-min):is(:root, .dark) body aside.w-64 > button:not(:has(#mjmf-badge)) { font-size: 10px !important; letter-spacing: -.01em !important; padding: 0 48px 0 9px !important; }
  html:not(.th-min):is(:root, .dark) body aside.w-64:has(> button > span > svg) > button:has(#mjmf-badge) > #mjmf-badge { right: 11px; padding: 0 6px 0 5px !important; }
}

/* ============ 8. MOVIMIENTO (data-th-motion = full | soft | off; solo transform/opacity) ============ */
@keyframes bq-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes bq-in-dot { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes bq-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.22); opacity: .72; } }
html:is([data-th-motion="full"], [data-th-motion="soft"]) body aside.w-64 > button:not(:has(#mjmf-badge)) {
  transition: transform .18s var(--tm-ease, cubic-bezier(.32, .72, 0, 1)) !important; animation: bq-in .26s var(--tm-ease, cubic-bezier(.32, .72, 0, 1)) backwards !important;
}
html:is([data-th-motion="full"], [data-th-motion="soft"]) body aside.w-64 > button:not(:has(#mjmf-badge)):hover { transform: translateY(-1px); }
html:is([data-th-motion="full"], [data-th-motion="soft"]) body #mjmf-badge {
  transition: transform .16s var(--tm-ease, cubic-bezier(.32, .72, 0, 1)) !important; animation: bq-in-dot .26s var(--tm-ease, cubic-bezier(.32, .72, 0, 1)) backwards !important;
}
html:is([data-th-motion="full"], [data-th-motion="soft"]) body button:has(#mjmf-badge):hover > #mjmf-badge { transform: translateY(-1px); }
html:is([data-th-motion="full"], [data-th-motion="soft"]) body button:has(#mjmf-badge):active > #mjmf-badge { transform: scale(.96); }
html[data-th-motion="soft"] body aside.w-64 > button:not(:has(#mjmf-badge)), html[data-th-motion="soft"] body #mjmf-badge {
  transition-duration: .12s !important; animation-duration: .16s !important;
}
html[data-th-motion="full"] body #mjmf-badge[data-bq="fail"]::before { animation: bq-pulse 2.4s ease-in-out infinite; }
html[data-th-motion="off"] body aside.w-64 > button:not(:has(#mjmf-badge)), html[data-th-motion="off"] body button:has(#mjmf-badge),
html[data-th-motion="off"] body #mjmf-badge, html[data-th-motion="off"] body #mjmf-badge::before {
  animation: none !important; transition: none !important; transform: none !important;
}