/* Buscador en vivo de la cabecera y logo de Mika del pie (2026-11-11). Solo tokens de la tienda; nada inline: la CSP no deja `style=`. */
/* Capturas 171-172 (2026-11-12, «el buscador no funciona»): las sugerencias llegaban pero `overflow:hidden` de la píldora (tienda-pagina.css)
   las recortaba. La píldora deja ver lo que sale de ella y el botón redondea su propio borde. */
.t-buscar { position: relative; overflow: visible; }
.t-buscar button { border-radius: 0 calc(var(--radio-boton) - 2px) calc(var(--radio-boton) - 2px) 0; }
.t-sugerencias { position: absolute; z-index: 30; top: calc(100% + .25rem); left: 0; right: 0; max-height: 26rem; overflow-y: auto; background: var(--caja, var(--fondo));
                 border: 1px solid var(--borde, #7a7064); border-radius: .5rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18); }
.t-sugerencias[hidden] { display: none; }
.t-sugerencias a { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .5rem .75rem; color: var(--tinta, var(--texto)); text-decoration: none; }
.t-sugerencias a[aria-selected="true"], .t-sugerencias a:hover { background: color-mix(in srgb, var(--marca, var(--acento)) 16%, transparent); }
.t-sugerencias a[aria-selected="true"] { outline: 2px solid var(--marca, var(--acento)); outline-offset: -2px; }
.t-sugerencias img, .t-sugerencias .t-sug__vacio { flex: none; width: 2.5rem; height: 2.5rem; border-radius: .25rem; object-fit: cover; background: color-mix(in srgb, var(--tinta, var(--texto)) 10%, transparent); }
.t-sug__nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .9375rem; }
.t-sug__precio { flex: none; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.t-sug__todos { justify-content: center; border-top: 1px solid var(--borde, #7a7064); font-weight: 600; font-size: .9375rem; }

/* Logo del pie: dos imágenes y se muestra la que va con el tema. `a11y-oscuro` lo pone el panel; sin él, `prefers-color-scheme`, salvo que se
   haya elegido claro en el panel (mismo criterio de tienda-cabecera.css). */
.pie__mika { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pie__mika a { min-height: 44px; }
.pie__logo { display: block; width: auto; height: 1.25rem; }
.pie__logo--oscuro { display: none; }
html.a11y-oscuro .pie__logo--claro { display: none; }
html.a11y-oscuro .pie__logo--oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  html:not(.a11y-oscuro):not(:has(.a11y-tema:not([hidden]))) .pie__logo--claro { display: none; }
  html:not(.a11y-oscuro):not(:has(.a11y-tema:not([hidden]))) .pie__logo--oscuro { display: block; }
}