.pwa-text b{font-size:13px;display:block;margin-bottom:2px;}
.pwa-text span{font-size:11px;opacity:.7;}



*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
@font-face{font-family:'DejaVu';src:url('../assets/fonts/DejaVuSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'DejaVu';src:url('../assets/fonts/DejaVuSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
:root{
  --o:#FF4D00;--o2:#E04300;--o-light:#FFF2EC;--o-border:#FFAA80;--y:#FFD600;
  --n:#0E0E0E;--n2:#1A1A1A;
  --w:#FFFFFF;
  --cream:#F5F0E8;
  --g1:#F4F1EC;--g2:#E8E2D9;--g3:#C4BBB0;--g4:#8A8178;--g5:#4A4540;
  --green:#1A7A4A;--green-light:#EAF5EE;
  --blue:#2563EB;--blue-light:#EFF6FF;
  --red:#DC2626;--red-light:#FEF2F2;
  --r:16px;--r-sm:10px;--r-xs:8px;
}
html,body{height:100%;overflow:hidden;}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--n);font-size:15px;}
#app{height:100vh;display:flex;flex-direction:column;max-width:430px;margin:0 auto;background:var(--w);overflow:hidden;position:relative;}
/* ═══ RESPONSIVE — 4 BREAKPOINTS ═══ */
*,*::before,*::after{box-sizing:border-box;}

html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:var(--n2);}

/* ── BASE: Mobile (< 600px) ── */
#app{width:100%;height:100%;max-width:100%;overflow:hidden;position:relative;background:var(--w);}
#sidebar{display:none;}
.screen{display:none;flex-direction:column;height:100%;overflow:hidden;}

/* ── Tablet (600–1024px): más ancho, misma nav ── */
@media(min-width:600px) and (max-width:1024px){
  body{display:flex;align-items:center;justify-content:center;background:var(--n2);}
  #app{max-width:540px;height:calc(100vh - 20px);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.4);margin:10px auto;overflow:hidden;}
  .pgrid{grid-template-columns:repeat(2,1fr)!important;}
}

/* ── Laptop (1025–1440px): sidebar + contenido ── */
@media(min-width:1025px){
  body{display:flex;align-items:stretch;background:var(--n2);overflow:hidden;}
  #sidebar{
    display:flex;flex-direction:column;
    width:220px;flex-shrink:0;
    background:var(--n2);
    height:100vh;
    padding:20px 12px;
    gap:4px;
    border-right:1px solid rgba(255,255,255,.06);
    overflow-y:auto;
    scrollbar-width:none;
  }
  #app{
    flex:1;min-width:0;
    height:100vh;
    border-radius:0;
    box-shadow:none;
    background:var(--w);
    max-width:720px;
  }
  /* Ocultar bottom nav en desktop — la nav está en el sidebar */
  .bnav{display:none!important;}
  /* Topbar desktop más limpio */
  .topbar{padding-top:12px!important;}
  /* Grid más columnas */
  .pgrid{grid-template-columns:repeat(3,1fr)!important;}
}

/* ── Desktop (1441px+): sidebar más ancho + grid 4 col ── */
@media(min-width:1441px){
  #sidebar{width:260px;padding:24px 16px;}
  #app{max-width:960px;}
  .pgrid{grid-template-columns:repeat(4,1fr)!important;}
}

/* SAFE AREA */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  #app{padding-bottom:env(safe-area-inset-bottom,0px);}
}

/* ── SIDEBAR STYLES ── */
.sb-logo{display:flex;align-items:center;gap:8px;padding:8px 10px 16px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.08);}
.sb-logo-m{width:36px;height:36px;border-radius:10px;background:var(--o);object-fit:contain;padding:6px;flex-shrink:0;}
.sb-logo-name{font-family:'DejaVu',sans-serif;font-size:18px;font-weight:700;color:white;}
.sb-logo-name span{color:var(--o);}
.sb-loc{font-size:11px;color:rgba(255,255,255,.4);padding:8px 10px;display:flex;align-items:center;gap:4px;margin-bottom:4px;}
.sb-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;cursor:pointer;color:rgba(255,255,255,.65);font-size:13px;font-weight:500;transition:all .15s;-webkit-tap-highlight-color:transparent;border:none;background:transparent;width:100%;font-family:'DM Sans',sans-serif;text-align:left;}
.sb-item:hover{background:rgba(255,255,255,.06);color:white;}
.sb-item.active{background:rgba(255,77,0,.15);color:var(--o);}
.sb-item svg{flex-shrink:0;opacity:.7;}
.sb-item.active svg{opacity:1;}
.sb-item-badge{margin-left:auto;min-width:18px;height:18px;border-radius:9px;background:var(--o);color:white;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.sb-section{font-size:10px;font-weight:700;color:rgba(255,255,255,.25);letter-spacing:.5px;text-transform:uppercase;padding:12px 12px 4px;}
.sb-divider{height:1px;background:rgba(255,255,255,.06);margin:8px 0;}
.sb-pub-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:12px;border-radius:14px;background:var(--o);color:white;border:none;font-size:14px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;margin:8px 0;transition:background .15s;}
.sb-pub-btn:hover{background:var(--o2);}
.sb-spacer{flex:1;}
#desktopLabel{display:none;}



/* ═══ NOTIFICATION SYSTEM ═══ */
.notif-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--o);color:white;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;}
#notifPanel{position:absolute;top:calc(100% + 10px);right:0;width:320px;max-width:calc(100vw - 24px);background:var(--w);border-radius:18px;box-shadow:0 8px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.1);border:1px solid var(--g1);z-index:998;display:none;flex-direction:column;max-height:480px;overflow:hidden;animation:notifSlideIn .2s cubic-bezier(.34,1.3,.64,1);}
@keyframes notifSlideIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
#notifPanel.show{display:flex;}
.notif-panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--g1);flex-shrink:0;}
.notif-panel-title{font-family:'DejaVu',sans-serif;font-size:15px;font-weight:700;}
.notif-mark-all{font-size:12px;color:var(--o);cursor:pointer;font-weight:600;}
.notif-list{overflow-y:auto;flex:1;}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid var(--g1);cursor:pointer;transition:background .15s;-webkit-tap-highlight-color:transparent;}
.notif-item:hover{background:var(--g1);}
.notif-item.unread{background:var(--o-light);}
.notif-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.notif-icon.msg{background:#EEF2FF;}
.notif-icon.product{background:#F0FDF4;}
.notif-icon.update{background:#FFF7ED;}
.notif-icon.review{background:#FFF0EB;}
.notif-icon.promo{background:#F0F9FF;}
.notif-icon.system{background:#F1F5F9;}
.notif-body{flex:1;min-width:0;}
.notif-text{font-size:13px;line-height:1.5;color:var(--n);}
.notif-text b{font-weight:600;}
.notif-time{font-size:11px;color:var(--g4);margin-top:3px;}
.notif-empty{text-align:center;padding:40px 20px;color:var(--g4);font-size:14px;}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--o);flex-shrink:0;margin-top:5px;}
#notifOverlay{position:fixed;inset:0;z-index:997;display:none;}
#notifOverlay.show{display:block;}
#app.dark #notifPanel{background:#1E1E1E;border-color:var(--g2);}
#app.dark .notif-item.unread{background:#2a1500;}

/* EMPTY STATES MEJORADOS */
.empty-state{text-align:center;padding:48px 28px;display:flex;flex-direction:column;align-items:center;}
.empty-state-illo{width:96px;height:96px;border-radius:50%;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:44px;margin-bottom:18px;border:3px solid var(--g2);}
.empty-state-title{font-family:'DejaVu',sans-serif;font-size:18px;font-weight:700;margin-bottom:8px;}
.empty-state-sub{font-size:14px;color:var(--g4);line-height:1.6;max-width:240px;}
.empty-state-btn{margin-top:18px;background:var(--o);color:white;border:none;padding:12px 24px;border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;}

/* PUBLISH CONFIRM */
.confirm-pub-wrap{display:flex;flex-direction:column;align-items:center;padding:40px 28px;text-align:center;}
.confirm-anim{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--o),#ff8c00);display:flex;align-items:center;justify-content:center;margin-bottom:24px;animation:popIn .55s cubic-bezier(.34,1.56,.64,1) both;box-shadow:0 8px 32px rgba(255,77,0,.35);}
@keyframes popIn{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
.confirm-check{font-size:40px;line-height:1;}
.confirm-pub-title{font-family:'DejaVu',sans-serif;font-size:26px;font-weight:700;margin-bottom:8px;}
.confirm-pub-sub{font-size:15px;color:var(--g4);line-height:1.6;max-width:260px;margin:0 auto 24px;}

/* ADMIN PANEL */
.admin-tab-bar{display:flex;gap:2px;padding:10px 14px;background:var(--g1);border-bottom:1px solid var(--g2);overflow-x:auto;scrollbar-width:none;flex-shrink:0;}
.admin-tab{flex-shrink:0;padding:7px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;color:var(--g4);background:transparent;border:none;font-family:'DM Sans',sans-serif;transition:all .15s;}
.admin-tab.on{background:var(--o);color:white;}
.admin-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:14px;}
.admin-stat{background:var(--w);border:1px solid var(--g2);border-radius:14px;padding:16px;text-align:center;}
.admin-stat-n{font-family:'DejaVu',sans-serif;font-size:28px;font-weight:700;color:var(--o);}
.admin-stat-l{font-size:11px;color:var(--g4);font-weight:500;text-transform:uppercase;letter-spacing:.3px;margin-top:2px;}
.admin-user-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--g1);}
.admin-user-av{width:40px;height:40px;border-radius:50%;background:var(--o);color:white;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;}
.admin-user-info{flex:1;min-width:0;}
.admin-user-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.admin-user-meta{font-size:11px;color:var(--g4);}
.admin-action-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.admin-chip{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;border:1.5px solid;cursor:pointer;font-family:'DM Sans',sans-serif;-webkit-tap-highlight-color:transparent;}
.admin-chip-green{color:var(--green);border-color:var(--green);background:var(--green-light);}
.admin-chip-red{color:var(--red);border-color:var(--red);background:var(--red-light);}
.admin-chip-blue{color:var(--blue);border-color:var(--blue);background:var(--blue-light);}
.admin-chip-orange{color:var(--o);border-color:var(--o);background:var(--o-light);}
.admin-section-head{padding:12px 16px 6px;font-size:11px;font-weight:700;color:var(--g4);letter-spacing:.4px;text-transform:uppercase;background:var(--g1);}
.admin-report-card{padding:14px 16px;border-bottom:1px solid var(--g1);}
.admin-prod-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--g1);}
.admin-prod-img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--g1);flex-shrink:0;}
.admin-empty{text-align:center;padding:40px 24px;color:var(--g4);font-size:14px;}

