/* ============================================================
   El buscador del distribuidor.

   Usa los mismos tokens que el alta, y por el mismo motivo: la marca del
   dominio los repinta enteros desde brand.js. Los valores de aquí son los de
   «en galicia», que es también lo que se ve en desarrollo.

   Dos pantallas y una sola hoja. En grande, el panel de filtros es una columna
   fija a la izquierda. En móvil, el mismo panel entra desde abajo. No hay dos
   maquetaciones: hay una que se mueve.
   ============================================================ */
:root{
  --paper:#EFF2EF; --paper-2:#E5EAE6; --white:#FBFCFB;
  --ink:#16201E; --ink-soft:#5C6A66; --ink-faint:#8A938E;
  --sea:#0E4A4C; --sea-deep:#072F31; --sea-tint:#D9E5E3;
  --toxo:#E8B44C; --toxo-deep:#B4801C;
  --line:#C7D1CB; --line-soft:#DCE3DE;
  --r:3px;
  --pad:clamp(16px,3vw,32px);
  --panel-w:230px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------------------------------------------------------- la cabecera */
.cab{
  position:sticky; top:0; z-index:20;
  display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
  padding:12px var(--pad);
  background:var(--sea-deep); color:var(--white);
  border-bottom:1px solid var(--sea);
}
.marca{
  color:var(--white); text-decoration:none;
  font-weight:600; letter-spacing:.01em; font-size:16px;
}
.caja{display:flex; flex:1 1 320px; min-width:0}
.caja input{
  flex:1 1 auto; min-width:0;
  padding:10px 12px; font-size:15px;
  border:1px solid var(--sea); border-right:0;
  border-radius:var(--r) 0 0 var(--r);
  background:var(--white); color:var(--ink);
}
.caja input:focus{outline:2px solid var(--toxo); outline-offset:-2px}
.caja button{
  padding:10px 16px; font-size:15px; font-weight:600; cursor:pointer;
  border:1px solid var(--toxo-deep); border-radius:0 var(--r) var(--r) 0;
  background:var(--toxo); color:var(--sea-deep);
}
.clases{
  display:flex; gap:12px; margin:0; padding:0; border:0;
  font-size:13px; color:var(--sea-tint);
}
.clases label{display:flex; align-items:center; gap:5px; cursor:pointer}
.filtrar{
  display:none; align-items:center; gap:6px;
  padding:9px 14px; font-size:14px; cursor:pointer;
  border:1px solid var(--sea); border-radius:var(--r);
  background:transparent; color:var(--white);
}
/* El enlace para darse de alta en el buscador. Discreto: la cabecera es para
   buscar, y esto sólo lo mira quien vende. */
.anade{
  padding:9px 14px; font-size:13.5px; white-space:nowrap;
  color:var(--sea-tint); text-decoration:none;
  border:1px solid var(--sea); border-radius:var(--r);
}
.anade:hover{background:var(--sea); color:var(--white)}
.cuenta{
  min-width:19px; padding:1px 5px; border-radius:10px;
  background:var(--toxo); color:var(--sea-deep);
  font-size:12px; font-weight:700; text-align:center;
}

/* ------------------------------------------------------------ el cuerpo */
.cuerpo{
  display:grid; grid-template-columns:var(--panel-w) 1fr;
  gap:var(--pad); padding:var(--pad); align-items:start;
}

.panel{
  position:sticky; top:78px;
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:14px;
}
.panelCab{display:none}
.grupo{margin:0 0 18px}
.grupo h2{
  margin:0 0 8px; font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);
}
.ops{display:flex; flex-direction:column; gap:4px}
/* Casillas, no botones: se marca mas de una en cada grupo. */
.op{
  display:flex; gap:8px; align-items:center;
  width:100%; padding:5px 8px; cursor:pointer;
  font-size:14px; color:var(--ink);
  border:1px solid transparent; border-radius:var(--r);
}
.op:hover{background:var(--paper-2)}
.op.puesta{background:var(--sea-tint); border-color:var(--sea); font-weight:600}
.op input{margin:0; flex:0 0 auto; accent-color:var(--sea)}
.op .txt{flex:1 1 auto; min-width:0}
.op .n{color:var(--ink-faint); font-size:12px; font-variant-numeric:tabular-nums}
/* El segundo nivel va sangrado, para que se lea como lo que es: lo que hay
   dentro del sector elegido y no otro grupo suelto. */
