/* ============================================================
   AYCOMER · Vistas: portada, catálogo, ficha, pago
   Archivo: vistas.css
   No edites colores aquí: todos viven en tokens.css
   ============================================================ */

/* ============================================================
   PORTADA
   ============================================================ */
.portada{padding:34px 0 10px}
.portada-caja{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:26px;align-items:stretch;
}
.portada-txt{
  background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-xl);
  padding:38px 34px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.portada-txt::before{
  content:"";position:absolute;inset:0;background:var(--grad);opacity:.05;
}
.portada-txt > *{position:relative}
.cejilla{
  display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fucsia-txt);margin-bottom:16px;
}
.cejilla::before{content:"";width:26px;height:2px;background:var(--grad);border-radius:2px}
.portada-txt h1{font-size:clamp(30px,4.2vw,50px);margin-bottom:14px}
.portada-txt h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.portada-txt p{color:var(--texto-2);font-size:16px;max-width:44ch;margin:0 0 24px}
.portada-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.datos-territorio{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid var(--linea);padding-top:20px}
.datos-territorio div strong{display:block;font-family:var(--display);font-size:26px;font-weight:800;line-height:1}
.datos-territorio div span{font-size:12px;color:var(--texto-3);font-weight:600}

/* Vitrinas rotativas */
.vitrinas{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:420px;background:var(--tinta)}
.vitrina{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:36px;opacity:0;transition:opacity .7s ease;pointer-events:none;color:#fff;
}
.vitrina.on{opacity:1;pointer-events:auto}
.vitrina-fondo{position:absolute;inset:0}
.vitrina-fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,30,.05) 30%,rgba(10,14,30,.82))}
.vitrina-marco{
  position:absolute;top:22px;left:22px;right:22px;bottom:150px;
  border:2px dashed rgba(255,255,255,.45);border-radius:var(--r-l);
  display:grid;place-items:center;color:rgba(255,255,255,.8);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.vitrina > *{position:relative;z-index:2}
.vitrina .etq{align-self:flex-start;margin-bottom:12px;background:#fff;color:var(--tinta)}
.vitrina h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:8px;max-width:16ch}
.vitrina p{margin:0 0 18px;font-size:14.5px;opacity:.9;max-width:38ch}
.vitrina .btn{align-self:flex-start;background:#fff;color:var(--tinta)}
.vitrina-puntos{position:absolute;bottom:22px;right:26px;display:flex;gap:7px;z-index:3}
.vitrina-puntos button{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.42);transition:.2s}
.vitrina-puntos button.on{width:28px;background:#fff}

/* ============================================================
   SECCIONES
   ============================================================ */
.bloque{padding:44px 0}
.bloque-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.bloque-cab h2{font-size:clamp(22px,2.4vw,30px)}
.bloque-cab p{margin:6px 0 0;color:var(--texto-2);font-size:14.5px}
.enlace-mas{font-size:14px;font-weight:700;color:var(--fucsia-txt);display:inline-flex;align-items:center;gap:6px}
.enlace-mas:hover{gap:10px}

/* Categorías */
.rejilla-cat{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.ficha-cat{
  background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-m);
  padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;transition:.18s;position:relative;overflow:hidden;
}
.ficha-cat:hover{transform:translateY(-3px);border-color:transparent;box-shadow:var(--sombra-m)}
.ficha-cat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad);transform:scaleX(0);transition:transform .22s}
.ficha-cat:hover::after{transform:scaleX(1)}
.ficha-cat .glifo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--grad-suave)}
.ficha-cat .glifo svg{width:23px;height:23px;stroke:var(--fucsia-txt);fill:none;stroke-width:1.7}
.ficha-cat b{font-size:13px;font-weight:700;line-height:1.25}
.ficha-cat small{font-size:11.5px;color:var(--texto-3);font-weight:600}