/* ═══ PEDIDOS & SEGURIDAD ═══ */
.pedido-card{background:var(--w);border:1.5px solid var(--g2);border-radius:16px;margin:10px 16px;overflow:hidden;}
.pedido-header{padding:14px 16px;border-bottom:1px solid var(--g1);display:flex;align-items:center;gap:10px;}
.pedido-code{font-family:monospace;font-size:22px;font-weight:800;letter-spacing:6px;color:#1B3FD8;background:#EEF2FF;padding:12px 20px;border-radius:12px;text-align:center;margin:12px 16px;}
.pedido-status{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.ps-creado{background:#FEF9C3;color:#854D0E;}
.ps-listo{background:#FEF3C7;color:#92400E;}
.ps-aceptado{background:#DBEAFE;color:#1D4ED8;}
.ps-recogido{background:#FEF3C7;color:#92400E;}
.ps-camino{background:#EDE9FE;color:#5B21B6;}
.ps-entregado{background:#DCFCE7;color:#15803D;}
.ps-completado{background:#F0FDF4;color:#15803D;}
.ps-problema{background:#FEE2E2;color:#DC2626;}
.ps-cancelado{background:#F3F4F6;color:#6B7280;}
.pedido-timeline{padding:14px 16px;}
.tl-step{display:flex;gap:12px;margin-bottom:16px;position:relative;}
.tl-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;position:relative;z-index:1;}
.tl-dot.done{background:#1B3FD8;color:white;}
.tl-dot.active{background:var(--o);color:white;box-shadow:0 0 0 4px rgba(255,77,0,.2);}
.tl-dot.pending{background:var(--g2);color:var(--g4);}
.tl-line{position:absolute;left:13px;top:28px;width:2px;height:calc(100% + 4px);background:var(--g2);z-index:0;}
.tl-line.done{background:#1B3FD8;}
.tl-content{flex:1;padding-top:4px;}
.tl-label{font-size:13px;font-weight:600;}
.tl-time{font-size:11px;color:var(--g4);margin-top:2px;}
.evidence-thumb{width:60px;height:60px;border-radius:8px;object-fit:cover;border:2px solid var(--g2);cursor:pointer;}
.rep-btn{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#FEF2F2;border:1.5px solid #FECACA;border-radius:12px;cursor:pointer;font-size:13px;font-weight:600;color:#DC2626;width:100%;margin-top:8px;font-family:'DM Sans',sans-serif;}
.pedido-action-btn{width:100%;padding:13px;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;}
.pab-blue{background:linear-gradient(135deg,#1B3FD8,#2D55F0);color:white;}
.pab-green{background:#22C55E;color:white;}
.pab-orange{background:var(--o);color:white;}
.pab-outline{background:var(--w);color:var(--n);border:1.5px solid var(--g2)!important;}
.codigo-input{font-family:monospace;font-size:28px;font-weight:800;letter-spacing:10px;text-align:center;width:100%;padding:16px;border:2px solid var(--g2);border-radius:14px;color:#1B3FD8;background:#EEF2FF;outline:none;}
.codigo-input:focus{border-color:#1B3FD8;}
.rating-stars-lg{display:flex;gap:8px;justify-content:center;margin:12px 0;}
.rating-star-lg{font-size:36px;cursor:pointer;filter:grayscale(1);transition:filter .1s,transform .1s;}
.rating-star-lg.on{filter:none;transform:scale(1.1);}
/* Mis pedidos badge */
.pedidos-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:#DC2626;color:white;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;}

.btn-apartar{
  display:flex;align-items:center;gap:12px;width:100%;
  background:linear-gradient(135deg,#1B3FD8,#2D55F0);
  color:white;border:none;border-radius:14px;
  padding:14px 16px;margin-top:10px;cursor:pointer;
  transition:transform .1s,box-shadow .1s;
  box-shadow:0 4px 16px rgba(27,63,216,.35);
  -webkit-tap-highlight-color:transparent;
  font-family:'DM Sans',sans-serif;
}
.btn-apartar:active{transform:scale(.98);}

/* ═══ MANDADITO PROFILE ═══ */
.mand-hero{background:linear-gradient(160deg,#1B3FD8 0%,#0d2199 100%);padding:28px 20px 40px;position:relative;overflow:hidden;}
.mand-hero::before{content:'🛵';position:absolute;right:-10px;bottom:-20px;font-size:120px;opacity:.08;transform:scaleX(-1);}
.mand-av-wrap{display:flex;align-items:flex-end;gap:16px;margin-bottom:12px;}
.mand-av{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.4);flex-shrink:0;background:#2D55F0;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:white;}
.mand-name{font-family:'DejaVu',sans-serif;font-size:24px;font-weight:700;color:white;line-height:1.2;}
.mand-badge-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.mand-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.mand-badge-verif{background:rgba(255,255,255,.2);color:white;}
.mand-badge-activo{background:#22C55E;color:white;}
.mand-badge-inactivo{background:rgba(255,255,255,.15);color:rgba(255,255,255,.6);}
.mand-stats-row{display:flex;gap:0;background:white;border-radius:16px;margin:0 16px;margin-top:-20px;box-shadow:0 4px 20px rgba(0,0,0,.12);overflow:hidden;}
.mand-stat{flex:1;padding:14px 8px;text-align:center;border-right:1px solid var(--g1);}
.mand-stat:last-child{border-right:none;}
.mand-stat-n{font-family:'DejaVu',sans-serif;font-size:20px;font-weight:700;color:var(--n);}
.mand-stat-l{font-size:10px;color:var(--g4);font-weight:500;text-transform:uppercase;letter-spacing:.3px;margin-top:1px;}
.mand-section{padding:18px 16px 0;}
.mand-section-title{font-size:12px;font-weight:700;color:var(--g4);letter-spacing:.4px;text-transform:uppercase;margin-bottom:10px;}
.mand-info-card{background:var(--g1);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.mand-info-row{display:flex;align-items:center;gap:10px;font-size:14px;}
.mand-info-icon{width:32px;height:32px;border-radius:8px;background:white;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.mand-info-val{color:var(--n);font-weight:500;}
.mand-info-lbl{color:var(--g4);font-size:12px;}
.mand-bio{background:var(--g1);border-radius:14px;padding:14px 16px;font-size:14px;color:var(--n);line-height:1.7;}
.mand-rating-bar{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.mand-star-fill{height:6px;background:var(--o);border-radius:3px;}
.mand-star-empty{height:6px;background:var(--g2);border-radius:3px;flex:1;}
.mand-review-card{padding:14px 16px;border-bottom:1px solid var(--g1);}
.btn-pedir-mand{
  position:sticky;bottom:0;width:100%;
  background:linear-gradient(135deg,#1B3FD8,#2D55F0);
  color:white;border:none;padding:16px;
  font-size:16px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:'DM Sans',sans-serif;
  box-shadow:0 -4px 20px rgba(27,63,216,.3);
}

.perfiles-tabs{display:flex;gap:6px;padding:12px 14px 0;overflow-x:auto;scrollbar-width:none;flex-shrink:0;}
.perfil-tab{flex-shrink:0;padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;color:var(--g4);background:var(--g1);border:1.5px solid var(--g2);transition:all .15s;-webkit-tap-highlight-color:transparent;}
.perfil-tab.on{background:var(--o);color:white;border-color:var(--o);}
.perfil-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--g1);cursor:pointer;transition:background .15s;}
.perfil-card:hover{background:var(--g1);}
.perfil-av{width:52px;height:52px;border-radius:50%;background:var(--o);color:white;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0;object-fit:cover;}
.perfil-info{flex:1;min-width:0;}
.perfil-name{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px;}
.perfil-sub{font-size:12px;color:var(--g4);margin-top:2px;}
.perfil-stats{display:flex;gap:12px;margin-top:4px;}
.perfil-stat{font-size:11px;color:var(--g4);}
.perfil-stat b{color:var(--n);font-weight:600;}

/* ═══ ÍNDICE / CATEGORÍAS ═══ */
.indice-section{padding:16px 16px 8px;}
.indice-section-title{font-family:'DejaVu',sans-serif;font-size:16px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.indice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.indice-card{background:var(--w);border:1.5px solid var(--g2);border-radius:14px;padding:14px 12px;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;}
.indice-card:hover{border-color:var(--o);background:var(--o-light);}
.indice-card-icon{font-size:28px;margin-bottom:6px;}
.indice-card-name{font-size:13px;font-weight:600;color:var(--n);}
.indice-card-count{font-size:11px;color:var(--g4);margin-top:2px;}

/* ═══ MIS TRABAJOS ═══ */
.trabajos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:0;}
.trabajo-thumb{aspect-ratio:1;object-fit:cover;width:100%;background:var(--g1);cursor:pointer;}
.trabajo-thumb-empty{aspect-ratio:1;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:28px;cursor:pointer;border:2px dashed var(--g2);border-radius:4px;}
.trabajo-upload-btn{display:flex;align-items:center;gap:8px;padding:14px 16px;background:var(--o-light);color:var(--o);border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;width:calc(100% - 32px);margin:12px 16px;font-family:'DM Sans',sans-serif;}
.trabajos-section-head{padding:14px 16px 8px;font-size:13px;font-weight:700;color:var(--g4);display:flex;align-items:center;justify-content:space-between;}

/* PHOTO WARNING */
.photo-warn{background:#FFF8E6;border:1.5px solid #F59E0B;border-radius:10px;padding:10px 14px;font-size:13px;color:#92400E;display:flex;align-items:center;gap:8px;margin-bottom:12px;}


.screen.active{display:flex;}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:28px;}
.scroll::-webkit-scrollbar{display:none;}

/* BRAND */
.wordmark{font-family:'DejaVu',sans-serif;font-weight:700;color:var(--o);letter-spacing:-0.5px;cursor:pointer;}
.wordmark span{color:var(--n);}
.price-text{font-family:'DejaVu',sans-serif;font-weight:700;}

/* TOPBAR */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(20,20,20,.06);flex-shrink:0;z-index:5;}
.topbar-right{display:flex;align-items:center;gap:10px;}

/* BOTTOM NAV — legacy, oculto siempre (display:none!important más abajo);
   la navegación real de la app es el pill flotante .topnav (ver esa
   sección). No se invierte esfuerzo visual aquí a propósito. */
.bnav{display:flex;align-items:center;justify-content:space-around;padding:8px 0 calc(20px + env(safe-area-inset-bottom, 0px));background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -4px 20px rgba(20,20,20,.08);border-radius:22px 22px 0 0;flex-shrink:0;}
.bnav-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:4px 16px;color:var(--g3);transition:color .15s;}
.bnav-item.on{color:var(--o);}
.bnav-item span{font-size:10px;font-weight:500;}
.bnav-fab{width:52px;height:52px;border-radius:50%;background:var(--o);display:flex;align-items:center;justify-content:center;cursor:pointer;margin-top:-18px;box-shadow:0 4px 16px rgba(249,115,22,.4);transition:transform .15s;}
.bnav-fab:active{transform:scale(.92);}

/* INPUTS */
input,textarea,select{width:100%;padding:13px 16px;border:1.5px solid var(--g2);border-radius:var(--r-sm);background:var(--w);color:var(--n);font-family:'DM Sans',sans-serif;font-size:15px;outline:none;transition:border-color .2s;-webkit-appearance:none;}
input[type="checkbox"]{width:auto;padding:0;border:none;background:none;-webkit-appearance:checkbox;appearance:checkbox;}
input:focus,textarea:focus,select:focus{border-color:var(--o);}
input::placeholder,textarea::placeholder{color:var(--g3);}
textarea{resize:none;height:88px;line-height:1.5;}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A8178'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;-webkit-appearance:none;appearance:none;}
.field{margin-bottom:17px;}
.field label{display:block;font-size:12px;font-weight:500;color:var(--g4);margin-bottom:6px;letter-spacing:.3px;text-transform:uppercase;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.field-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}

/* BUTTONS */
.btn{display:block;width:100%;padding:15px;border:none;border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;cursor:pointer;transition:all .15s;text-align:center;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--n);color:var(--w);}
.btn-primary:hover{background:var(--n2);}
.btn-outline{background:transparent;color:var(--g4);border:1.5px solid var(--g2);margin-top:10px;}
.btn-danger{background:var(--red-light);color:var(--red);border:1.5px solid #FECACA;margin-top:10px;}
.btn-green{background:var(--green-light);color:var(--green);border:1.5px solid #BBF7D0;}
.btn-sm{padding:9px 16px;font-size:13px;width:auto;display:inline-block;}

/* TOAST */
#toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--n2);color:var(--w);padding:11px 22px;border-radius:30px;font-size:14px;font-weight:500;opacity:0;transition:all .25s;pointer-events:none;z-index:999;white-space:nowrap;max-width:88vw;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#confirmToast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--n2);color:var(--w);padding:14px 16px;border-radius:16px;font-size:13px;font-weight:500;line-height:1.4;opacity:0;transition:all .25s;pointer-events:none;z-index:1100;width:300px;max-width:88vw;text-align:center;box-shadow:0 8px 28px rgba(0,0,0,.28);}
#confirmToast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
#confirmToast .ct-actions{display:flex;gap:8px;margin-top:10px;}
#confirmToast button{flex:1;border:none;border-radius:20px;padding:9px 10px;font-size:12.5px;font-weight:700;cursor:pointer;}
#confirmToast .ct-primary{background:var(--o);color:#fff;}
#confirmToast .ct-outline{background:rgba(255,255,255,.14);color:#fff;}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:none;align-items:flex-end;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--w);border-radius:22px 22px 0 0;width:100%;max-width:430px;max-height:90vh;overflow-y:auto;padding:24px 20px 44px;animation:slideUp .25s ease;}
@keyframes slideUp{from{transform:translateY(60px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.modal-handle{width:40px;height:4px;background:var(--g2);border-radius:2px;margin:0 auto 20px;}
.modal-title{font-family:'DejaVu',sans-serif;font-size:19px;font-weight:700;margin-bottom:4px;}
.modal-sub{font-size:13px;color:var(--g4);margin-bottom:22px;line-height:1.5;}

/* CHIPS */
.chips{display:flex;gap:8px;padding:12px 16px;overflow-x:auto;scrollbar-width:none;flex-shrink:0;background:var(--w);border-bottom:1px solid var(--g1);}
.chips::-webkit-scrollbar{display:none;}
.chip{flex-shrink:0;padding:8px 15px;border-radius:20px;border:1.5px solid var(--g2);background:var(--w);font-size:13px;font-weight:500;color:var(--g4);cursor:pointer;transition:all .15s;}
.chip.on{background:var(--n);color:var(--w);border-color:var(--n);box-shadow:0 3px 10px rgba(20,20,20,.18);}
.chip:active{transform:scale(.95);}

/* SEARCH */
.searchbar{display:flex;align-items:center;gap:10px;background:var(--w);border-radius:16px;padding:12px 16px;margin:12px 16px;box-shadow:0 1px 3px rgba(20,20,20,.06),0 1px 12px rgba(20,20,20,.04);border:1px solid rgba(20,20,20,.05);transition:box-shadow .15s;}
.searchbar:focus-within{box-shadow:0 2px 6px rgba(20,20,20,.08),0 1px 16px rgba(20,20,20,.06);border-color:var(--g2);}
.searchbar input{background:transparent;border:none;font-size:14px;padding:0;color:var(--n);}
.searchbar input:focus{border:none;}

/* PRODUCT GRID */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:6px 14px 16px;}

/* ── EXPLORAR VISUAL: "Descubre cerca de ti" ── */
.discover-chips-row{display:flex;gap:10px;padding:4px 16px 4px;overflow-x:auto;scrollbar-width:none;}
.discover-chips-row::-webkit-scrollbar{display:none;}
.discover-chip{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:74px;background:var(--w);border-radius:18px;padding:14px 10px;cursor:pointer;box-shadow:0 1px 2px rgba(20,20,20,.04),0 4px 14px rgba(20,20,20,.05);transition:transform .12s;}
.discover-chip:active{transform:scale(.96);}
.discover-chip-emo{font-size:26px;line-height:1;}
.discover-chip span:last-child{font-size:11px;font-weight:600;color:var(--n);text-align:center;white-space:nowrap;}

.discover-featured-row{display:flex;gap:12px;padding:4px 16px 4px;overflow-x:auto;scrollbar-width:none;}
.discover-featured-row::-webkit-scrollbar{display:none;}
.discover-featured-card{flex-shrink:0;width:230px;height:132px;border-radius:20px;position:relative;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:14px;box-shadow:0 2px 6px rgba(20,20,20,.06),0 8px 20px rgba(20,20,20,.08);transition:transform .12s;}
.discover-featured-card:active{transform:scale(.97);}
.discover-featured-emo{font-size:32px;line-height:1;}
.discover-featured-text{width:100%;}
.discover-featured-title{font-family:'DejaVu',sans-serif;font-size:15px;font-weight:700;line-height:1.2;}
.discover-featured-sub{font-size:11.5px;color:var(--g4);margin-top:3px;line-height:1.3;}

.pcard{background:var(--w);border-radius:20px;cursor:pointer;overflow:hidden;transition:transform .15s,box-shadow .15s;box-shadow:0 1px 2px rgba(20,20,20,.04),0 6px 20px rgba(20,20,20,.06);}
.pcard:active{transform:scale(.97);}
.pcard-img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:38px;}
.pcard-body{padding:12px 13px 15px;}
.pcard-name{font-size:13.5px;font-weight:600;line-height:1.35;margin-bottom:6px;color:var(--n);}
.pcard-price{font-family:'DejaVu',sans-serif;font-size:16.5px;font-weight:700;color:var(--n);}
.pcard-loc{font-size:11px;color:var(--g4);margin-top:5px;}
.pcard-badge{display:inline-block;font-size:10px;font-weight:500;padding:2px 8px;border-radius:20px;background:var(--g1);color:var(--g4);margin-top:4px;}
.pcard-original{font-size:11px;color:var(--g3);text-decoration:line-through;margin-left:6px;font-weight:400;}
.badge-discount{position:absolute;top:8px;left:8px;background:var(--o);color:white;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;letter-spacing:.3px;z-index:2;}

/* HERO */
.hero{margin:14px 14px 4px;border-radius:22px;background:linear-gradient(135deg,#1a1208 0%,#2d1f0e 100%);padding:28px 24px;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(26,18,8,.25);}
.hero::after{content:'';position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;background:var(--o);opacity:.14;filter:blur(2px);}
.hero-tag{font-size:11px;font-weight:600;color:var(--o);letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px;}
.hero-title{font-family:'DejaVu',sans-serif;font-size:25px;font-weight:700;color:var(--w);line-height:1.2;letter-spacing:-.4px;margin-bottom:9px;}
.hero-sub{font-size:13px;color:var(--g3);line-height:1.5;}
.hero-cta{display:inline-flex;align-items:center;gap:6px;margin-top:16px;background:var(--w);color:var(--n);border:none;padding:11px 20px;border-radius:24px;font-size:13px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:transform .15s;}
.hero-cta:active{transform:scale(.96);}

/* CATEGORY STRIP */
.cat-strip{display:flex;gap:10px;padding:12px 14px;overflow-x:auto;scrollbar-width:none;}
.cat-strip::-webkit-scrollbar{display:none;}
.cat-card{flex-shrink:0;width:72px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;}
.cat-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;transition:transform .15s;}
.cat-icon:active{transform:scale(.88);}
.cat-label{font-size:11px;font-weight:500;color:var(--g5);text-align:center;line-height:1.3;}
.ci-p{background:#FFF3E0;}.ci-s{background:#E8F5E9;}.ci-f{background:#FCE4EC;}.ci-t{background:#E3F2FD;}.ci-r{background:#F3E8FF;}.ci-g{background:#ECFDF5;}.ci-h{background:#FEF9C3;}

/* SECTION HEADER */
.sec-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 8px;}
.sec-title{font-family:'DejaVu',sans-serif;font-size:17px;font-weight:700;}
.sec-link{font-size:13px;color:var(--o);font-weight:500;cursor:pointer;}

/* BACK ROW */
.back-row{display:flex;align-items:center;gap:8px;padding:14px 16px;cursor:pointer;color:var(--n);font-weight:500;font-size:15px;flex-shrink:0;border-bottom:1px solid var(--g1);background:var(--w);}

/* TYPE CARDS */
.type-list,.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.type-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--w);border:1.5px solid var(--g2);border-radius:var(--r);padding:14px 10px;cursor:pointer;transition:border-color .15s,-webkit-transform .1s,transform .1s;-webkit-tap-highlight-color:transparent;}
.type-card:active{transform:scale(.97);}
.type-card:hover{border-color:var(--o);}
.tc-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--g1);font-size:28px;flex-shrink:0;}
.tc-name{font-size:13px;font-weight:600;line-height:1.3;}
.tc-desc{font-size:11px;color:var(--g4);margin-top:2px;line-height:1.4;}

/* PHOTO UPLOADER */
.photo-up-area{margin-bottom:14px;}
.photo-up-main{width:100%;height:160px;border-radius:var(--r);border:2px dashed var(--g2);background:var(--g1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;overflow:hidden;transition:border-color .2s;position:relative;}
.photo-up-main:hover{border-color:var(--o);}
.photo-up-main img{width:100%;height:100%;object-fit:cover;}
.photo-up-txt{font-size:13px;color:var(--g4);text-align:center;}
.photo-thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;}
.photo-thumbs::-webkit-scrollbar{display:none;}
.photo-thumb{width:60px;height:60px;border-radius:8px;object-fit:cover;flex-shrink:0;border:2px solid var(--g2);position:relative;cursor:pointer;}
.photo-thumb-del{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--red);color:white;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:700;}
.photo-add{width:60px;height:60px;border-radius:8px;border:2px dashed var(--g2);background:var(--g1);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:22px;color:var(--g3);}

/* DETAIL */
.detail-gallery{position:relative;background:var(--g1);flex-shrink:0;}
.detail-gallery-img{width:100%;height:340px;object-fit:cover;display:block;}
.detail-gallery-ph{width:100%;height:340px;display:flex;align-items:center;justify-content:center;font-size:80px;background:var(--g1);}
#sDetail .back-row{position:absolute;top:16px;left:16px;z-index:20;width:40px;height:40px;padding:0;border-radius:50%;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.18);border:none;justify-content:center;gap:0;}
#sDetail .back-row span{display:none;}
#sDetail .scroll{padding-top:0;}
.gallery-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px;}
.gdot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);}
.gdot.on{background:white;width:16px;border-radius:3px;}
.gallery-prev,.gallery-next{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.gallery-prev{left:10px;}.gallery-next{right:10px;}
.detail-body{padding:20px 18px;}
.detail-pill{display:inline-flex;align-items:center;gap:5px;background:var(--o-light);color:var(--o);font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.4px;}
.detail-name{font-family:'DejaVu',sans-serif;font-size:23px;font-weight:700;line-height:1.2;margin-bottom:8px;}
.detail-price{font-family:'DejaVu',sans-serif;font-size:28px;font-weight:700;color:var(--n);margin-bottom:14px;}
.detail-original{font-size:16px;color:var(--g3);text-decoration:line-through;font-weight:400;margin-left:8px;}
.detail-discount-tag{display:inline-block;background:var(--o);color:white;font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;margin-left:8px;vertical-align:middle;}
.detail-desc{font-size:15px;color:var(--g5);line-height:1.65;margin-bottom:18px;}
.detail-meta{padding:16px;background:var(--g1);border-radius:16px;margin-bottom:18px;display:flex;flex-direction:column;gap:10px;}
.meta-row{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--g5);}
.seller-block{display:flex;align-items:center;gap:12px;padding:14px;background:var(--w);border-radius:16px;margin-bottom:20px;cursor:pointer;box-shadow:0 1px 3px rgba(20,20,20,.05),0 4px 16px rgba(20,20,20,.05);transition:transform .1s;}
.seller-block:active{transform:scale(.98);}
.av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.av-init{width:44px;height:44px;border-radius:50%;background:var(--o);color:var(--w);display:flex;align-items:center;justify-content:center;font-family:'DejaVu',sans-serif;font-size:16px;font-weight:700;flex-shrink:0;}

/* PROFILE — rediseño tipo Airbnb/Instagram: portada panorámica con
   esquinas redondeadas propias (no recortada por el contenedor), avatar
   grande sobrepuesto con borde blanco grueso, bloque de info debajo (no al
   lado) y fila de acciones tipo píldora. Estas mismas clases las reutiliza
   TAMBIÉN el perfil visitante (openSellerProfile) — antes tenía su propio
   juego de clases .seller-prof-* casi idéntico y duplicado; se unificaron
   porque ambas pantallas ahora comparten el mismo diseño. */
.profile-head{padding:14px 16px 0;background:var(--w);}
.profile-banner{position:relative;height:190px;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,var(--o-light),var(--blue-light));cursor:pointer;}
.profile-banner img{width:100%;height:100%;object-fit:cover;display:block;}
.profile-banner-edit{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;background:rgba(20,20,20,.55);color:#fff;font-size:11.5px;font-weight:600;padding:7px 12px 7px 9px;border-radius:20px;cursor:pointer;}
.profile-banner-fab{position:absolute;bottom:12px;right:12px;width:38px;height:38px;border-radius:50%;background:var(--w);box-shadow:0 4px 14px rgba(20,20,20,.2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--n);transition:transform .15s;}
.profile-banner-fab:active{transform:scale(.9);}
/* Botón circular de cambio de identidad — flota sobre la esquina superior
   derecha de la portada. Mismo id/función que antes (openIdentitySheet,
   renderIdentityUI lo muestra/oculta), solo que ahora vive aquí en vez de
   en el topbar: en la referencia visual es parte de la cabecera, no de la
   barra de navegación. Solo aplica en Mi Perfil — el perfil visitante no
   tiene este botón (no puedes cambiar la identidad de otra persona). */
.profile-identity-fab{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:var(--w);box-shadow:0 4px 14px rgba(20,20,20,.2);border:none;display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--n);}
.profile-identity-fab:active{transform:scale(.92);}
/* Avatar sobrepuesto a la portada — mitad afuera, mitad adentro, como
   Instagram/Airbnb. margin-top negativo lo monta sobre el borde inferior
   del banner; el padding-left alinea con el margen de .profile-head. */
.profile-av-wrap{position:relative;width:116px;height:116px;margin:-58px 0 0 4px;}
.profile-av{width:116px;height:116px;border-radius:50%;object-fit:cover;border:5px solid var(--w);box-shadow:0 4px 16px rgba(20,20,20,.15);background:var(--w);display:block;}
.profile-av-init{width:116px;height:116px;border-radius:50%;background:var(--o);color:var(--w);display:flex;align-items:center;justify-content:center;font-family:'DejaVu',sans-serif;font-size:38px;font-weight:700;border:5px solid var(--w);box-shadow:0 4px 16px rgba(20,20,20,.15);}
/* Insignia de verificación en la esquina inferior derecha del avatar —
   solo el ícono, el texto completo ya no vive aquí (bajó a la píldora de
   nivel debajo del nombre, ver .profile-level-pill). */
.profile-av-badge{position:absolute;bottom:2px;right:2px;width:28px;height:28px;border-radius:50%;background:var(--o);border:3px solid var(--w);display:flex;align-items:center;justify-content:center;color:#fff;}
.profile-av-badge svg{width:14px;height:14px;}
.profile-av-badge.gold{background:linear-gradient(135deg,#FDE68A,#F5C542);color:#7A5B00;}
.profile-info-block{padding:10px 4px 0;}
.profile-name{font-family:'DejaVu',sans-serif;font-size:19px;font-weight:700;line-height:1.25;}
/* Píldora naranja de nivel ("Fundador", "Empresa") — separada del check de
   verificación del avatar a propósito: una dice "sí es quien dice ser", la
   otra dice "y además tiene este estatus". No todas las cuentas
   verificadas tienen nivel, así que esta píldora es opcional. */
.profile-level-pill{display:inline-block;background:var(--o-light);color:var(--o);font-size:11px;font-weight:700;padding:3px 11px;border-radius:20px;margin-top:6px;}
.profile-col{font-size:12.5px;color:var(--g4);margin-top:6px;display:flex;align-items:center;gap:4px;}
.profile-bio{font-size:13px;color:var(--g5);line-height:1.5;margin-top:8px;}
.profile-meta-line{font-size:12.5px;color:var(--g4);margin-top:8px;}
.profile-meta-line b{color:var(--n);font-weight:700;}
/* Fila de acciones — píldoras uniformes con sombra ligera, el botón
   principal (Editar) destaca en naranje sólido igual que "Seguir" en un
   perfil ajeno. No hay "Seguir/Reportar" aquí porque es TU PROPIO
   perfil — no te puedes seguir ni reportar a ti mismo; en su lugar,
   Editar es la acción principal y "⋯" abre accesos rápidos (favoritos,
   pedidos, reseñas, seguidos) que antes solo vivían en el acordeón. */
.profile-actions-row{display:flex;gap:8px;padding:14px 4px 0;}
.pbtn{border:none;border-radius:16px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:6px;height:48px;box-shadow:0 1px 3px rgba(20,20,20,.05),0 4px 12px rgba(20,20,20,.06);transition:transform .12s;}
.pbtn:active{transform:scale(.96);}
.pbtn-primary{flex:1.4;background:var(--o);color:#fff;box-shadow:0 4px 14px rgba(249,115,22,.32);}
.pbtn-secondary{flex:1;background:var(--w);color:var(--n);}
.pbtn-icon{width:48px;flex:none;background:var(--w);color:var(--n);font-size:18px;font-weight:700;letter-spacing:1px;}
/* Stats: una sola tarjeta con columnas separadas por línea, no cajas
   sueltas con su propia sombra cada una — se lee como un solo bloque de
   información, no como elementos independientes compitiendo entre sí. */
.stat-row{display:flex;background:var(--w);border-radius:16px;box-shadow:0 1px 3px rgba(20,20,20,.05),0 4px 12px rgba(20,20,20,.05);overflow:hidden;}
.stat-box{flex:1;padding:16px 8px;text-align:center;position:relative;}
.stat-box:not(:last-child)::after{content:'';position:absolute;top:16px;bottom:16px;right:0;width:1px;background:var(--g1);}
.stat-ico{font-size:15px;margin-bottom:3px;opacity:.75;}
.stat-num{font-family:'DejaVu',sans-serif;font-size:19px;font-weight:700;color:var(--n);}
.stat-lbl{font-size:10.5px;color:var(--g4);margin-top:1px;}

/* Pestañas de navegación de "Mi Perfil" (Publicaciones/Información/
   Reseñas/Guardados) — indicador inferior naranja animado, sticky para
   que no se pierda al hacer scroll dentro de una pestaña larga. */
.ptabs{display:flex;padding:0 12px;border-bottom:1px solid var(--g1);position:sticky;top:0;background:var(--w);z-index:4;}
#app.dark .ptabs{background:var(--g1);}
.ptab{flex:1;text-align:center;padding:13px 2px 11px;font-size:13px;font-weight:600;color:var(--g4);cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;white-space:nowrap;transition:color .18s,background-color .15s;border-radius:10px 10px 0 0;}
.ptab:active{background:var(--g1);}
.ptab.on{color:var(--n);}
.ptab.on::after{content:'';position:absolute;left:18%;right:18%;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--o);animation:ptabIn .22s ease;}
@keyframes ptabIn{from{transform:scaleX(0);}to{transform:scaleX(1);}}
/* Pestañas: deslizamiento direccional según hacia dónde se navega (a la
   pestaña de la derecha o de la izquierda en el orden Publicaciones →
   Información → Reseñas → Guardados), no un simple fundido genérico —
   setProfileTab() en auth.js decide la dirección y aplica una de las dos
   clases con un reflow forzado para que la animación reinicie cada vez. */
.ptab-panel{animation:fadeIn .22s ease;}
@keyframes ptabSlideInR{from{opacity:0;transform:translateX(26px);}to{opacity:1;transform:translateX(0);}}
@keyframes ptabSlideInL{from{opacity:0;transform:translateX(-26px);}to{opacity:1;transform:translateX(0);}}
.ptab-panel.slide-in-r{animation:ptabSlideInR .3s cubic-bezier(.22,.61,.36,1);}
.ptab-panel.slide-in-l{animation:ptabSlideInL .3s cubic-bezier(.22,.61,.36,1);}

/* Botón flotante de soporte propio de Mi Perfil — eliminado: ya existe
   #supportBadge (global, discreto, visible en cualquier pantalla logueada)
   y tener los dos juntos era un badge redundante y demasiado grande. */

/* ── RIPPLE TÁCTIL ──
   Onda real al tocar (no solo el transform:scale de :active) en botones,
   píldoras de acción y la barra inferior. El contenedor necesita
   position:relative + overflow:hidden para que la onda no se salga del
   borde redondeado — el span .ripple-effect lo inyecta rippleInit() en
   utils.js por delegación de evento, así que funciona incluso en botones
   que se regeneran en cada render (como los de profileHead) sin volver a
   enganchar nada. */
.btn,.pbtn,.profile-identity-fab,.bnav-fab,.bnav-item{position:relative;overflow:hidden;}
.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:rippleAnim .55s ease-out;background:rgba(0,0,0,.12);pointer-events:none;}
.ripple-effect.on-color{background:rgba(255,255,255,.45);}
@keyframes rippleAnim{to{transform:scale(1);opacity:0;}}

/* ── PERFIL PÚBLICO (visitante) ──
   Reutiliza casi todo lo de "Mi Perfil" (.profile-banner/.profile-av-*/
   .pbtn/.stat-row/.ptabs) — solo lo que es genuinamente distinto vive
   aquí: el badge azul junto al nombre, el grid de 3 columnas y las dos
   tarjetas de solo-lectura (Información / resumen de Reseñas). */
.name-check{display:inline-flex;width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;align-items:center;justify-content:center;flex-shrink:0;}
.name-check svg{width:10px;height:10px;}

/* Grid de publicaciones del perfil visitante — 3 columnas de solo imagen
   (estilo Instagram), no la .pcard completa con nombre/precio: en 3
   columnas ese texto queda apretado y no es lo que pide el mockup — ahí
   la miniatura ES la publicación, el detalle se ve al tocarla. */
.pgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px 14px 16px;}
.pgrid3-item{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;cursor:pointer;background:var(--g1);transition:transform .12s;}
.pgrid3-item:active{transform:scale(.96);}
.pgrid3-item img{width:100%;height:100%;object-fit:cover;display:block;}
.pgrid3-item .pgrid3-emoji{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:30px;}
.pgrid3-item .pgrid3-pin{position:absolute;top:5px;left:5px;background:rgba(20,20,20,.6);color:#fff;font-size:9px;font-weight:700;padding:3px 6px;border-radius:8px;}
.pgrid3-skel{aspect-ratio:1;border-radius:14px;background:var(--g1);display:flex;align-items:center;justify-content:center;color:var(--g3);}

/* Tarjeta de información — filas ícono+etiqueta+valor, mismo lenguaje
   visual que .menu-card pero de solo lectura (sin flecha, no navega). */
.info-card{background:var(--w);border-radius:18px;margin:0 14px;box-shadow:0 1px 3px rgba(20,20,20,.05),0 4px 16px rgba(20,20,20,.05);overflow:hidden;}
.info-row{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-bottom:1px solid var(--g1);}
.info-row:last-child{border-bottom:none;}
.info-row-icon{width:36px;height:36px;border-radius:10px;background:var(--g1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;}
.info-row-label{font-size:11.5px;color:var(--g4);font-weight:600;}
.info-row-value{font-size:14px;color:var(--n);margin-top:2px;line-height:1.4;word-break:break-word;}
.info-row-value a{color:var(--o);text-decoration:none;font-weight:600;}

/* Tarjeta resumen de reseñas al tope de la pestaña Reseñas — número
   grande + estrellas + conteo, con el detalle (lista + formulario de
   nueva reseña) debajo, ambos dentro del mismo panel de pestaña. */
.rev-summary-card{background:var(--w);border-radius:18px;margin:0 14px 16px;padding:18px;box-shadow:0 1px 3px rgba(20,20,20,.05),0 4px 16px rgba(20,20,20,.05);}
.rev-summary-title{font-size:12px;font-weight:700;color:var(--g4);text-transform:uppercase;letter-spacing:.3px;}
.rev-summary-body{display:flex;align-items:center;gap:14px;margin-top:10px;}
.rev-summary-num{font-family:'DejaVu',sans-serif;font-size:34px;font-weight:700;color:var(--n);line-height:1;}
.rev-summary-stars{display:flex;gap:2px;margin-bottom:4px;}
.rev-summary-empty{font-size:13px;color:var(--g4);margin-top:8px;}

/* LISTING ROW */
.listing-row{display:flex;gap:12px;align-items:center;padding:12px;margin:0 14px 10px;border-radius:16px;background:var(--w);box-shadow:0 1px 3px rgba(20,20,20,.05),0 4px 16px rgba(20,20,20,.05);cursor:pointer;transition:transform .1s;}
.listing-row:active{transform:scale(.98);}
.listing-thumb{width:58px;height:58px;border-radius:12px;object-fit:cover;flex-shrink:0;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:24px;}
.listing-info{flex:1;min-width:0;}
.listing-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--n);}
.listing-price{font-family:'DejaVu',sans-serif;font-size:14px;color:var(--n);font-weight:700;margin-top:2px;}
.listing-del{width:32px;height:32px;border-radius:50%;background:var(--red-light);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
#myListings{padding-top:2px;}

/* ABOUT / INFO */
.about-hero{background:linear-gradient(135deg,#1a1208,#2d1f0e);padding:32px 20px;text-align:center;}
.about-hero-logo{font-family:'DejaVu',sans-serif;font-size:36px;font-weight:700;color:var(--o);margin-bottom:6px;}
.about-hero-tag{font-size:13px;color:var(--g3);}
.about-section{padding:20px 18px;border-bottom:1px solid var(--g1);}
.about-h2{font-family:'DejaVu',sans-serif;font-size:17px;font-weight:700;margin-bottom:10px;}
.about-p{font-size:14px;color:var(--g5);line-height:1.7;margin-bottom:8px;}
.about-card{background:var(--g1);border-radius:var(--r-sm);padding:14px;margin-bottom:10px;}
.about-card-title{font-size:14px;font-weight:600;margin-bottom:4px;}
.about-card-desc{font-size:13px;color:var(--g4);line-height:1.5;}
.about-pill{display:inline-block;background:var(--o-light);color:var(--o);font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;margin:3px 3px 3px 0;}

/* LEGAL TABS */
.legal-tab-row{display:flex;gap:0;flex-shrink:0;border-bottom:1px solid var(--g1);background:var(--w);overflow-x:auto;scrollbar-width:none;}
.legal-tab-row::-webkit-scrollbar{display:none;}
.legal-tab{flex-shrink:0;padding:13px 14px;text-align:center;font-size:13px;font-weight:500;color:var(--g4);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;}
.legal-tab.on{color:var(--o);border-bottom-color:var(--o);}
.legal-wrap{padding:20px 18px;}
.legal-h1{font-family:'DejaVu',sans-serif;font-size:22px;font-weight:700;margin-bottom:6px;}
.legal-date{font-size:12px;color:var(--g4);margin-bottom:22px;}
.legal-section{margin-bottom:22px;}
.legal-h2{font-size:15px;font-weight:600;margin-bottom:8px;}
.legal-p{font-size:14px;color:var(--g5);line-height:1.7;margin-bottom:8px;}
.legal-ul{margin-left:16px;}
.legal-ul li{font-size:14px;color:var(--g5);line-height:1.7;margin-bottom:4px;}

/* SPLASH */
#sSplash{background:var(--n2);justify-content:center;align-items:center;flex-direction:column;gap:0;position:fixed;inset:0;z-index:999;}
/* CORS WARNING */
#corsWarning{position:fixed;inset:0;background:var(--n2);z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;}
#corsWarning.show{display:flex;}
#sOnboarding{position:relative;z-index:1;}
.splash-icon{width:72px;height:72px;margin-bottom:16px;animation:splashIn .6s ease both;}
.splash-logo{font-family:'DejaVu',sans-serif;font-size:48px;font-weight:700;color:var(--o);letter-spacing:-2px;animation:splashIn .6s ease both;}
.splash-logo span{color:var(--w);}
.splash-tag{font-size:16px;color:var(--g3);margin-top:6px;font-weight:300;animation:splashIn .6s .15s ease both;opacity:0;}
.splash-dot{width:8px;height:8px;border-radius:50%;background:var(--o);margin-top:48px;animation:splashPulse 1s .4s ease-in-out infinite;}
@keyframes splashIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@keyframes splashPulse{0%,100%{opacity:.3;transform:scale(.8);}50%{opacity:1;transform:scale(1.1);}}

/* QUICK LOGIN */
.ql-wrap{padding:0 22px;display:flex;flex-direction:column;justify-content:center;height:100%;}
.ql-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 14px;display:block;}
.ql-avatar-init{width:72px;height:72px;border-radius:50%;background:var(--o);color:white;display:flex;align-items:center;justify-content:center;font-family:'DejaVu',sans-serif;font-size:26px;font-weight:700;margin:0 auto 14px;}
.ql-greeting{font-family:'DejaVu',sans-serif;font-size:22px;font-weight:700;text-align:center;margin-bottom:4px;}
.ql-sub{font-size:14px;color:var(--g4);text-align:center;margin-bottom:32px;}

/* SESSION TOGGLE */
.session-toggle{display:flex;align-items:center;justify-content:space-between;background:var(--g1);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:16px;}
.toggle-track{width:44px;height:24px;border-radius:12px;background:var(--g2);cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;}
.toggle-track.on{background:var(--o);}
.toggle-thumb{width:20px;height:20px;border-radius:50%;background:white;position:absolute;top:2px;left:2px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.toggle-track.on .toggle-thumb{transform:translateX(20px);}

/* ONBOARDING */
.login-wrap{padding:36px 22px 24px;}
.login-icon{width:56px;height:56px;margin-bottom:10px;}
.login-wordmark{font-family:'DejaVu',sans-serif;font-size:38px;font-weight:700;color:var(--o);letter-spacing:-1px;margin-bottom:4px;}
.login-wordmark span{color:var(--n);}
.login-tagline{font-size:16px;color:var(--g4);margin-bottom:36px;font-weight:300;}
.login-step{display:none;}.login-step.on{display:block;}
.step-label{font-size:12px;color:var(--g3);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px;}
.step-title{font-family:'DejaVu',sans-serif;font-size:24px;font-weight:700;line-height:1.2;margin-bottom:22px;}
.pdots{display:flex;gap:6px;margin-bottom:24px;}
.pdot{width:8px;height:8px;border-radius:50%;background:var(--g2);transition:all .3s;}
.pdot.on{background:var(--o);width:22px;border-radius:4px;}
.avatar-up{width:88px;height:88px;border-radius:50%;background:var(--g1);border:2px dashed var(--g2);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;margin:0 auto 14px;transition:border-color .2s;}
.avatar-up:hover{border-color:var(--o);}
.avatar-up img{width:100%;height:100%;object-fit:cover;}
.skip-link{text-align:center;font-size:13px;color:var(--g4);cursor:pointer;margin-top:14px;text-decoration:underline;}

/* ══════════════════════════════
   REGISTRO — rediseño UX/UI (solo #sLogin, ver index.html)
   Paleta reducida a naranja/gris/negro, tarjetas en vez de lista plana,
   validación en tiempo real, microanimaciones discretas.
══════════════════════════════ */
.reg-wrap{padding:32px 22px 28px;}
.reg-header{text-align:center;margin-bottom:8px;}
.reg-illo{font-size:26px;letter-spacing:2px;margin:6px 0 14px;opacity:.9;}
.reg-illo-plus{font-size:14px;color:var(--g3);vertical-align:middle;}
.reg-welcome-title{font-family:'DejaVu',sans-serif;font-size:22px;font-weight:700;color:var(--n);line-height:1.3;margin-bottom:6px;}
.reg-welcome-sub{font-size:14px;color:var(--g4);line-height:1.5;margin-bottom:28px;max-width:280px;margin-left:auto;margin-right:auto;}

/* Barra de progreso — mucho más visible que los .pdot originales */
.reg-progress{margin-bottom:28px;}
.reg-progress-track{height:7px;border-radius:4px;background:var(--g1);overflow:hidden;margin-bottom:8px;}
.reg-progress-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--o),#FF7A3D);transition:width .45s cubic-bezier(.4,0,.2,1);}
.reg-progress-label{font-size:12px;color:var(--g4);font-weight:600;}
.reg-progress-step{color:var(--o);font-weight:700;}

/* Bloques agrupados — mismo ritmo de espaciado (24–32px) entre secciones */
.reg-section{margin-bottom:28px;}
.reg-section-label{font-size:12.5px;font-weight:700;color:var(--g5);letter-spacing:.3px;margin-bottom:12px;}

/* Tarjetas Comprar / Vender */
.reg-role-cards{display:flex;flex-direction:column;gap:10px;}
.reg-role-card{display:flex;align-items:center;gap:14px;padding:16px;border:1.5px solid var(--g2);border-radius:16px;background:var(--w);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s,transform .15s;}
.reg-role-card:active{transform:scale(.98);}
.reg-role-card.selected{border-color:var(--o);background:var(--o-light);box-shadow:0 4px 16px rgba(255,77,0,.14);}
.reg-role-icon{font-size:28px;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--g1);border-radius:12px;transition:background-color .2s;}
.reg-role-card.selected .reg-role-icon{background:var(--w);}
.reg-role-text{flex:1;min-width:0;}
.reg-role-title{font-size:15px;font-weight:700;color:var(--n);display:flex;align-items:center;gap:7px;margin-bottom:2px;}
.reg-role-badge{font-size:10px;font-weight:700;color:var(--o);background:var(--w);border:1px solid var(--o-border);border-radius:10px;padding:2px 7px;letter-spacing:.2px;}
.reg-role-sub{font-size:12.5px;color:var(--g4);line-height:1.4;}
.reg-role-check{width:22px;height:22px;border-radius:50%;background:var(--o);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transform:scale(.5);transition:opacity .2s,transform .2s;}
.reg-role-card.selected .reg-role-check{opacity:1;transform:scale(1);}

/* Inputs con validación en tiempo real */
.reg-input-wrap{position:relative;}
.reg-input-wrap input{padding-right:40px;}
.reg-input-check{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;pointer-events:none;}
.reg-input-check svg{animation:reg-check-pop .2s ease;}
@keyframes reg-check-pop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
.reg-input-msg{font-size:11.5px;color:var(--g4);margin-top:5px;min-height:14px;transition:color .2s;}
.reg-input-msg.ok{color:#0F9D58;font-weight:600;}
input.reg-input-ok{border-color:#0F9D58;}
input.reg-input-bad{border-color:#D64545;}
.reg-eye-btn{position:absolute;right:14px;bottom:14px;background:none;border:none;cursor:pointer;color:var(--g4);font-size:18px;}

/* Tarjeta de ubicación */
.reg-location-card{display:flex;gap:14px;padding:16px;border-radius:16px;background:var(--g1);margin-bottom:14px;}
.reg-location-icon{font-size:24px;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--w);border-radius:12px;}
.reg-location-text{flex:1;min-width:0;}
.reg-location-title{font-size:14px;font-weight:700;color:var(--n);margin-bottom:3px;}
.reg-location-sub{font-size:12px;color:var(--g4);line-height:1.5;margin-bottom:10px;}
.reg-location-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:20px;border:1.5px solid var(--o);background:var(--w);color:var(--o);font-size:12.5px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background-color .15s,transform .15s;}
.reg-location-btn:active{transform:scale(.96);}
.reg-location-status{font-size:11.5px;color:var(--g4);margin-top:8px;min-height:14px;}

/* CTA principal — punto de atención imposible de ignorar */
.reg-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:17px;border:none;border-radius:16px;background:var(--o);color:#fff;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(255,77,0,.3);transition:transform .15s,box-shadow .15s;margin-top:6px;}
.reg-cta:active{transform:scale(.98);box-shadow:0 3px 10px rgba(255,77,0,.28);}
.reg-login-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--g1);}
.reg-login-switch-label{font-size:13px;color:var(--g4);flex-shrink:0;}
.reg-login-switch .btn-outline{width:auto;padding:10px 18px;}

/* Transición suave entre pasos */
.login-step.on{animation:reg-step-in .35s cubic-bezier(.4,0,.2,1);}
@keyframes reg-step-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* DIVIDER — más aire entre secciones (antes 16px) */
.divider{height:24px;background:transparent;flex-shrink:0;}
.menu-card{background:var(--w);border-radius:18px;margin:0 14px 6px;box-shadow:0 1px 3px rgba(20,20,20,.05),0 4px 16px rgba(20,20,20,.05);overflow:hidden;}
.menu-card .menu-item{border-bottom:1px solid var(--g1);}
.menu-card .menu-item:last-child{border-bottom:none;}
.menu-item:active{background:var(--g1);}

/* MENU ITEM */
.menu-item{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;transition:background .1s;}
.menu-item:active{background:var(--g1);}
/* Un solo color de fondo para todos los íconos de menú — el !important es
   intencional: neutraliza los fondos de color que traía cada uno inline
   (uno por sección) sin tener que tocar cada línea del HTML una por una.
   El acento naranja se reserva para botones/estados activos, no para
   decorar cada renglón de una lista. */
.menu-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;background:var(--g1) !important;}
.menu-text{flex:1;}
.menu-label{font-size:14.5px;font-weight:500;}
.menu-desc{font-size:11.5px;color:var(--g4);margin-top:1px;}
.menu-arrow{color:var(--g3);}

/* ACORDEÓN — agrupa secciones largas (Cuenta/Negocio/Herramientas/
   Configuración/Ayuda) para que no sea una fila interminable de tarjetas
   blancas; colapsadas por defecto, el usuario abre solo lo que necesita. */
.acc{background:var(--w);border-radius:18px;margin:0 14px 10px;box-shadow:0 1px 3px rgba(20,20,20,.05),0 4px 16px rgba(20,20,20,.05);overflow:hidden;}
.acc-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.acc-head:active{background:var(--g1);}
.acc-head-left{display:flex;align-items:center;gap:12px;}
.acc-ico{width:36px;height:36px;border-radius:10px;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.acc-title{font-size:14.5px;font-weight:600;}
.acc-chevron{color:var(--g3);transition:transform .2s;flex-shrink:0;}
.acc.open .acc-chevron{transform:rotate(90deg);}
/* Animado vía max-height (ver toggleAcc en utils.js, que mide scrollHeight
   real en vez de usar un valor fijo grande — así no se ve un "salto" raro
   cuando el contenido es corto). border-top transparente en vez de
   quitarlo por completo, para poder transicionarlo junto con la altura. */
.acc-body{max-height:0;overflow:hidden;border-top:1px solid transparent;transition:max-height .25s ease,border-color .25s ease;}
/* Parpadeo breve al llegar por deep link (ver goProfileSection en utils.js)
   — señala "aquí es" sin quedar un color permanente ni un layout distinto. */
@keyframes acc-deeplink-flash{0%,100%{background:transparent;}25%,75%{background:var(--o-light);}}
.acc-deeplink-flash{animation:acc-deeplink-flash 1.4s ease;border-radius:14px;}
.acc.open .acc-body{border-top-color:var(--g1);}
.acc-body .menu-card{margin:0;border-radius:0;box-shadow:none;}

/* ZONA DE RIESGO — separada visualmente de Cerrar sesión, no un botón más
   en la misma fila. */
.danger-zone{margin:0 14px;border-radius:16px;border:1.5px solid #FECACA;background:#FEF2F2;padding:14px 16px;}
.danger-zone-title{font-size:11px;font-weight:700;color:#B91C1C;letter-spacing:.4px;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:5px;}
.danger-zone-sub{font-size:12px;color:#7F1D1D;margin-bottom:10px;line-height:1.5;}

/* EMPTY */
.empty{text-align:center;padding:48px 24px;}
.empty-icon{width:88px;height:88px;border-radius:50%;background:var(--g1);border:3px solid var(--g2);display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 12px;}
.empty-title{font-family:'DejaVu',sans-serif;font-size:17px;font-weight:700;margin-bottom:6px;}
.empty-sub{font-size:14px;color:var(--g4);line-height:1.5;}

/* BADGE */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;}
.badge-orange{background:var(--o-light);color:var(--o);}
.badge-green{background:var(--green-light);color:var(--green);}

/* ANIM */
@keyframes fadeIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
.fadein{animation:fadeIn .25s ease;}


/* FOTOS COMPLETAS */
.pcard-img{background:var(--g1);display:flex;align-items:center;justify-content:center;}
.pcard-img img,.pcard-img-el{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--g1);}
.detail-gallery-img{object-fit:cover;}

/* FAV BUTTON */
.fav-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;z-index:3;border:none;transition:transform .15s;}
.fav-btn:active{transform:scale(.85);}

/* CART */
.cart-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--o);color:white;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.cart-item{display:flex;align-items:center;gap:14px;padding:14px;margin:0 14px 12px;border-radius:16px;background:var(--w);box-shadow:0 1px 3px rgba(20,20,20,.05),0 4px 16px rgba(20,20,20,.05);}
.cart-item-img{width:68px;height:68px;border-radius:12px;object-fit:cover;background:var(--g1);flex-shrink:0;}
.cart-total{padding:16px 18px;margin:4px 0 0;position:sticky;bottom:0;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -1px 0 rgba(20,20,20,.06),0 -8px 20px rgba(20,20,20,.04);}
#cartList{padding-top:12px;}

/* HISTORY chips */
.hist-chip{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:20px;border:1.5px solid var(--g2);background:var(--w);font-size:13px;color:var(--g5);cursor:pointer;flex-shrink:0;}
.hist-chip:active{background:var(--g1);}

/* SOCIAL INPUTS */
.social-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.social-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}


/* SHARE BTN */
.share-btn{display:flex;align-items:center;gap:6px;padding:11px 16px;border-radius:14px;border:none;background:var(--g1);font-size:13px;font-weight:500;color:var(--g5);cursor:pointer;transition:background .15s;}
.share-btn:hover{background:var(--g2);}

/* Botones de acción del detalle — componentizados */
.detail-btn-icon{width:46px;height:46px;flex-shrink:0;padding:0;border:none;border-radius:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s;}
.detail-btn-icon:active{transform:scale(.92);}
.detail-btn-chat{background:var(--o);box-shadow:0 4px 14px rgba(255,77,0,.28);}
.detail-btn-fav{background:var(--w);font-size:19px;box-shadow:0 1px 3px rgba(20,20,20,.05),0 4px 14px rgba(20,20,20,.06);}
.detail-btn-cart{background:var(--o-light);font-size:19px;box-shadow:0 1px 3px rgba(20,20,20,.05),0 4px 14px rgba(20,20,20,.06);}

/* CONFIRM PUBLISH */
#sConfirmPublish{background:var(--cream);}
.confirm-pub-wrap{padding:36px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.confirm-check{width:72px;height:72px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:36px;margin-bottom:20px;}
.confirm-pub-title{font-family:'DejaVu',sans-serif;font-size:24px;font-weight:700;margin-bottom:8px;}
.confirm-pub-sub{font-size:15px;color:var(--g4);margin-bottom:28px;line-height:1.5;}
.confirm-preview{width:100%;background:var(--w);border-radius:var(--r);border:1px solid var(--g1);overflow:hidden;margin-bottom:24px;text-align:left;}
.confirm-preview-img{width:100%;height:160px;object-fit:contain;background:var(--g1);}
.confirm-preview-body{padding:14px;}

/* EDIT LISTING */
.edit-listing-btn{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--o);font-weight:500;cursor:pointer;padding:8px 0;}

/* ONBOARDING SLIDES */
#sOnboarding{background:var(--n2);}
.ob-slide{display:none;flex-direction:column;align-items:center;justify-content:center;padding:40px 28px;text-align:center;height:100%;}
.ob-slide.on{display:flex;}
.ob-emoji{font-size:72px;margin-bottom:24px;}
.ob-title{font-family:'DejaVu',sans-serif;font-size:26px;font-weight:700;color:var(--w);margin-bottom:10px;}
.ob-desc{font-size:16px;color:var(--g3);line-height:1.6;margin-bottom:36px;}
.ob-dots{display:flex;gap:8px;justify-content:center;margin-bottom:28px;}
.ob-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);}
.ob-dot.on{background:var(--o);width:22px;border-radius:4px;}

/* DARK MODE — activado por clase .dark en #app */
#app.dark{
  --w:#1A1A1A;
  --cream:#141414;
  --g1:#232323;
  --g2:#2E2E2E;
  --g3:#666666;
  --g4:#888888;
  --g5:#AAAAAA;
  --n:#DEDEDE;
  --n2:#1A1A1A;
  --o:#FF4D00;
  --o-light:#2A1A0A;
  --o-border:#5A3010;
  --green-light:#0A1F0F;
  --red-light:#1F0A0A;
  --blue-light:#0A0F1F;
}
#app.dark body,
#app.dark{background:var(--cream);color:var(--n);}
#app.dark input,
#app.dark textarea,
#app.dark select{background:var(--g1);color:var(--n);border-color:var(--g2);}
#app.dark input::placeholder,
#app.dark textarea::placeholder{color:var(--g3);}
#app.dark .hero{background:linear-gradient(135deg,#0D0D0D 0%,#1A1008 100%);}
#app.dark .hero-title{color:#E8E8E8;}
#app.dark .hero-sub{color:#888888;}
#app.dark .hero-tag{color:#E8650A;}
#app.dark .hero-cta{background:#F0F0F0;color:#0E0E0E;}
#app.dark .about-hero{background:linear-gradient(135deg,#0D0D0D,#1A1008);}
#app.dark .ob-title{color:#DEDEDE;}
#app.dark .stat-row{background:var(--g1);}
#app.dark .stat-box:not(:last-child)::after{background:var(--g2);}
#app.dark .pcard{background:var(--g1);border-color:var(--g2);}
#app.dark .pcard-name{color:var(--n);}
#app.dark .pcard-img,#app.dark .pcard-img-el{background:var(--g2);}
#app.dark .topbar,#app.dark .bnav,#app.dark .back-row{background:var(--w);border-color:var(--g2);}
#app.dark .chips,#app.dark .chip{background:var(--w);border-color:var(--g2);}
#app.dark .chip.on{background:var(--n);color:var(--w);border-color:var(--n);}
#app.dark .searchbar{background:var(--g1);}
#app.dark .type-card{background:var(--w);border-color:var(--g2);}
#app.dark .modal{background:#1E1E1E;}
#app.dark .seller-block{background:var(--w);border-color:var(--g2);}
#app.dark .detail-meta{background:var(--g1);}
#app.dark .detail-gallery{background:#0D0D0D;}
#app.dark .detail-gallery-img{background:#0D0D0D;}
#app.dark .menu-item{background:var(--w);}
#app.dark .menu-item:active{background:var(--g1);}
#app.dark .listing-row:active{background:var(--g1);}
#app.dark .profile-head{background:var(--g1);}
#app.dark .about-card{background:var(--g1);}
#app.dark .about-section{border-color:var(--g2);}
#app.dark .faq-item{border-color:var(--g2);}
#app.dark .legal-section{border-color:var(--g2);}
#app.dark .review-card{border-color:var(--g2);}
#app.dark .session-toggle{background:var(--g1);}
#app.dark .photo-up-main{background:var(--g1);border-color:var(--g2);}
#app.dark .photo-add{background:var(--g1);}
#app.dark .share-btn{background:var(--w);border-color:var(--g2);color:var(--g5);}
#app.dark .confirm-preview{background:var(--g1);border-color:var(--g2);}
#app.dark .divider{background:var(--g1);}
#app.dark .hist-chip{background:var(--g1);border-color:var(--g2);color:var(--g5);}
#app.dark .bnav-item{color:var(--g3);}
#app.dark .bnav-item.on{color:var(--o);}
#app.dark .wordmark{color:var(--o);}
#app.dark .wordmark span{color:var(--n);}
#app.dark .btn-outline{background:transparent;color:var(--g4);border-color:var(--g2);}
#app.dark .badge-orange{background:var(--o-light);color:var(--o);}




/* ZONA / MUNICIPIO */
.zona-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--o);color:white;
  font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;
  letter-spacing:.3px;text-transform:uppercase;
}
.zona-tag{font-size:11px;color:var(--g4);}
.municipio-divider{
  padding:8px 16px 4px;
  font-size:11px;font-weight:700;color:var(--g4);
  letter-spacing:.5px;text-transform:uppercase;
  border-top:1px solid var(--g1);margin-top:4px;
}
/* LOCATION AUTOCOMPLETE */
.loc-suggestions{
  background:var(--w);border:1px solid var(--g2);
  border-radius:var(--r-sm);margin-top:4px;
  overflow:hidden;display:none;
}
.loc-suggestions.show{display:block;}
.loc-option{
  padding:11px 14px;font-size:14px;cursor:pointer;
  border-bottom:1px solid var(--g1);transition:background .1s;
}
.loc-option:last-child{border-bottom:none;}
.loc-option:active{background:var(--g1);}
.loc-option b{color:var(--o);}



/* EDIT LISTING PHOTOS */
.el-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.el-photo-item{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:2px solid var(--g2);cursor:grab;}
.el-photo-item.dragging{opacity:.5;border-color:var(--o);}
.el-photo-item img{width:100%;height:100%;object-fit:cover;}
.el-photo-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(220,38,38,.9);color:white;font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;}
.el-photo-main{position:absolute;bottom:4px;left:4px;background:var(--o);color:white;font-size:9px;font-weight:700;padding:2px 6px;border-radius:8px;}
.el-photo-add{aspect-ratio:1;border-radius:8px;border:2px dashed var(--g2);background:var(--g1);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;gap:4px;font-size:11px;color:var(--g4);}

/* LEAFLET OVERRIDES */
#leafletMap{z-index:1;}
.leaflet-control-attribution{font-size:9px!important;}
.leaflet-top.leaflet-right{top:50px;}

/* MAP SCREEN */
.map-container{flex:1;background:var(--g1);position:relative;overflow:hidden;}
.map-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;}
.map-pin{font-size:48px;}
.map-category-bar{display:flex;gap:8px;padding:10px 14px;overflow-x:auto;scrollbar-width:none;background:var(--w);border-bottom:1px solid var(--g1);flex-shrink:0;}
.map-category-bar::-webkit-scrollbar{display:none;}
.map-cat{flex-shrink:0;display:flex;align-items:center;gap:5px;padding:7px 12px;border-radius:20px;border:1.5px solid var(--g2);background:var(--w);font-size:13px;font-weight:500;color:var(--g4);cursor:pointer;transition:all .15s;}
.map-cat.on{background:var(--o);color:white;border-color:var(--o);}
.map-listing-sheet{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--w);border-radius:20px 20px 0 0;
  max-height:52%;overflow-y:auto;
  box-shadow:0 -4px 24px rgba(0,0,0,.18);
  padding:0 0 80px;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:900;
}
.map-listing-sheet.collapsed{transform:translateY(calc(100% - 44px));}
.map-sheet-handle-wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px 6px;cursor:pointer;flex-shrink:0;
}
.map-sheet-handle{width:36px;height:4px;background:var(--g2);border-radius:2px;margin:0 auto;}
.map-sheet-toggle{
  font-size:11px;font-weight:600;color:var(--o);
  background:var(--o-light);border:none;border-radius:20px;
  padding:4px 12px;cursor:pointer;font-family:'DM Sans',sans-serif;
}
.map-listing-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--g1);cursor:pointer;}
.map-listing-row:active{background:var(--g1);}
.map-dot{width:10px;height:10px;border-radius:50%;background:var(--o);flex-shrink:0;}

/* IMAGE ZOOM LIGHTBOX */
/* ── ESTADOS (Historias 24h) ── */
/* ── FILTRO RÁPIDO DE RECENCIA (Explorar) ── */
.recency-chip{flex-shrink:0;padding:6px 13px;border-radius:18px;border:1.5px solid var(--g2);background:var(--w);font-size:12px;font-weight:600;color:var(--g4);cursor:pointer;transition:all .15s;white-space:nowrap;}
.recency-chip.on{background:var(--o);color:#fff;border-color:var(--o);box-shadow:0 3px 10px rgba(255,77,0,.22);}

.story-row{display:flex;gap:14px;padding:2px 16px 4px;overflow-x:auto;scrollbar-width:none;}
.story-row::-webkit-scrollbar{display:none;}
.story-tile{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;width:64px;cursor:pointer;}
.story-ring{width:60px;height:60px;border-radius:50%;padding:2.5px;background:linear-gradient(135deg,var(--o),#FFB800);display:flex;align-items:center;justify-content:center;position:relative;}
.story-ring.seen{background:var(--g2);}
.story-ring.story-ring-add{background:var(--g2);}
.story-avatar{width:100%;height:100%;border-radius:50%;background:var(--w);padding:2px;box-sizing:border-box;}
.story-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.story-avatar-init{width:100%;height:100%;border-radius:50%;background:var(--o-light);color:var(--o);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;}
.story-add-badge{position:absolute;bottom:-1px;right:-1px;width:20px;height:20px;border-radius:50%;background:var(--o);color:#fff;border:2.5px solid var(--w);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;}
.story-tile-label{font-size:11px;color:var(--n);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64px;}

.story-viewer{position:fixed;inset:0;background:#000;z-index:600;display:none;flex-direction:column;}
.story-viewer.open{display:flex;}
.story-progress-bar{display:flex;gap:4px;padding:10px 10px 0;}
.story-progress-seg{flex:1;height:2.5px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden;}
.story-progress-fill{height:100%;background:#fff;width:0%;}
.story-viewer-header{display:flex;align-items:center;gap:8px;padding:12px 12px 6px;position:relative;z-index:2;}
.story-viewer-content{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.story-viewer-content img{max-width:100%;max-height:100%;}
.story-text-card{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:40px;text-align:center;color:#fff;font-family:'DejaVu',sans-serif;font-size:26px;font-weight:700;line-height:1.4;word-break:break-word;}
.story-caption-overlay{position:absolute;left:0;right:0;bottom:24px;padding:0 20px;color:#fff;font-size:15px;font-weight:600;text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.5);}
.story-viewer-footer{padding:8px 16px 18px;}
.story-tap-zone{position:absolute;top:60px;bottom:60px;width:35%;z-index:1;}
.story-tap-left{left:0;}
.story-tap-right{right:0;}

/* ── SKELETON LOADERS ── */
/* Placeholder gris con la forma final del contenido en vez de texto
   "Cargando..." — misma duración real de espera, pero se percibe más
   rápido. Un solo shimmer por bloque .skel-wrap (no por cada .skel suelto)
   para que no se vea "parpadeo" desincronizado entre líneas. */
@keyframes skel-shimmer{0%{background-position:-120% 0;}100%{background-position:120% 0;}}
.skel{background:linear-gradient(90deg,var(--g1) 25%,var(--g2) 37%,var(--g1) 63%);background-size:400% 100%;animation:skel-shimmer 1.4s ease-in-out infinite;border-radius:6px;}
.skel-circle{border-radius:50%;flex-shrink:0;}
.skel-line{height:11px;border-radius:4px;}

.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:500;
  display:none;align-items:center;justify-content:center;flex-direction:column;
}
.lightbox.open{display:flex;}
.lightbox-img{
  max-width:95vw;max-height:82vh;object-fit:contain;
  border-radius:8px;touch-action:pinch-zoom;
  transition:transform .2s;cursor:zoom-in;
}
.lightbox-img.zoomed{transform:scale(2);cursor:zoom-out;}
.lightbox-close{
  position:absolute;top:16px;right:18px;
  color:white;font-size:28px;cursor:pointer;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.15);border-radius:50%;
}
.lightbox-nav{
  display:flex;gap:16px;margin-top:16px;
}
.lightbox-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);}
.lightbox-dot.on{background:var(--y);}
.lightbox-prev,.lightbox-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.lightbox-prev{left:12px;}.lightbox-next{right:12px;}

/* CHAT */
.chat-screen{display:none;flex-direction:column;height:100%;overflow:hidden;}
.chat-screen.active{display:flex;}
.chat-topbar{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;background:var(--o);flex-shrink:0;
}
.chat-av{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:white;flex-shrink:0;}
.chat-name{font-family:'DejaVu',sans-serif;font-size:15px;font-weight:700;color:white;}
.chat-status{font-size:11px;color:rgba(255,255,255,.8);}
.chat-messages{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:var(--cream);}
.msg{max-width:78%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.45;word-break:break-word;}
.msg-out{background:var(--o);color:white;align-self:flex-end;border-bottom-right-radius:4px;}
.msg-in{background:var(--w);color:var(--n);align-self:flex-start;border-bottom-left-radius:4px;border:1px solid var(--g1);}
.msg-time{font-size:10px;opacity:.6;margin-top:3px;text-align:right;}
.chat-input-row{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:var(--w);border-top:1px solid var(--g1);flex-shrink:0;
}
.chat-input{
  flex:1;padding:10px 14px;border-radius:22px;
  border:1.5px solid var(--g2);background:var(--g1);
  font-size:15px;font-family:'DM Sans',sans-serif;resize:none;
  max-height:80px;outline:none;
}
.chat-send{
  width:40px;height:40px;border-radius:50%;background:var(--o);
  border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
}
.chat-bubble-preview{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;background:var(--g1);border-radius:var(--r-sm);
  margin-bottom:12px;cursor:pointer;transition:background .15s;
}
.chat-bubble-preview:active{background:var(--g2);}
.chat-unread{
  width:18px;height:18px;border-radius:50%;background:var(--o);
  color:white;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* PULL TO REFRESH */
.ptr-indicator{
  display:flex;align-items:center;justify-content:center;
  height:0;overflow:hidden;transition:height .2s;
  color:var(--g4);font-size:13px;gap:8px;flex-shrink:0;
}
.ptr-indicator.show{height:44px;}
.ptr-spinner{width:18px;height:18px;border:2px solid var(--g2);border-top-color:var(--o);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* PHOTO COUNTER */
.photo-counter{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.55);color:white;font-size:11px;font-weight:600;padding:3px 8px;border-radius:10px;pointer-events:none;}

/* SEARCH CLEAR */
.search-clear{background:none;border:none;color:var(--g3);cursor:pointer;padding:0 2px;font-size:18px;line-height:1;display:none;}
.search-clear.show{display:block;}

/* SORT DROPDOWN */
.sort-wrap{display:flex;align-items:center;gap:6px;padding:0 16px 10px;}
.sort-label{font-size:12px;color:var(--g4);white-space:nowrap;}
.sort-select{width:auto;padding:6px 28px 6px 10px;font-size:13px;border-radius:20px;border:1.5px solid var(--g2);}

/* ── FILTER SHEET ── */
.flt-radio-btn{padding:7px 0;border-radius:10px;border:1.5px solid var(--g2);background:var(--w);font-size:12px;font-weight:600;color:var(--g4);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;text-align:center;}
.flt-radio-btn.on{border-color:var(--o);background:var(--o-light);color:var(--o);}
.flt-price-preset{padding:6px 12px;border-radius:20px;border:1.5px solid var(--g2);background:var(--w);font-size:12px;font-weight:600;color:var(--g4);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;-webkit-tap-highlight-color:transparent;}
.flt-price-preset:active{border-color:var(--o);background:var(--o-light);color:var(--o);}
.flt-price-preset.on{border-color:var(--o);background:var(--o-light);color:var(--o);}
/* Chip de filtro activo */
.filter-chip-active{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;background:var(--o-light);color:var(--o);border:1.5px solid var(--o-border);font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;flex-shrink:0;font-family:'DM Sans',sans-serif;}
.filter-chip-active svg{flex-shrink:0;}
/* Btn filtros activo */
#filterToggleBtn.active-filters{border-color:var(--o);background:var(--o-light);color:var(--o);}

/* EXPIRY BADGE */
.expiry-warn{background:#FEF9C3;color:#92400E;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;display:inline-block;margin-top:4px;}
.expiry-dead{background:var(--red-light);color:var(--red);font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;display:inline-block;margin-top:4px;}

/* RENEW BTN */
.renew-btn{background:var(--o-light);color:var(--o);border:1.5px solid var(--o-border);border-radius:var(--r-xs);padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;}

/* SKELETON */
.skeleton{background:linear-gradient(90deg,var(--g1) 25%,var(--g2) 50%,var(--g1) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* SOLD BADGE */
.sold-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;border-radius:20px 20px 0 0;}
.sold-tag{background:#DC2626;color:white;font-family:'DejaVu',sans-serif;font-size:13px;font-weight:700;padding:6px 16px;border-radius:20px;letter-spacing:.5px;}
.pcard{position:relative;}

/* NEW BADGE */
.badge-new{position:absolute;top:8px;left:8px;background:var(--n);color:white;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;letter-spacing:.3px;z-index:2;}
.badge-sold-card{position:absolute;top:8px;left:8px;background:#DC2626;color:white;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;letter-spacing:.3px;z-index:2;}
.badge-pinned{position:absolute;top:8px;right:8px;background:var(--blue);color:white;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;letter-spacing:.3px;z-index:2;}

/* RECOMENDACIONES: strip horizontal de productos relacionados */
.rel-prod-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.rel-prod-row::-webkit-scrollbar{display:none;}
.rel-prod-card{flex-shrink:0;width:118px;cursor:pointer;}
.rel-prod-img{width:118px;height:118px;border-radius:16px;object-fit:cover;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:32px;}
.rel-prod-name{font-size:12px;font-weight:600;margin-top:6px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.rel-prod-price{font-size:12.5px;font-weight:700;color:var(--o);}

/* RECOMENDACIONES: strip horizontal de vendedores sugeridos (Perfiles) */
.rec-seller-row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.rec-seller-row::-webkit-scrollbar{display:none;}
.rec-seller-card{flex-shrink:0;width:96px;text-align:center;cursor:pointer;}
.rec-seller-av{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--o-light);color:var(--o);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;margin:0 auto;}
.rec-seller-name{font-size:12px;font-weight:600;margin-top:6px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.rec-seller-sub{font-size:10px;color:var(--g4);margin-top:2px;display:flex;justify-content:center;}

/* VERIFICATION BADGE */
.verified-badge{display:inline-flex;align-items:center;gap:3px;background:var(--blue-light);color:var(--blue);font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.3px;}
/* Chip "Verificarme" — antes era un tercer botón junto a Editar/Compartir;
   ahora vive junto al nombre (mismo lugar donde aparecería el badge de
   verificado una vez aprobado), para dejar solo 2 acciones principales. */
.verify-chip{display:inline-flex;align-items:center;gap:3px;background:var(--blue-light);color:var(--blue);font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.3px;cursor:pointer;transition:transform .15s;}
.verify-chip:active{transform:scale(.94);}
.verified-badge svg{flex-shrink:0;}
.verified-biz{background:#EEF2FF;color:#4338CA;}
/* Insignia "Negocio Fundador": estilo premium dorado, distinto del azul
   genérico de "verificado" — degradado sutil + texto oscuro para
   contraste, en vez de negro plano o dorado sobre dorado. */
.verified-badge-gold{background:linear-gradient(135deg,#FDE68A,#F5C542);color:#7A5B00;box-shadow:0 1px 3px rgba(180,131,0,.25);}

/* RATING CHIP — score numérico visible (no solo la insignia de
   verificado). Gris neutro a propósito: no compite visualmente con el
   dorado de "Fundador" ni el azul de "Verificado", es información aparte
   (reputación de transacciones vs. identidad confirmada). */
.rating-chip{display:inline-flex;align-items:center;gap:2px;background:var(--g1);color:var(--n);font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.2px;white-space:nowrap;}

/* MSGS UNREAD BADGE */
.bnav-msgs-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;}
.msgs-badge{position:absolute;top:-4px;right:-2px;min-width:16px;height:16px;border-radius:8px;background:var(--o);color:white;font-size:9px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 3px;}
.msgs-badge.show{display:flex;}
.chat-unread-row{background:var(--o-light)!important;}
.chat-unread-label{font-weight:700!important;}

/* NOTIFICATION TOAST (mensaje nuevo) */
#msgToast{position:fixed;top:60px;left:50%;transform:translateX(-50%) translateY(-10px);background:var(--n2);color:var(--w);padding:10px 16px;border-radius:12px;font-size:13px;font-weight:500;opacity:0;transition:all .3s;pointer-events:none;z-index:998;max-width:88vw;display:flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25);}
#msgToast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#msgToast .mt-av{width:28px;height:28px;border-radius:50%;background:var(--o);color:white;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

.prod-type-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:1.5px solid var(--g2);border-radius:var(--r-sm);cursor:pointer;font-size:11px;text-align:center;background:var(--w);transition:all .15s;-webkit-tap-highlight-color:transparent;user-select:none;}
.prod-type-btn span:first-child{font-size:22px;line-height:1;}
.prod-type-btn.selected{background:var(--o-light);border-color:var(--o);color:var(--o);font-weight:600;}

/* STARS */
.stars{display:flex;gap:3px;align-items:center;}
.star{font-size:20px;cursor:pointer;transition:transform .1s;color:var(--g2);}
.star.on{color:#F59E0B;}
.star:active{transform:scale(.85);}
.rating-summary{display:flex;align-items:center;gap:8px;padding:12px 0;}
.rating-avg{font-family:'DejaVu',sans-serif;font-size:28px;font-weight:700;color:var(--n);}
.rating-count{font-size:13px;color:var(--g4);}
.review-card{padding:14px 0;border-bottom:1px solid var(--g1);}
.review-card:last-child{border-bottom:none;}
.review-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.review-av{width:32px;height:32px;border-radius:50%;background:var(--o);color:white;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.review-name{font-size:14px;font-weight:500;}
.review-date{font-size:11px;color:var(--g4);margin-left:auto;}
.review-text{font-size:14px;color:var(--g5);line-height:1.6;}
.review-stars{display:flex;gap:2px;margin-bottom:4px;}
.rstar{font-size:13px;color:#F59E0B;}
.rstar.off{color:var(--g2);}

/* FAQ */
.faq-item{border-bottom:1px solid var(--g1);}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;cursor:pointer;font-weight:500;font-size:15px;}
.faq-arrow{transition:transform .2s;flex-shrink:0;color:var(--g3);}
.faq-arrow.open{transform:rotate(180deg);}
.faq-a{font-size:14px;color:var(--g5);line-height:1.7;padding:0 18px 16px;display:none;}
.faq-a.open{display:block;}

/* IMPORT CATALOG */
.import-zone{border:2px dashed var(--o-border);background:var(--o-light);border-radius:var(--r);padding:24px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:16px;}
.import-zone:hover{border-color:var(--o);}
.import-zone.dragover{border-color:var(--o);transform:scale(.99);}
.import-preview{background:var(--g1);border-radius:var(--r-sm);padding:12px;margin-bottom:12px;max-height:200px;overflow-y:auto;}
.import-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--g2);font-size:13px;}
.import-row:last-child{border-bottom:none;}
.import-ok{color:var(--green);font-size:11px;font-weight:600;}
.import-err{color:var(--red);font-size:11px;font-weight:600;}


/* ══ FLOATING PILL NAV — colapsable ══ */
.topnav{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:300;
  pointer-events:none;
  width:calc(100% - 24px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
}

/* ── Botón toggle encima del FAB ── */
.tnav-toggle{
  pointer-events:all;
  cursor:pointer;
  width:34px;height:20px;
  background:var(--w);
  border:1px solid var(--g1);
  border-radius:20px;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;
  transition:transform .4s cubic-bezier(.34,1.3,.64,1), background .2s;
  -webkit-tap-highlight-color:transparent;
}
.tnav-toggle.on{
  transform:rotate(180deg);
  background:var(--o-light);
  border-color:var(--o-border);
}
.tnav-toggle svg{ transition:stroke .2s; }
.tnav-toggle.on svg{ stroke:var(--o); }
#app.dark .tnav-toggle{ background:#1E1E1E; border-color:var(--g2); }
#app.dark .tnav-toggle.on{ background:#2a1500; border-color:#7a3000; }

/* ── La píldora principal ── */
.topnav-inner{
  display:flex;align-items:center;justify-content:center;
  background:var(--w);
  border-radius:40px;
  padding:6px;
  box-shadow:0 4px 20px rgba(0,0,0,.14), 0 1px 4px rgba(0,0,0,.08);
  border:1px solid var(--g1);
  pointer-events:all;
  overflow:hidden;
  /* Colapsado: ancho solo del FAB */
  width:58px;
  transition:width .48s cubic-bezier(.34,1.2,.64,1);
}
.topnav-inner.on{
  width:100%;
  padding:5px 6px;
}
#app.dark .topnav-inner{
  background:#1E1E1E;
  border-color:var(--g2);
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}

/* ── Ítems del nav (colapsados: ancho 0) ── */
.topnav-item{
  flex:0 0 0px;
  overflow:hidden;
  min-width:0;
  opacity:0;
  pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  cursor:pointer;color:var(--g3);
  border-radius:28px;
  -webkit-tap-highlight-color:transparent;
  transition:
    flex-basis .46s cubic-bezier(.34,1.2,.64,1),
    opacity .15s ease,
    color .15s,
    background .15s;
}
.topnav-item span{ font-size:9px;font-weight:600;letter-spacing:.1px;white-space:nowrap; }
.topnav-item:active{ transform:scale(.92); }
.topnav-item.on{ color:var(--o); }
/* Íconos ligeramente más grandes (antes 20px) — el indicador de activo
   (pastilla naranja) ya existe más abajo en .topnav-inner.on .topnav-item.on,
   esto solo mejora la presencia general de los íconos. */
.topnav-item svg{width:22px;height:22px;}

/* ── Ítems expandidos ── */
.topnav-inner.on .topnav-item{
  flex:1 1 0px;
  opacity:1;
  pointer-events:all;
  padding:7px 4px;
  transition:
    flex-basis .46s cubic-bezier(.34,1.2,.64,1),
    opacity .32s ease .22s,
    color .15s,
    background .15s;
}
.topnav-inner.on .topnav-item.on{
  background:var(--o-light);
  border-radius:28px;
}

/* ── FAB (siempre visible) ── */
.topnav-fab{
  width:44px;height:44px;border-radius:50%;background:var(--o);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 3px 12px rgba(255,77,0,.5);
  transition:transform .15s, box-shadow .15s;
  flex-shrink:0;pointer-events:all;
}
.topnav-fab:active{ transform:scale(.88);box-shadow:0 1px 6px rgba(255,77,0,.4); }

/* Ocultar bnav original */
.bnav{display:none !important;}
/* Padding en scrolls para que el contenido no quede tapado */
.screen > .scroll{padding-bottom:88px;}
.topbar{z-index:5;}
.home-nav{display:none;}
#novedadesSlider::-webkit-scrollbar{display:none;}