#grpCat{margin-top:-8px; padding-left:10px; border-left:2px solid var(--sea-tint)}
#grpCat h2{color:var(--sea)}
.rango{display:flex; gap:6px}
.rango input{
  width:50%; min-width:0; padding:7px 8px; font-size:14px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--white);
}
.limpiar{
  width:100%; padding:8px; cursor:pointer; font-size:13px;
  color:var(--ink-soft); background:transparent;
  border:1px solid var(--line); border-radius:var(--r);
}
.verResultados{display:none}

/* --------------------------------------------------------- resultados */
.resumen{margin:0 0 10px; color:var(--ink-soft); font-size:14px}
.aviso{
  margin:0 0 14px; padding:10px 12px;
  background:var(--sea-tint); border-left:3px solid var(--sea);
  border-radius:0 var(--r) var(--r) 0; font-size:14px;
}
.rejilla{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
}
.t{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit;
}
.t:hover{border-color:var(--sea)}
.t:focus-visible{outline:2px solid var(--toxo); outline-offset:2px}
.foto{position:relative; display:block; aspect-ratio:4/3; background:var(--paper-2)}
.foto img{width:100%; height:100%; object-fit:cover; display:block}
.sinFoto{
  display:block; width:100%; height:100%;
  background:linear-gradient(135deg,var(--paper-2),var(--sea-tint));
}
/* La etiqueta que dice que esto es una tienda y no un producto. Sin ella las
   dos tarjetas se confunden, y quien pulsa espera una ficha y aterriza en una
   portada. */
.et{
  position:absolute; left:8px; top:8px;
  padding:2px 7px; border-radius:2px;
  background:var(--sea-deep); color:var(--white);
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.nom{
  padding:10px 10px 4px; font-weight:600; font-size:14px; line-height:1.3;
  text-wrap:balance;
}
.pie{
  display:flex; flex-direction:column; gap:2px;
  padding:0 10px 10px; font-size:12px; color:var(--ink-soft);
}
.pvp{color:var(--ink); font-weight:700; font-size:14px; font-variant-numeric:tabular-nums}
/* «Consultar precio» no es una cifra y no se pinta como tal. */
.pvp.sinPvp{color:var(--ink-soft); font-weight:500; font-size:13px}
.tTienda{border-color:var(--line)}
.mas{
  display:block; margin:20px auto 0; padding:9px 20px; cursor:pointer;
  font-size:14px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r);
}

.velo{
  position:fixed; inset:0; z-index:25;
  background:rgba(7,47,49,.45);
}

/* -------------------------------------------------------------- móvil */
@media (max-width:760px){
  .cab{gap:8px 10px; padding:10px 14px}
  .caja{flex:1 1 100%; order:3}
  .clases{order:4; flex:1 1 auto; font-size:12px}
  .filtrar{display:flex; order:5; margin-left:auto}
  /* Detrás de «Filtrar», que es el botón que se usa buscando. */
  .anade{order:6; padding:9px 10px; font-size:12.5px}
  .cuerpo{grid-template-columns:1fr; padding:14px; gap:0}

  /* El mismo panel, entrando desde abajo. */
  .panel{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:30;
    max-height:82vh; overflow-y:auto;
    border-radius:12px 12px 0 0; border-bottom:0;
    transform:translateY(101%); transition:transform .18s ease-out;
    padding:0 16px 16px;
  }
  .panel.abierto{transform:translateY(0)}
  .panelCab{
    position:sticky; top:0;
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 0 10px; margin-bottom:6px;
    background:var(--white); border-bottom:1px solid var(--line-soft);
  }
  .panelCab button{
    font-size:26px; line-height:1; cursor:pointer;
    background:transparent; border:0; color:var(--ink-soft);
  }
  .verResultados{
    display:block; width:100%; margin-top:10px; padding:11px; cursor:pointer;
    font-size:15px; font-weight:600;
    background:var(--sea-deep); color:var(--white);
    border:0; border-radius:var(--r);
  }
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
}

@media (prefers-reduced-motion:reduce){
  .panel{transition:none}
}