/* Comercios */
.carril{display:flex;gap:14px;overflow-x:auto;padding:4px 4px 16px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.carril::-webkit-scrollbar{height:6px}
.carril::-webkit-scrollbar-thumb{background:var(--linea-fuerte);border-radius:9px}
.ficha-com{
  flex:0 0 268px;scroll-snap-align:start;background:var(--sup);border:1px solid var(--linea);
  border-radius:var(--r-l);overflow:hidden;transition:.18s;text-align:left;
}
.ficha-com:hover{transform:translateY(-3px);box-shadow:var(--sombra-m)}
.com-tapa{height:80px;position:relative}
.com-cuerpo{padding:0 18px 18px;position:relative}
.com-avatar{
  width:56px;height:56px;border-radius:18px;border:3px solid var(--sup);margin-top:-28px;
  display:grid;place-items:center;font-family:var(--display);font-size:21px;font-weight:800;color:#fff;
}
.com-cuerpo b{display:block;font-size:15px;margin:10px 0 2px}
.com-meta{font-size:12.5px;color:var(--texto-3);font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.com-pie{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* ============================================================
   CATÁLOGO
   ============================================================ */
.catalogo{display:grid;grid-template-columns:262px minmax(0,1fr);gap:26px;align-items:start}
.filtros{
  position:sticky;top:calc(var(--hdr) + 12px);background:var(--sup);border:1px solid var(--linea);
  border-radius:var(--r-l);padding:6px 18px 18px;max-height:calc(100vh - var(--hdr) - 30px);overflow-y:auto;
}
.filtros::-webkit-scrollbar{width:5px}
.filtros::-webkit-scrollbar-thumb{background:var(--linea-fuerte);border-radius:9px}
.f-grupo{border-bottom:1px solid var(--linea);padding:16px 0}
.f-grupo:last-child{border-bottom:0}
.f-grupo > h4{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--texto-3);margin-bottom:12px;font-family:var(--texto-f)}
.f-lista li{margin-bottom:3px}
.f-lista button{width:100%;text-align:left;padding:7px 10px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--texto-2);display:flex;justify-content:space-between;gap:8px;transition:.14s}
.f-lista button:hover{background:var(--sup-2);color:var(--texto)}
.f-lista button.on{background:var(--grad-suave);color:var(--fucsia-txt)}
.f-lista button span{font-size:11.5px;color:var(--texto-3);font-weight:700}
.f-precio{display:flex;gap:8px;align-items:center}
.f-precio input{width:100%;padding:9px 10px;border-radius:9px;border:1.5px solid var(--linea);background:var(--sup-2);font-size:13px;font-weight:600}
.f-precio input:focus{outline:none;border-color:var(--fucsia-txt)}
.f-rangos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.f-rangos button{font-size:12px;padding:5px 10px;border-radius:999px;border:1.5px solid var(--linea);color:var(--texto-2);font-weight:600}
.f-rangos button:hover{border-color:var(--fucsia-txt);color:var(--fucsia-txt)}
.marcar{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px;font-weight:600;color:var(--texto-2);cursor:pointer}
.marcar input{appearance:none;width:19px;height:19px;border-radius:6px;border:1.8px solid var(--linea-fuerte);flex:none;transition:.15s;position:relative;cursor:pointer}
.marcar input:checked{background:var(--grad);border-color:transparent}
.marcar input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(43deg)}
.marcar:hover{color:var(--texto)}
.estrellas-f button{display:flex;align-items:center;gap:7px;width:100%;padding:6px 8px;border-radius:9px;font-size:13px;font-weight:600;color:var(--texto-2)}
.estrellas-f button:hover{background:var(--sup-2)}
.estrellas-f button.on{background:var(--grad-suave);color:var(--fucsia-txt)}

