/* ==========================================================================
   estilo.css — [TOCKIA 3.1] Identidad visual del catálogo
   --------------------------------------------------------------------------
   ⚠ NADA de esto se parece al otro proyecto:
     - Fondo en el COLOR DE MARCA del distribuidor, tarjetas blancas encima
     - Tipografía Fraunces (serif) para nombres + DM Sans para el resto
     - Esquinas MUY redondeadas (18px) en las tarjetas
     - Foto 4:5 vertical con fondo blanco
     - Colores de variante como PUNTOS con el hexadecimal real del proveedor
     - Botón de ancho completo bajo cada tarjeta
     - SIN MODALES: cada producto tiene su propia página

   Una sola hoja sirve para todos los inquilinos: los colores entran por
   variables desde el PHP.
   ========================================================================== */

:root{
  --marca:     #0F6E56;   /* los pisa el PHP con los del inquilino */
  --marca-sob: #E1F5EE;
  --marca-txt: #04342C;

  --blanco:  #FFFFFF;
  --tinta:   #1A1A1C;
  --tinta-2: #5C5C64;
  --tinta-3: #96969E;
  --linea:   #E8E8EC;

  --r:    18px;   /* tarjetas */
  --r-sm: 999px;  /* chips y botones: totalmente redondos */
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--marca);
  color:var(--blanco);
  font-family:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

.serif{ font-family:'Fraunces', Georgia, serif; font-weight:500; letter-spacing:-0.012em; }

.env{ max-width:1240px; margin:0 auto; padding:0 24px; }

.tenue{ opacity:.62; }

/* --------------------------------------------------------------- cabecera */
.cab{ padding:20px 0 4px; }
.cab-in{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

.marca{ display:flex; align-items:center; gap:11px; }
.marca-cua{
  width:38px; height:38px; border-radius:11px;
  background:var(--blanco); color:var(--marca);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:500; flex:0 0 auto; overflow:hidden;
}
.marca-cua img{ width:100%; height:100%; object-fit:contain; }
/* [LOGO] Cuando el inquilino tiene logo horizontal, el cuadrito se vuelve
   transparente y crece a lo ancho para no aplastar el logo. */
.marca.con-logo .marca-cua{ background:transparent; width:auto; height:38px; border-radius:0; }
.marca.con-logo .marca-cua img{ width:auto; height:100%; }
.marca.con-logo .marca-nom{ display:none; }
.marca-nom{ font-size:23px; color:var(--blanco); }

.cab-esp{ flex:1; }

.buscar{
  display:flex; align-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-sm); padding:9px 18px; min-width:230px;
}
.buscar input{
  background:none; border:0; outline:0; color:var(--blanco);
  font:inherit; font-size:14px; width:100%;
}
.buscar input::placeholder{ color:rgba(255,255,255,.6); }

.bt-wa{
  background:var(--blanco); color:var(--marca);
  border-radius:var(--r-sm); padding:10px 22px;
  font-size:14px; font-weight:500; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease;
}
.bt-wa:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.16); }

/* ------------------------------------------------------ barra de sesión */
.barra-dist{ background:rgba(0,0,0,.28); font-size:13px; }
.barra-dist .env{ display:flex; align-items:center; justify-content:space-between; padding-top:9px; padding-bottom:9px; }
.barra-dist a{ text-decoration:underline; opacity:.85; }

/* ---------------------------------------------------------------- filtros */
.filtros{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; padding:26px 0 14px; }

.chip{
  font-size:13.5px; padding:8px 17px;
  border:1px solid rgba(255,255,255,.28); border-radius:var(--r-sm);
  color:rgba(255,255,255,.9); white-space:nowrap;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.chip:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); }
.chip.on{ background:var(--blanco); border-color:var(--blanco); color:var(--marca); font-weight:500; }

.chip-n{ opacity:.55; font-size:12px; margin-left:3px; }
.chip-sm{ font-size:12.5px; padding:6px 14px; }
.ml{ margin-left:auto; }

.orden{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:0 0 26px; }
.cuenta{ font-size:13px; opacity:.72; margin-right:6px; }

/* ----------------------------------------------------------------- rejilla */
.rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(214px, 1fr));
  gap:20px;
  padding-bottom:52px;
}

