/* ============================================================
   PacasMarket — sistema de diseño
   Papel de etiqueta + tinta ciruela + fucsia de mercado
   ============================================================ */
:root{
  --tinta:#2B1620;
  --tinta-70:#6B4C57;
  --gris:#8E7580;
  --papel:#FCF2EE;
  --blanco:#FFFFFF;
  --fucsia:#E0356B;
  --fucsia-10:#FFE6ED;
  --mango:#FFB627;
  --mango-10:#FFF1D6;
  --agua:#0E9E88;
  --agua-10:#DCF3EE;
  --linea:#F0DCE1;
  --noche:#1A0F16;
  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:30px;
  --sombra:0 2px 0 rgba(43,22,32,.05), 0 10px 24px -14px rgba(43,22,32,.35);
  --f-display:'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --f-texto:'DM Sans', system-ui, sans-serif;
  --f-codigo:'DM Mono', ui-monospace, monospace;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-texto); color:var(--tinta); background:#EDE2E4;
  background-image:radial-gradient(circle at 20% 0%, #F7E4E9 0%, transparent 55%),
                   radial-gradient(circle at 90% 100%, #E7E7DE 0%, transparent 50%);
  min-height:100dvh; display:flex; justify-content:center; align-items:flex-start;
}
button{font:inherit; color:inherit; border:none; background:none; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--fucsia); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- carcasa mobile ---------- */
.app{
  width:100%; max-width:430px; min-height:100dvh; background:var(--papel);
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 40px 80px -30px rgba(43,22,32,.45);
}
@media(min-width:600px){
  body{padding:26px 0}
  .app{min-height:calc(100dvh - 52px); border-radius:38px; border:1px solid #E3D2D7}
}
.vista{display:none; flex:1; padding-bottom:104px; animation:sube .28s ease both}
.vista.activa{display:block}
@keyframes sube{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ---------- barra superior ---------- */
.top{
  position:sticky; top:0; z-index:30; background:rgba(252,242,238,.94);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--linea);
}
.top-fila{display:flex; align-items:center; gap:10px; padding:14px 16px 10px}
.marca{display:flex; align-items:center; gap:9px}
.marca-sello{
  width:34px; height:34px; border-radius:11px; background:var(--fucsia); color:#fff;
  display:grid; place-items:center; font-family:var(--f-display); font-weight:800; font-size:17px;
  box-shadow:0 4px 12px -4px rgba(224,53,107,.7); transform:rotate(-4deg);
}
.marca h1{font-family:var(--f-display); font-size:19px; font-weight:800; margin:0; letter-spacing:-.4px; line-height:1}
.marca span{display:block; font-family:var(--f-codigo); font-size:9.5px; color:var(--gris); letter-spacing:.14em; margin-top:3px}
.lema{
  margin:0 16px 12px; padding:9px 13px; background:var(--tinta); color:#FFEFF3;
  border-radius:var(--r-m); font-size:12.5px; line-height:1.35;
}
.lema b{color:var(--mango); font-weight:500}

/* buscador */
.busqueda-fila{display:flex; align-items:center; gap:8px; margin:0 16px 12px}
.buscador{display:flex; align-items:center; gap:9px; margin:0 16px 12px; background:var(--blanco);
  border:1.5px solid var(--linea); border-radius:999px; padding:11px 15px}
.busqueda-fila .buscador{flex:1; margin:0}
.buscador input{border:none; outline:none; background:none; width:100%; font-size:15px}
.buscador input::placeholder{color:#B79FA8}
.filtros-toggle{width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; background:var(--blanco);
  border:1.5px solid var(--linea); border-radius:50%; color:var(--tinta-70)}
.filtros-toggle.on{background:var(--tinta); border-color:var(--tinta); color:#fff}
.filtros-home{display:none}
.filtros-home.abierto{display:block}

/* filtros */
.chips{display:flex; gap:8px; overflow-x:auto; padding:0 16px 12px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; padding:8px 14px; border-radius:999px; background:var(--blanco);
  border:1.5px solid var(--linea); font-size:13.5px; font-weight:500; white-space:nowrap;
  transition:.15s;
}
.chip.on{background:var(--tinta); border-color:var(--tinta); color:#fff}
.chip-talla{min-width:44px; text-align:center; font-family:var(--f-codigo); font-size:12.5px}
.selects{display:flex; gap:8px; padding:0 16px 14px}
.selects select{
  flex:1; appearance:none; background:var(--blanco); border:1.5px solid var(--linea);
  border-radius:var(--r-s); padding:10px 26px 10px 12px; font-size:13px; font-weight:500;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%238E7580' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center;
}

/* ---------- secciones ---------- */
.seccion{padding:20px 16px 4px}
.seccion-cab{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:13px}
.seccion h2{font-family:var(--f-display); font-size:18px; font-weight:800; margin:0; letter-spacing:-.3px}
.seccion-cab small{font-family:var(--f-codigo); font-size:10.5px; color:var(--gris); letter-spacing:.08em}
.eyebrow{font-family:var(--f-codigo); font-size:10px; letter-spacing:.18em; color:var(--fucsia); text-transform:uppercase; margin:0 0 5px}

/* ---------- tiendas ---------- */
.tiendas{display:flex; gap:11px; overflow-x:auto; padding:2px 16px 6px; margin:0 -16px; scrollbar-width:none}
.tiendas::-webkit-scrollbar{display:none}
.tienda-card{
  flex:0 0 158px; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-l);
  padding:13px; text-align:left; box-shadow:var(--sombra);
}
.avatar{
  width:46px; height:46px; border-radius:15px; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:800; font-size:17px; color:#fff; margin-bottom:9px;
}
.tienda-card h3{font-size:14px; margin:0 0 2px; font-weight:700; line-height:1.2}
.tienda-card p{margin:0; font-size:11.5px; color:var(--gris)}
.tienda-card .ig{font-family:var(--f-codigo); font-size:11px; color:var(--fucsia); margin-top:6px}

/* ---------- grid piezas ---------- */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 16px}
.pieza{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-m);
  overflow:hidden; text-align:left; box-shadow:var(--sombra); transition:.15s;
}
.pieza:active{transform:scale(.985)}
.foto{position:relative; aspect-ratio:4/5; display:grid; place-items:center; overflow:hidden}
.foto-real{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.foto svg.prenda{width:62%; height:62%; opacity:.72}
.thumb{position:relative; overflow:hidden}
.thumb .foto-real,.feed-foto .foto-real{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.pieza-info{padding:9px 10px 11px}
.precio{font-family:var(--f-display); font-size:16px; font-weight:800; letter-spacing:-.3px}
.pieza-info h4{margin:2px 0 5px; font-size:12.5px; font-weight:500; color:var(--tinta-70); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.meta{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.talla{font-family:var(--f-codigo); font-size:10.5px; background:var(--papel); border:1px solid var(--linea);
  padding:2px 6px; border-radius:5px}
.deTienda{font-size:11px; color:var(--gris); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}

/* etiqueta de código (elemento firma) */
.codigo{
  position:absolute; top:9px; left:9px; display:inline-flex; align-items:center; gap:5px;
  background:var(--blanco); border-radius:5px; padding:3px 7px 3px 5px;
  font-family:var(--f-codigo); font-size:10px; letter-spacing:.06em;
  transform:rotate(-3deg); box-shadow:0 3px 8px -3px rgba(43,22,32,.5);
}
.codigo::before{content:""; width:5px; height:5px; border-radius:50%; border:1.5px solid var(--tinta-70)}

/* sello de estado */
.sello{
  position:absolute; bottom:9px; right:9px; font-family:var(--f-codigo); font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:999px;
  border:1.5px solid; background:var(--blanco); font-weight:500;
}
.e-disponible{color:var(--agua); border-color:var(--agua)}
.e-reservada{color:#C4700B; border-color:#E9A23B; background:var(--mango-10)}
.e-vendida{color:#8E7580; border-color:#C9B3BA; background:#F3EAEC}
.foto.agotada svg.prenda{opacity:.3}
.foto.agotada::after{content:""; position:absolute; inset:0; background:rgba(252,242,238,.55)}

/* ---------- botones ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:15px 18px; border-radius:var(--r-m); font-size:15px; font-weight:700;
  background:var(--fucsia); color:#fff; box-shadow:0 8px 18px -10px rgba(224,53,107,.9); transition:.15s;
}
.btn:active{transform:translateY(1px)}
.btn.oscuro{background:var(--tinta); box-shadow:none}
.btn.linea{background:transparent; color:var(--tinta); border:1.5px solid var(--tinta)}
.btn.suave{background:var(--blanco); color:var(--tinta); border:1.5px solid var(--linea); box-shadow:var(--sombra)}
.btn:disabled{opacity:.45}
.btn-mini{padding:9px 13px; border-radius:var(--r-s); font-size:13px; font-weight:600; background:var(--blanco);
  border:1.5px solid var(--linea)}
.btn-mini.on{background:var(--tinta); color:#fff; border-color:var(--tinta)}

/* ---------- cabecera de subpantalla ---------- */
.sub-top{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  padding:14px 16px; background:rgba(252,242,238,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--linea)}
.volver{width:38px; height:38px; border-radius:12px; background:var(--blanco); border:1px solid var(--linea);
  display:grid; place-items:center}
.sub-top h2{font-family:var(--f-display); font-size:16.5px; font-weight:800; margin:0; letter-spacing:-.2px}

/* ---------- perfil tienda ---------- */
.portada{height:104px; position:relative}
.tienda-cab{padding:0 16px; margin-top:-32px; position:relative}
.avatar-g{width:74px; height:74px; border-radius:22px; border:3px solid var(--papel); display:grid; place-items:center;
  font-family:var(--f-display); font-weight:800; font-size:27px; color:#fff}
.avatar-g img,.avatar img{width:100%; height:100%; object-fit:cover; border-radius:inherit}
.tienda-cab h2{font-family:var(--f-display); font-size:22px; margin:11px 0 3px; letter-spacing:-.5px}
.tienda-datos{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--gris)}
.tienda-datos .ig{font-family:var(--f-codigo); color:var(--fucsia); font-size:12.5px}
.stats-linea{display:flex; gap:18px; margin:14px 0; padding:12px 0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea)}
.stat-mini b{font-family:var(--f-display); font-size:17px; display:block; letter-spacing:-.3px}
.stat-mini span{font-size:11px; color:var(--gris)}
.perfil-aviso{display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.4; color:var(--tinta-70)}
.perfil-aviso strong{color:var(--tinta)}
.perfil-form{display:grid; gap:12px}
.perfil-logo{display:flex; align-items:center; gap:12px}
.perfil-logo .avatar-g{width:58px; height:58px; flex:0 0 58px; font-size:21px}

/* ---------- enlace de tienda ---------- */
.barra-url{display:flex; align-items:center; gap:8px; margin:12px 16px; background:var(--blanco);
  border:1.5px solid var(--linea); border-radius:999px; padding:9px 8px 9px 14px}
.url-txt{flex:1; font-family:var(--f-codigo); font-size:12.5px; color:var(--tinta-70); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}