.barra-orden{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-m);padding:12px 16px;margin-bottom:16px;
}
.barra-orden .cuenta{font-size:13.5px;color:var(--texto-2);font-weight:600}
.barra-orden .cuenta b{color:var(--texto)}
.orden-der{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.selector{
  padding:9px 34px 9px 13px;border-radius:10px;border:1.5px solid var(--linea);background:var(--sup-2);
  font-size:13.5px;font-weight:600;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6484' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px;
}
.selector:focus{outline:none;border-color:var(--fucsia-txt)}
.filtros-activos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.fa{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 13px;border-radius:999px;background:var(--grad-suave);border:1.5px solid rgba(175,39,125,.25);font-size:12.5px;font-weight:700;color:var(--fucsia-txt)}
.fa button{width:18px;height:18px;border-radius:50%;background:rgba(175,39,125,.18);display:grid;place-items:center;font-size:13px;line-height:1;color:var(--fucsia-txt)}

/* Tarjeta de producto */
.rejilla-prod{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rejilla-prod.ancha{grid-template-columns:repeat(5,1fr)}
.prod{
  background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;transition:.2s;position:relative;text-align:left;
}
.prod:hover{transform:translateY(-4px);box-shadow:var(--sombra-m);border-color:transparent}
.prod-foto{position:relative;aspect-ratio:1;overflow:hidden;display:grid;place-items:center}
.marco-foto{
  position:absolute;inset:10px;border:2px dashed rgba(20,34,79,.16);border-radius:var(--r-m);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
[data-tema="noche"] .marco-foto{border-color:rgba(255,255,255,.18)}
.marco-foto svg{width:40px;height:40px;stroke:rgba(20,34,79,.34);fill:none;stroke-width:1.4}
[data-tema="noche"] .marco-foto svg{stroke:rgba(255,255,255,.4)}
.marco-foto span{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(20,34,79,.4)}
[data-tema="noche"] .marco-foto span{color:rgba(255,255,255,.45)}
.prod-etqs{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;z-index:2;align-items:flex-start}
.prod-fav{
  position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;z-index:2;transition:.16s;box-shadow:var(--sombra-s);
}
.prod-fav svg{width:17px;height:17px;stroke:var(--tinta);fill:none;stroke-width:1.9}
.prod-fav:hover{transform:scale(1.1)}
.prod-fav.on svg{fill:var(--fucsia);stroke:var(--fucsia-txt)}
.prod-cuerpo{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1;gap:5px}
.prod-com{font-size:11.5px;font-weight:700;color:var(--texto-3);display:flex;align-items:center;gap:5px}
.prod-com svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.prod-nom{font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.prod-calif{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--texto-3);font-weight:600}
.prod-calif .est{color:var(--miel-txt);letter-spacing:-1px}
.prod-precios{margin-top:auto;padding-top:8px}
.prod-antes{font-size:12.5px;color:var(--texto-3);text-decoration:line-through;font-weight:600}
.prod-precio{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:baseline;gap:8px}
.prod-desc{font-size:12.5px;font-weight:800;color:var(--exito-txt)}
.prod-envio{font-size:11.5px;font-weight:700;color:var(--exito-txt);margin-top:3px}
.prod-envio.lejos{color:var(--texto-3)}
.prod-agregar{
  margin-top:12px;width:100%;padding:11px;border-radius:12px;background:var(--texto);color:var(--fondo);
  font-size:13.5px;font-weight:700;transition:.16s;display:flex;align-items:center;justify-content:center;gap:7px;
}
.prod-agregar:hover{background:var(--cta);color:var(--cta-texto);border-color:var(--cta)}
/* CAMBIO (15 ago 2026): antes se ponía fucsia, el mismo color de
   toda la marca. Ahora usa el color exclusivo de acción, así el
   botón de comprar es lo único de ese color en toda la pantalla. */
.prod-agregar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

.vacio{
  grid-column:1/-1;text-align:center;padding:64px 24px;background:var(--sup);
  border:1px dashed var(--linea-fuerte);border-radius:var(--r-l);
}
.vacio svg{width:54px;height:54px;stroke:var(--texto-3);fill:none;stroke-width:1.3;margin-bottom:14px}
.vacio h3{font-size:20px;margin-bottom:8px}
.vacio p{color:var(--texto-2);margin:0 auto 18px;max-width:44ch;font-size:14.5px}
.mas-prod{display:flex;justify-content:center;margin-top:28px}


/* ============================================================
   PANEL DEMO (para la presentación al cliente)
   ============================================================ */
.demo-btn{
  position:fixed;left:20px;bottom:20px;z-index:88;display:flex;align-items:center;gap:9px;
  padding:12px 18px;border-radius:999px;background:var(--tinta);color:#fff;font-size:13px;font-weight:700;
  box-shadow:var(--sombra-l);border:1.5px solid rgba(255,255,255,.14);
}
.demo-btn:hover{transform:translateY(-2px)}
.demo-btn i{width:8px;height:8px;border-radius:50%;background:var(--miel);animation:latir 1.6s infinite}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.25}}
.demo-sec{border-bottom:1px solid var(--linea);padding:18px 0}
.demo-sec:last-child{border-bottom:0}
.demo-sec h4{font-size:13.5px;margin-bottom:5px}
.demo-sec > p{font-size:12.5px;color:var(--texto-2);margin:0 0 14px}
.paleta{display:flex;gap:8px;flex-wrap:wrap}
.paleta button{width:38px;height:38px;border-radius:12px;border:2.5px solid transparent;transition:.15s}
.paleta button.on{border-color:var(--texto);transform:scale(1.06)}
.codigo{
  background:var(--tinta);color:#D9E1FF;border-radius:var(--r-m);padding:14px;font-size:11.5px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;overflow-x:auto;line-height:1.65;white-space:pre;
}
.codigo .c-k{color:var(--miel-txt)}
.codigo .c-s{color:#8BE9B8}
.codigo .c-c{color:#8D93A8;font-style:italic}


/* ============================================================
   SELECTOR DE MUNICIPIO
   1.122 municipios no caben en un desplegable. El buscador es el
   camino principal; la navegación por departamento, el respaldo.
   ============================================================ */
.terr-buscar{position:relative;margin-bottom:18px}
.terr-buscar svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;stroke:var(--texto-3);fill:none;stroke-width:2}
.terr-buscar input{width:100%;padding:15px 16px 15px 44px;font-size:15.5px;
  border:1.5px solid var(--linea);border-radius:var(--r-l);background:var(--sup);
  color:var(--texto);font-family:inherit}
.terr-buscar input:focus{outline:none;border-color:var(--fucsia-txt);
  box-shadow:0 0 0 3px rgba(175,39,125,.12)}

.terr-resultados{max-height:min(52vh,420px);overflow-y:auto;margin-bottom:14px}
.terr-resultado{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;
  background:none;border:0;border-radius:var(--r-m);cursor:pointer;text-align:left;
  color:var(--texto);font-family:inherit;transition:background .14s}
.terr-resultado:hover,.terr-resultado:focus-visible{background:var(--sup-2)}
.terr-resultado svg{width:17px;height:17px;stroke:var(--fucsia-txt);fill:none;stroke-width:2;flex:none}
.terr-resultado strong{display:block;font-size:15px}
.terr-resultado em{font-size:12.5px;color:var(--texto-3);font-style:normal}
.terr-nada{padding:26px 14px;text-align:center;color:var(--texto-2);font-size:14px;line-height:1.6}

.terr-bloque{margin-bottom:22px}
.terr-bloque h4{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-3);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.terr-bloque h4 em{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;
  font-size:11.5px;background:var(--sup-2);padding:2px 8px;border-radius:99px}

.terr-deptos{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:7px}
.terr-depto{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:11px 13px;background:var(--sup);border:1.5px solid var(--linea);
  border-radius:var(--r-m);cursor:pointer;font-size:13.5px;color:var(--texto);
  font-family:inherit;text-align:left;transition:border-color .14s,background .14s}
.terr-depto:hover{border-color:var(--fucsia-txt)}
.terr-depto.on{border-color:var(--fucsia-txt);background:rgba(175,39,125,.06)}
.terr-depto em{font-style:normal;font-size:11.5px;color:var(--texto-3);flex:none}

.terr-fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:7px;
  max-height:min(42vh,340px);overflow-y:auto}
.terr-ficha{padding:11px 13px;background:var(--sup);border:1.5px solid var(--linea);
  border-radius:var(--r-m);cursor:pointer;text-align:left;color:var(--texto);font-family:inherit}
.terr-ficha:hover{border-color:var(--fucsia-txt)}
.terr-ficha.on{border-color:var(--fucsia-txt);background:rgba(175,39,125,.06)}
.terr-ficha strong{display:block;font-size:14px}
.terr-ficha span{font-size:11.5px;color:var(--texto-3)}

.terr-pie{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:15px 0 4px;margin-top:8px;background:var(--sup);border-top:1px solid var(--linea)}
.terr-elegido span{display:block;font-size:11.5px;color:var(--texto-3)}
.terr-elegido strong{font-size:15px;color:var(--texto)}

/* ============================================================
   FORMULARIOS DE CUENTA
   ============================================================ */
/* REHECHO (15 ago 2026). Qué estaba mal, y se veía:
     · Los campos tenían 16 px de redondeo (var(--r-m)): parecían
       pastillas hinchadas, no campos de formulario.
     · El borde era var(--linea) (#E3DDD2), casi invisible sobre el
       blanco: los campos flotaban sin forma definida.
     · 15 px de texto: por debajo de 16, Safari en iPhone hace zoom
       solo al tocar el campo y la página "salta".
     · El foco usaba un fucsia que ya no es el de la marca. */
.form-cuenta{display:flex;flex-direction:column;gap:16px}
.form-cuenta label{display:block;font-size:13px;font-weight:700;color:var(--texto-2);letter-spacing:.01em}
.form-cuenta input:not([type=checkbox]):not([type=radio]),
.form-cuenta select,.form-cuenta textarea{
  width:100%;margin-top:7px;padding:12px 14px;
  font-size:16px;font-family:inherit;line-height:1.35;
  border:1.5px solid var(--linea-fuerte);
  border-radius:var(--r-s);
  background:var(--sup);color:var(--texto);
  transition:border-color .16s ease, box-shadow .16s ease;
  -webkit-appearance:none;appearance:none;
}
.form-cuenta input::placeholder{color:var(--texto-3);opacity:1}
.form-cuenta input:hover:not(:focus),
.form-cuenta select:hover:not(:focus){border-color:var(--texto-3)}
.form-cuenta input:focus,.form-cuenta select:focus,.form-cuenta textarea:focus{
  outline:none;border-color:var(--cta);
  box-shadow:0 0 0 4px rgba(194,65,12,.15)}
.form-cuenta input.con-error{
  border-color:var(--alerta);
  box-shadow:0 0 0 4px rgba(192,57,43,.13)}

/* El motivo del error, debajo del campo. Nunca solo con color: lleva
   símbolo y texto, para quien no distingue el rojo. */
.form-cuenta .error-campo{
  display:flex;align-items:flex-start;gap:6px;margin-top:6px;
  font-size:12.5px;font-weight:700;line-height:1.45;color:var(--alerta-txt)}
.form-cuenta .error-campo::before{content:"⚠";font-size:12.5px;line-height:1.45}

/* Medidor de contraseña */
.medida{margin-top:8px}
.medida-barra{height:5px;border-radius:999px;background:var(--linea);overflow:hidden}
.medida-barra > i{display:block;height:100%;width:0;border-radius:999px;
  transition:width .22s ease,background-color .22s ease}
.medida-txt{display:block;margin-top:5px;font-size:12px;color:var(--texto-3)}
.medida[data-nivel="1"] .medida-barra > i{width:25%;background:var(--alerta)}
.medida[data-nivel="2"] .medida-barra > i{width:50%;background:var(--miel)}
.medida[data-nivel="3"] .medida-barra > i{width:75%;background:var(--mandarina)}
.medida[data-nivel="4"] .medida-barra > i{width:100%;background:var(--exito,#0E7350)}
.medida[data-nivel="1"] .medida-txt{color:var(--alerta-txt);font-weight:700}
.form-cuenta small{display:block;margin-top:6px;font-size:12px;color:var(--texto-3);
  font-weight:400;line-height:1.5}
.form-titulo{font-size:18px;margin:0 0 6px;color:var(--texto)}
.form-texto{font-size:14px;color:var(--texto-2);line-height:1.6;margin:0 0 4px}
.campo-codigo{font-size:26px !important;letter-spacing:11px;text-align:center;
  font-family:var(--mono,monospace) !important}

.casilla{display:flex !important;align-items:flex-start;gap:10px;font-weight:400 !important;
  font-size:13.5px;color:var(--texto-2);cursor:pointer}
.casilla input{width:auto !important;margin:2px 0 0 !important;flex:none;accent-color:var(--cta);width:18px !important;height:18px}

.seg-tipo{display:grid;gap:9px}
.seg-op{display:flex !important;align-items:flex-start;gap:11px;padding:14px;cursor:pointer;
  border:1.5px solid var(--linea);border-radius:var(--r-l);font-weight:400 !important}
.seg-op{transition:border-color .16s, background .16s, transform .16s}
.seg-op:hover{border-color:var(--texto-3)}
.seg-op:has(input:checked){border-color:var(--cta);background:var(--cta-suave)}
.seg-op:has(input:focus-visible){outline:3px solid var(--cta);outline-offset:2px}
.seg-op input{width:auto !important;margin:2px 0 0 !important;flex:none;accent-color:var(--cta)}
.seg-op strong{display:block;font-size:14.5px;color:var(--texto)}
.seg-op em{font-style:normal;font-size:12.5px;color:var(--texto-3)}

.form-pies{display:flex;justify-content:space-between;gap:12px;margin-top:2px}
.enlace{background:none;border:0;color:var(--fucsia-txt);font-size:13.5px;cursor:pointer;
  font-family:inherit;padding:4px 0;text-decoration:underline;text-underline-offset:3px}

.cuenta-abierta{display:flex;flex-direction:column;gap:16px}
.cuenta-cab{display:flex;align-items:center;gap:13px}
.cuenta-avatar{width:46px;height:46px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:19px;flex:none}
.cuenta-cab strong{display:block;font-size:15.5px}
.cuenta-cab span{display:block;font-size:12.5px;color:var(--texto-3)}
.etq-rol{display:inline-block;margin-top:4px;font-style:normal;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:99px;
  background:var(--sup-2);color:var(--texto-2)}
.cuenta-menu{display:flex;flex-direction:column;gap:2px}
.cuenta-menu button{padding:12px 14px;background:none;border:0;border-radius:var(--r-m);
  text-align:left;font-size:14.5px;color:var(--texto);cursor:pointer;font-family:inherit}
.cuenta-menu button:hover{background:var(--sup-2)}
.cuenta-salir{color:var(--alerta-txt) !important;margin-top:6px}

/* ============================================================
   PANELES E INDICADORES
   ============================================================ */
.panel-cargando,.panel-vacio{padding:40px 20px;text-align:center;color:var(--texto-2);font-size:14.5px}
.panel-vacio-rico{padding:36px 20px;text-align:center}
.panel-vacio-rico h3{font-size:19px;margin:0 0 8px}
.panel-vacio-rico p{font-size:14px;color:var(--texto-2);line-height:1.6;max-width:42ch;margin:0 auto 20px}

.panel-cab{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-bottom:18px}
.panel-cab h3{font-size:19px;margin:0;display:flex;align-items:center;gap:9px}
.panel-cab h3 em{font-style:normal;font-size:12px;font-weight:600;background:var(--sup-2);
  padding:2px 9px;border-radius:99px;color:var(--texto-2)}
.panel-var{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:99px}
.panel-var.sube{background:rgba(22,163,74,.12);color:var(--exito-txt)}
.panel-var.baja{background:rgba(175,39,125,.10);color:var(--fucsia-txt)}

/* El ahorro es el número grande: es la razón de volver a comprar. */
.ahorro-hero{background:var(--sup-2);border:1.5px solid var(--linea);border-radius:var(--r-xl);
  padding:26px 22px;text-align:center;margin-bottom:20px}
.ahorro-rotulo{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--texto-3);margin-bottom:7px}
.ahorro-hero strong{display:block;font-family:var(--display);font-size:clamp(32px,7.5vw,46px);
  font-weight:800;letter-spacing:-.03em;color:var(--exito-txt);line-height:1}
.ahorro-pie{display:block;font-size:13.5px;color:var(--texto-2);margin-top:9px}

.panel-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin-bottom:22px}
.panel-dato{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-l);padding:15px}
.panel-dato span{display:block;font-size:11.5px;color:var(--texto-3);font-weight:600;margin-bottom:5px}
.panel-dato strong{font-size:20px;font-family:var(--display);font-weight:800;letter-spacing:-.02em}
.panel-dato.destacado{background:var(--grad);border:0}
.panel-dato.destacado span,.panel-dato.destacado strong{color:#fff}
.panel-dato.alerta strong{color:var(--mandarina-txt)}

.panel-desglose{margin-bottom:24px}
.panel-desglose h4{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-3);margin:0 0 11px}
.panel-fila{display:flex;align-items:center;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--linea);font-size:14px}
.panel-fila span{flex:1;color:var(--texto)}
.panel-fila b{font-weight:700;color:var(--texto)}
.panel-fila em{font-style:normal;font-size:12px;color:var(--texto-3);min-width:58px;text-align:right}
.panel-fila.destacada{background:var(--sup-2);border:0;border-radius:var(--r-m);padding:14px;margin-bottom:8px}
.panel-fila.destacada b{color:var(--exito-txt);font-size:17px}

