/* ElectroPC · El panel de sugerencias del buscador (sugerir.js).
   Sigue los colores del encabezado (--mn-*, menu-alt.css), oscuro o claro
   según el interruptor del tema; sin ellos, claro. */

/* El panel propio de FiboSearch se esconde en la vista previa: este toma su
   lugar sobre el mismo campo. */
body.eph-previa .dgwt-wcas-suggestions-wrapp,
body.eph-previa .dgwt-wcas-details-wrapp{display:none!important}

.eph-sg{
  --sg-panel:var(--mn-panel,#fff);
  --sg-borde:var(--mn-borde,#E2E8F0);
  --sg-tinta:var(--mn-tinta,#0F172A);
  --sg-texto:var(--mn-texto,#475569);
  --sg-azul:var(--mn-azul,#2563EB);
  --sg-luz:var(--mn-hover,rgba(15,23,42,.05));
  /* Arriba del velo que FiboSearch pone sobre la página al escribir
     (.dgwt-wcas-darkened-overlay, z-index 100000): con 99990 el velo quedaba
     encima del panel y se comía los clics; solo andaban las flechas (26/9). */
  position:fixed;z-index:100010;
  font-family:inherit;color:var(--sg-tinta);
  transform-origin:50% 0}
.eph-sg[hidden]{display:none}
.eph-sg-marco{position:relative;overflow:auto;overscroll-behavior:contain;
  background:var(--sg-panel);border:1px solid var(--sg-borde);border-radius:16px;
  box-shadow:0 12px 32px rgba(2,6,23,.18)}
.eph-sg-cont{position:relative;padding:6px}

/* El resaltado: una sola pieza que viaja de renglón en renglón. */
.eph-sg-luz{position:absolute;left:6px;right:6px;top:0;bottom:0;border-radius:12px;
  background:var(--sg-luz);opacity:0;pointer-events:none}

.eph-sg-tit{margin:10px 10px 4px;font-size:.75rem;font-weight:600;color:var(--sg-texto)}

.eph-sg-item{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;
  padding:8px 10px;border-radius:12px;color:inherit;text-decoration:none}
.eph-sg-item:focus-visible{outline:2px solid var(--sg-azul);outline-offset:-2px}
.eph-sg-item img,.eph-sg-sinfoto{flex:none;width:44px;height:44px;border-radius:8px;
  object-fit:contain;background:#fff}
.eph-sg-sinfoto{background:var(--sg-luz)}
.eph-sg-nombre{flex:1;min-width:0;font-size:.875rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eph-sg-nombre b{display:block;font-weight:600}
.eph-sg-nombre small,.eph-sg-plata small{display:block;font-size:.75rem;color:var(--sg-texto)}
.eph-sg-plata{flex:none;text-align:right;font-variant-numeric:tabular-nums;line-height:1.25}
.eph-sg-plata b{font-size:1rem;font-weight:700}

.eph-sg-ico{flex:none;width:44px;height:44px;border-radius:8px;display:grid;place-items:center;
  color:var(--sg-azul);background:color-mix(in srgb,var(--sg-azul) 12%,transparent)}
.eph-sg-fam .eph-sg-nombre{-webkit-line-clamp:unset}
/* La raya va aparte para que el renglón conserve el radio de los demás. */
.eph-sg-todos{margin-top:5px}
.eph-sg-todos::before{content:"";position:absolute;left:0;right:0;top:-3px;border-top:1px solid var(--sg-borde)}
.eph-sg-todos .eph-sg-nombre{font-weight:600;color:var(--sg-azul)}
.eph-sg-todos kbd{flex:none;font-family:inherit;font-size:.75rem;font-weight:600;line-height:1;color:var(--sg-texto);
  border:1px solid var(--sg-borde);border-radius:8px;padding:4px 6px}

.eph-sg-vacio{margin:0;padding:18px 12px;font-size:.875rem;font-weight:600}
.eph-sg-vacio small{display:block;margin-top:2px;font-weight:400;color:var(--sg-texto)}

/* Mientras llega la respuesta, lo anterior queda pero se nota que cambia. */
.eph-sg-cargando .eph-sg-cont{opacity:.7;transition:opacity .2s}

@media (max-width:639px){
  .eph-sg-plata small{display:none}
}