.tarj{
  background:var(--blanco); color:var(--tinta);
  border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.tarj:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.2); }

.tarj-liga{ display:flex; flex-direction:column; flex:1; }

.tarj-foto{
  position:relative;
  aspect-ratio:4/5;                 /* ⚠ vertical, no cuadrada */
  background:var(--blanco);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.tarj-foto img{
  width:100%; height:100%; object-fit:contain; display:block; padding:12px;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.tarj:hover .tarj-foto img{ transform:scale(1.055); }
.sinfoto{ color:var(--tinta-3); font-size:12px; }

.eti{
  position:absolute; top:12px; left:12px;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  padding:4px 10px; border-radius:var(--r-sm);
}
.eti-si{ background:var(--marca-sob); color:var(--marca-txt); }
.eti-no{ background:#F0F0F3; color:var(--tinta-3); }

.tarj-cuerpo{ padding:4px 16px 14px; text-align:center; flex:1; display:flex; flex-direction:column; }
.tarj-prov{
  margin:0 0 5px; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--marca); font-weight:500;
}
.tarj-nom{ font-size:16px; margin:0 0 5px; line-height:1.28; color:var(--tinta); }
.tarj-pre{ font-size:14.5px; color:var(--tinta-2); margin:0 0 10px; }

.puntos{ display:flex; gap:5px; align-items:center; justify-content:center; margin-top:auto; }
.punto{ width:12px; height:12px; border-radius:50%; border:1px solid var(--linea); }
.mas{ font-size:11px; color:var(--tinta-3); margin-left:2px; }

.bt-ver{
  display:block; text-align:center;
  margin:0 12px 12px; padding:11px 14px;
  background:var(--marca); color:var(--blanco);
  border-radius:var(--r-sm); font-size:13.5px; font-weight:500;
  transition:opacity .16s ease;
}
.bt-ver:hover{ opacity:.86; }

/* ------------------------------------------------------ página de producto */
.hoja{
  background:var(--blanco); color:var(--tinta);
  border-radius:var(--r); padding:30px;
  margin:8px 0 40px;
}
.prod{ display:grid; grid-template-columns:1.02fr 1fr; gap:40px; }
@media (max-width:840px){ .prod{ grid-template-columns:1fr; gap:26px; } .hoja{ padding:20px; } }

.prod-foto{
  aspect-ratio:4/5; background:#FAFAFB;
  border-radius:14px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.prod-foto img{ width:100%; height:100%; object-fit:contain; padding:18px; }

.swatches{ display:flex; gap:7px; margin-top:13px; flex-wrap:wrap; }
.sw{
  display:flex; align-items:center; gap:7px;
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-sm);
  padding:6px 13px 6px 7px; cursor:pointer; font:inherit; font-size:12.5px;
  color:var(--tinta-2); transition:border-color .16s ease, color .16s ease;
}
.sw:hover{ border-color:var(--tinta-3); color:var(--tinta); }
.sw.on{ border-color:var(--marca); color:var(--tinta); font-weight:500; }
.sw-p{ width:15px; height:15px; border-radius:50%; border:1px solid var(--linea); flex:0 0 auto; }
.sw-off{ opacity:.45; }
.sw-off .sw-t{ text-decoration:line-through; }

.tiras{ display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.oculto{ display:none; }
.tira{
  width:58px; height:72px; border-radius:10px; overflow:hidden;
  background:#FAFAFB; border:1px solid var(--linea); cursor:pointer; padding:0;
  transition:border-color .16s ease;
}
.tira:hover, .tira.on{ border-color:var(--marca); }
.tira img{ width:100%; height:100%; object-fit:contain; padding:5px; }

.prod h1{ font-size:31px; margin:0 0 6px; line-height:1.14; color:var(--tinta); }
.sku{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; color:var(--tinta-3); margin:0 0 20px; }
.prod-pre{ font-size:29px; margin:0 0 4px; color:var(--tinta); }
.prod-nota{ font-size:12.5px; color:var(--tinta-3); margin:0 0 22px; }

.bloque{ border-top:1px solid var(--linea); padding:20px 0; }
.bloque:last-child{ padding-bottom:0; }
.bloque h2{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-3); margin:0 0 12px; font-weight:500; font-family:inherit;
}
.bloque p{ margin:0; color:var(--tinta-2); font-size:14px; }

.datos{ display:grid; grid-template-columns:auto 1fr; gap:8px 20px; font-size:14px; }
.datos dt{ color:var(--tinta-3); }
.datos dd{ margin:0; color:var(--tinta-2); }

.fila-color{ display:flex; align-items:center; gap:9px; }
.punto-g{ width:14px; height:14px; border-radius:50%; border:1px solid var(--linea); flex:0 0 auto; }

/* ------------------------------------------------------------- consultor */
.consul{ background:#FAFAFB; border:1px solid var(--linea); border-radius:14px; padding:18px; }
.consul-fila{ display:flex; gap:9px; align-items:center; margin-bottom:13px; }
.consul input{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-sm);
  color:var(--tinta); font:inherit; font-size:15px; padding:10px 16px; width:126px; outline:0;
}
.consul input:focus{ border-color:var(--marca); }

.consul-sel{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-sm);
  color:var(--tinta); font:inherit; font-size:14px; padding:10px 14px; outline:0;
  cursor:pointer; max-width:180px;
}
.consul-sel:focus{ border-color:var(--marca); }
@media (max-width:520px){ .consul-fila{ flex-wrap:wrap; } .consul-sel{ max-width:100%; width:100%; } }
.consul button{
  background:var(--marca); color:var(--blanco); border:0; cursor:pointer;
  border-radius:var(--r-sm); padding:11px 22px; font:inherit; font-size:14px; font-weight:500;
}

.aviso{ border-radius:12px; padding:13px 15px; font-size:14px; }
.aviso-si{ background:var(--marca-sob); color:var(--marca-txt); }
.aviso-no{ background:#F0F0F3; color:var(--tinta-2); }
.aviso-ojo{ background:#FFF6E0; color:#7A5A10; }
.aviso small{ display:block; margin-top:5px; font-size:12px; opacity:.85; }

.caja-dist{ border:1px solid var(--linea); border-radius:12px; padding:15px; }
.cifra{ font-family:'Fraunces', Georgia, serif; font-size:27px; margin:0 0 12px; color:var(--tinta); }
.mini{ font-size:11.5px; color:var(--tinta-3); margin:0 0 4px; }

/* ------------------------------------------------------------------- pie */
.pie{ padding:6px 0 46px; font-size:13px; opacity:.8; }
.pie a{ text-decoration:underline; }

.vacio{ padding:70px 0; text-align:center; opacity:.75; }

/* ------------------------------------------------------------ paginación */
.pags{ display:flex; gap:7px; justify-content:center; padding:0 0 58px; flex-wrap:wrap; }
.pag{
  min-width:38px; text-align:center;
  padding:8px 12px; border:1px solid rgba(255,255,255,.28); border-radius:var(--r-sm);
  font-size:14px;
}
.pag:hover{ background:rgba(255,255,255,.14); }
.pag.on{ background:var(--blanco); border-color:var(--blanco); color:var(--marca); font-weight:500; }

.pag-fl{ font-size:19px; line-height:1; padding:6px 14px; }
.pag-fl.off{ opacity:.32; }
.pag-pts{ padding:8px 4px; opacity:.55; font-size:14px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}


/* [MARCACIÓN Y CARRITO] botones de acción en la ficha */
.marca-txt-p{ color:var(--tinta-2); font-size:14px; margin:0 0 14px; }
.acciones-prod{ display:flex; gap:10px; flex-wrap:wrap; }
.bt-marcacion, .bt-carrito{
  flex:1; min-width:180px; text-align:center;
  padding:13px 20px; border-radius:var(--r-sm); font-size:14.5px; font-weight:500;
  cursor:pointer; border:0; transition:opacity .16s ease, transform .16s ease;
}
.bt-carrito{ background:var(--marca); color:#fff; }
.bt-carrito:hover{ opacity:.9; transform:translateY(-1px); }
.bt-carrito.agregado{ background:#0F6E56; }
.bt-marcacion{ background:#fff; border:1.5px solid var(--marca); color:var(--marca); }
.bt-marcacion:hover{ background:var(--marca); color:#fff; }