.panel-barra{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;
  padding:9px 0;font-size:13.5px;position:relative}
.panel-barra span{grid-column:1;z-index:1}
.panel-barra b{grid-column:2;font-weight:700;z-index:1}
.panel-barra i{grid-column:1/-1;grid-row:1;height:100%;background:var(--grad);opacity:.13;
  border-radius:6px;min-width:3px}

.panel-nota{font-size:12.5px;color:var(--texto-3);line-height:1.6;margin:10px 0 0}
.panel-aviso{background:rgba(244,128,31,.10);border:1px solid rgba(244,128,31,.28);
  border-radius:var(--r-m);padding:13px 15px;font-size:13.5px;color:var(--texto);margin-bottom:18px}
.panel-aviso.alto{background:rgba(175,39,125,.09);border-color:rgba(175,39,125,.26)}

/* Lista de productos del vendedor */
.prod-lista{display:flex;flex-direction:column;gap:9px}
.prod-fila{display:flex;align-items:center;gap:13px;padding:11px;background:var(--sup);
  border:1px solid var(--linea);border-radius:var(--r-l)}
.prod-mini{width:52px;height:52px;border-radius:var(--r-m);overflow:hidden;flex:none;
  background:var(--sup-2);display:grid;place-items:center}
.prod-mini img{width:100%;height:100%;object-fit:cover}
.prod-mini .marco-foto{font-size:10px;color:var(--texto-3);text-align:center;padding:4px}
.prod-datos{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.prod-datos strong{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-datos span{font-size:13.5px;font-weight:700;color:var(--texto)}
.prod-datos em{font-style:normal;font-size:11.5px;color:var(--texto-3)}
.etq-revision{color:var(--mandarina-txt) !important;font-weight:700}
.etq-activo{color:var(--exito-txt) !important;font-weight:700}
.etq-rechazado{color:var(--alerta-txt) !important;font-weight:700}

/* Auditoría */
.aud-lista{display:flex;flex-direction:column;font-size:12.5px}
.aud-fila{display:grid;grid-template-columns:120px 1fr 1fr 1fr;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--linea);align-items:center}
.aud-hora{color:var(--texto-3);font-variant-numeric:tabular-nums}
.aud-accion{font-weight:700;color:var(--fucsia-txt)}
.aud-quien em{font-style:normal;color:var(--texto-3);font-size:11px}
.aud-entidad{color:var(--texto-2)}
@media (max-width:700px){
  .aud-fila{grid-template-columns:1fr 1fr;gap:4px}
  .aud-hora{grid-column:1/-1}
}

/* ============================================================
   EDITOR DE PRODUCTO
   ============================================================ */
.form-producto{display:flex;flex-direction:column;gap:16px}
.form-producto label{display:block;font-size:13px;font-weight:600;color:var(--texto-2)}
.form-producto input:not([type=checkbox]),.form-producto select,.form-producto textarea{
  width:100%;margin-top:6px;padding:12px 14px;font-size:15px;font-family:inherit;
  border:1.5px solid var(--linea);border-radius:var(--r-m);background:var(--sup);color:var(--texto)}
.form-producto textarea{resize:vertical;min-height:96px;line-height:1.6}
.form-producto small{display:block;margin-top:6px;font-size:12px;color:var(--texto-3);
  font-weight:400;line-height:1.55}
.form-doble{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-triple{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media (max-width:560px){.form-doble,.form-triple{grid-template-columns:1fr}}

.form-fotos h4{font-size:14px;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.form-fotos h4 em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--texto-3)}
.zona-fotos{display:block;cursor:pointer;margin-top:12px}
.zona-fotos-cara{display:flex;flex-direction:column;align-items:center;gap:7px;padding:30px 20px;
  border:2px dashed var(--linea);border-radius:var(--r-l);text-align:center;
  transition:border-color .16s,background .16s}
.zona-fotos:hover .zona-fotos-cara{border-color:var(--fucsia-txt);background:rgba(175,39,125,.04)}
.zona-fotos-cara svg{width:26px;height:26px;stroke:var(--fucsia-txt);fill:none;stroke-width:1.8}
.zona-fotos-cara b{font-size:14.5px;color:var(--texto)}
.zona-fotos-cara em{font-style:normal;font-size:12px;color:var(--texto-3)}

.fotos-previa{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;margin-top:13px}
.foto-previa{position:relative;aspect-ratio:1;border-radius:var(--r-m);overflow:hidden;
  background:#fff;border:1px solid var(--linea)}
.foto-previa img{width:100%;height:100%;object-fit:contain}
.foto-quitar{position:absolute;top:5px;right:5px;width:23px;height:23px;border-radius:50%;
  background:rgba(20,34,79,.82);color:#fff;border:0;cursor:pointer;font-size:16px;line-height:1}
.foto-principal{position:absolute;bottom:0;left:0;right:0;background:var(--grad);color:#fff;
  font-size:10px;font-weight:700;text-align:center;padding:3px}

.form-acciones{display:flex;gap:11px;justify-content:flex-end;margin-top:6px}

/* ============================================================
   PANEL DE GOBIERNO DEL ADMINISTRADOR
   Categorías, banners, ruleta, revisiones y usuarios.
   Todo lo que aquí se pinta es conveniencia visual: el servidor
   vuelve a comprobar el rol en cada petición.
   ============================================================ */
.gob-pestanas{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px;margin-bottom:20px;
  border-bottom:1px solid var(--linea);scrollbar-width:none}
.gob-pestanas::-webkit-scrollbar{display:none}
.gob-pestana{padding:10px 15px;background:none;border:0;border-bottom:2.5px solid transparent;
  font-size:13.5px;font-weight:600;color:var(--texto-3);cursor:pointer;white-space:nowrap;
  font-family:inherit;margin-bottom:-1px;transition:color .14s,border-color .14s}
.gob-pestana:hover{color:var(--texto)}
.gob-pestana.on{color:var(--fucsia-txt);border-bottom-color:var(--fucsia-txt)}

.gob-titulo{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin-bottom:14px}
.gob-titulo h4{font-size:15px;margin:0}
.gob-titulo p{font-size:12.5px;color:var(--texto-3);margin:4px 0 0;line-height:1.55}

.gob-lista{display:flex;flex-direction:column;gap:7px}
.gob-fila{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--sup);
  border:1px solid var(--linea);border-radius:var(--r-l)}
.gob-fila.sospechosa{border-color:var(--mandarina-txt);background:rgba(244,128,31,.05)}
.gob-icono{width:36px;height:36px;border-radius:var(--r-m);background:var(--sup-2);
  display:grid;place-items:center;flex:none}
.gob-icono svg{width:18px;height:18px;stroke:var(--fucsia-txt);fill:none;stroke-width:2}
.gob-datos{flex:1;min-width:0}
.gob-datos strong{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.gob-datos span{display:block;font-size:12px;color:var(--texto-3);margin-top:2px}
.gob-etq{font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;padding:3px 8px;border-radius:99px;background:var(--sup-2);
  color:var(--texto-2);flex:none}
.gob-etq.sube{background:rgba(22,163,74,.12);color:var(--exito-txt)}
.gob-etq.baja{background:rgba(175,39,125,.10);color:var(--fucsia-txt)}
.gob-etq.alerta{background:rgba(244,128,31,.14);color:var(--mandarina-txt)}
.gob-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:99px;background:var(--sup-2);color:var(--texto-2)}

.gob-filtros{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.gob-filtros button{padding:7px 13px;background:var(--sup);border:1.5px solid var(--linea);
  border-radius:99px;font-size:12.5px;color:var(--texto-2);cursor:pointer;font-family:inherit}
.gob-filtros button.on{border-color:var(--fucsia-txt);color:var(--fucsia-txt);
  background:rgba(175,39,125,.06)}

/* Interruptor de encendido/apagado. Reemplaza la casilla del
   navegador, que en móvil es diminuta y difícil de acertar. */
.interruptor{position:relative;width:44px;height:25px;flex:none;cursor:pointer;display:block}
.interruptor input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.interruptor i{position:absolute;inset:0;background:var(--linea);border-radius:99px;
  transition:background .18s;pointer-events:none}
.interruptor i::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;
  background:#fff;border-radius:50%;transition:transform .18s;
  box-shadow:0 1px 3px rgba(20,34,79,.28)}
.interruptor input:checked + i{background:var(--fucsia)}
.interruptor input:checked + i::after{transform:translateX(19px)}
.interruptor input:focus-visible + i{box-shadow:0 0 0 3px rgba(175,39,125,.22)}

/* Rango de fechas y de precios */
.f-min,.f-max{flex:1;min-width:0}

/* Probabilidad de cada premio de la ruleta: se calcula a partir
   de los pesos y se muestra para que el admin no se lleve
   sorpresas al configurarla. */
.ruleta-prob{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--texto-2);
  margin-top:3px}
.ruleta-prob i{display:block;height:5px;border-radius:99px;background:var(--grad);min-width:3px}
.ruleta-aviso{background:rgba(110,42,156,.07);border:1px solid rgba(110,42,156,.20);
  border-radius:var(--r-l);padding:14px 16px;font-size:13px;color:var(--texto-2);
  line-height:1.6;margin-bottom:18px}
.ruleta-aviso b{color:var(--texto)}

.aviso-rojo{background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.24);
  border-radius:var(--r-m);padding:12px 14px;font-size:13px;color:var(--texto);
  line-height:1.55;margin:12px 0}

/* Ventana angosta para formularios cortos */
.ventana-caja.chico{max-width:440px}

/* Imagen real del banner (15 ago 2026). Antes solo había un rótulo
   punteado que decía "aquí va la imagen": se veía como una maqueta a
   medio hacer justo en lo primero que ve el visitante. */
.vitrina-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vitrina-img + .etq,.vitrina-img ~ h2,.vitrina-img ~ p,.vitrina-img ~ .btn{position:relative;z-index:2}

/* Invitación a comercios cuando el catálogo todavía está vacío
   (15 ago 2026). Reemplaza los tres "0" que se pintaban en la
   portada y que hacían parecer el sitio roto o abandonado. */
.territorio-invita{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:16px 18px;border-radius:var(--r-m);
  background:var(--grad-suave);
  border:1px solid var(--linea);
}
.territorio-invita b{font-size:15px;color:var(--texto);line-height:1.3}
.territorio-invita span{font-size:13.5px;color:var(--texto-2);line-height:1.45}
/* Una tienda recién aprobada no tiene reseñas ni productos todavía.
   Mostrar "0 reseñas · 0 productos" la hace parecer fracasada antes
   de empezar; "Tienda nueva" dice lo mismo sin castigarla. */
.est-nueva{font-weight:700;color:var(--exito-txt)}

/* Bloque de «Entrar con Google» (15 ago 2026) */
.acceso-google{display:flex;flex-direction:column;gap:16px;margin-bottom:18px}
.google-caja{display:flex;justify-content:center;min-height:44px}
.separador{
  display:flex;align-items:center;gap:12px;
  color:var(--texto-3);font-size:12.5px;font-weight:600;
}
.separador::before,.separador::after{
  content:"";flex:1;height:1px;background:var(--linea);
}

/* Campo de contraseña con ojito (15 ago 2026) */
.clave-caja{position:relative;display:block}
.clave-caja input{padding-right:48px !important}
.ver-clave{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:9px;
  display:grid;place-items:center;color:var(--texto-3);
  transition:color .15s, background .15s;
}
.ver-clave:hover{color:var(--texto);background:var(--sup-2)}
.ver-clave:focus-visible{outline:3px solid var(--cta);outline-offset:1px}
.ver-clave svg{width:19px;height:19px;stroke:currentColor;fill:none}
/* El botón se dibuja DENTRO del campo; el margen superior del input
   viene de la etiqueta, así que la caja lo compensa. */
.clave-caja{margin-top:7px}
.clave-caja input{margin-top:0 !important}

/* El campo de fecha del navegador trae su propio icono de calendario;
   se le da el mismo alto y tipografía que a los demás campos para que
   no desentone. */
.form-cuenta input[type="date"]{min-height:48px;font-family:inherit}
.form-cuenta input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.65;padding:4px;
}
.form-cuenta input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}