/* MARCA-DE-PRUEBA-30JUL-B */
/* Reutiliza las variables de style.css */

.app-header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--tarjeta);border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:20;}
@media(min-width:900px){ .app-header{display:none;} }
.app-header .logo-mobile{height:26px;width:auto;flex-shrink:0;}
.app-header .logo-mobile svg{height:100%;width:auto;display:block;}
.app-header .searchbar{flex:1;display:flex;align-items:center;gap:8px;background:var(--fondo);border:1px solid var(--borde);border-radius:10px;padding:9px 12px;color:var(--texto-sec);font-size:13px;}
.app-header .icon-btn{width:34px;height:34px;border-radius:10px;background:var(--fondo);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--morado);}

.hero{padding:20px 16px 8px;}
.hero h1{color:var(--morado-oscuro);font-size:26px;}
.hero .accent{color:var(--mostaza);}
.hero p.sub{margin-top:10px;font-size:14px;color:var(--texto-sec);}
@media(min-width:900px){ .hero{padding:40px 28px 24px;} .hero h1{font-size:40px;} .hero p.sub{font-size:18px;max-width:520px;} }

.chiprow{display:flex;gap:8px;margin-top:14px;overflow-x:auto;padding-bottom:4px;}
.hero-circles{display:flex;gap:20px;margin-top:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;}
.hero-circles::-webkit-scrollbar{display:none;}
.suggest-row{display:flex;align-items:center;gap:10px;padding:10px 12px;text-decoration:none;color:var(--texto);border-bottom:1px solid var(--borde);}
.suggest-row:last-child{border-bottom:none;}
.suggest-row:hover, .suggest-row.suggest-row-active{background:var(--morado-suave);}
.suggest-cover{width:28px;height:38px;object-fit:cover;border-radius:4px;flex-shrink:0;background:var(--fondo);}
.suggest-icon{width:28px;height:38px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.suggest-icon-person{background:var(--morado-suave);border-radius:50%;width:28px;height:28px;}
.suggest-text{font-size:13px;line-height:1.4;}
.suggest-tag{color:var(--texto-sec);font-weight:400;font-size:11.5px;}
.suggest-sub{color:var(--texto-sec);font-size:11.5px;}
.prod-status-circles{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px;}
.hero-circle{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--texto);font-size:11.5px;font-weight:600;text-align:center;width:70px;flex-shrink:0;scroll-snap-align:start;}
.hero-circle-dot{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 10px rgba(43,36,48,0.15);color:#fff;flex-shrink:0;}
.hero-circle.active .hero-circle-dot{box-shadow:0 0 0 3px var(--morado), 0 4px 10px rgba(43,36,48,0.15);}
.hero-circle.active{color:var(--morado);}
.chip{white-space:nowrap;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid var(--borde);background:var(--tarjeta);color:var(--texto);}
.chip.active{background:var(--mostaza);border-color:var(--mostaza);color:#4A3512;}
.chip .icon-wrap{display:flex;color:inherit;}

.section-title{display:flex;justify-content:space-between;align-items:baseline;margin:20px 16px 12px;}
@media(min-width:900px){ .section-title{margin:36px 28px 18px;} }
.see-all{font-size:13px;font-weight:600;color:var(--morado);}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 16px calc(90px + env(safe-area-inset-bottom));}
@media(min-width:640px){ .grid{grid-template-columns:repeat(3,1fr);} }
@media(min-width:900px){ .grid{grid-template-columns:repeat(4,1fr);gap:20px;padding:0 28px 40px;max-width:1200px;margin:0 auto;} }
@media(min-width:1300px){ .grid{grid-template-columns:repeat(5,1fr);max-width:1440px;} }

/* Carrusel de "Destacados" — se desliza con el dedo, sin flechas ni
   puntos. El ancho de cada tarjeta va en porcentaje del propio
   contenedor (nunca en píxeles fijos), así se adapta solo a cualquier
   pantalla. A propósito se corta la siguiente tarjeta por la mitad en
   el borde derecho — ese "asomo" es lo que le dice a alguien que hay
   más deslizando, sin tener que explicarlo con texto. */
.destacados-carousel{
  display:flex; gap:12px; overflow-x:auto; padding:0 16px 4px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.destacados-carousel::-webkit-scrollbar{ display:none; }
.destacados-carousel .card{ flex:0 0 auto; width:42%; scroll-snap-align:start; }
@media(min-width:640px){ .destacados-carousel .card{ width:30%; } }
@media(min-width:900px){
  .destacados-carousel{ padding:0 28px 4px; max-width:1200px; margin:0 auto; gap:20px; }
  .destacados-carousel .card{ width:22%; }
}
@media(min-width:1300px){
  .destacados-carousel{ max-width:1440px; }
  .destacados-carousel .card{ width:18%; }
}

.card{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;}
.cover-wrap{position:relative;aspect-ratio:2/3;background:var(--fondo);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px;}
@media(min-width:900px){ .cover-wrap{aspect-ratio:2/3;} }
.cover-wrap img{width:100%;height:100%;object-fit:contain;border-radius:6px;}
.cover-collage{width:100%;height:100%;display:grid;gap:3px;}
.cover-collage img{width:100%;height:100%;object-fit:cover;background:#fff;border-radius:4px;}
.cover-collage-2{grid-template-columns:1fr 1fr;}
.cover-collage-3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
.cover-collage-3 img:first-child{grid-row:1/3;}
.cover-collage-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
.cover-wrap svg{width:34px;height:34px;color:var(--morado);opacity:.5;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;padding:4px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em;}
.badge.venta{background:var(--mostaza-suave);color:#8A5B10;}
.badge.donacion{background:var(--terracota-suave);color:#8C4A31;}
.badge.distancia{position:absolute;bottom:8px;right:8px;top:auto;left:auto;background:rgba(43,36,48,0.72);color:#fff;font-size:10px;font-weight:600;padding:3px 7px;border-radius:999px;text-transform:none;}
/* Badge protagonista, siempre centrado arriba, uno solo a la vez */
.badge-top{top:8px;left:50%;transform:translateX(-50%);white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,0.15);}
.seller-actions-menu{position:relative;}
.seller-actions-btn{background:var(--tarjeta);border:1px solid var(--borde);border-radius:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--texto);}
.seller-actions-dropdown{display:none;position:absolute;top:42px;right:0;background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;box-shadow:0 8px 24px rgba(43,36,48,0.15);min-width:220px;z-index:30;overflow:hidden;}
.seller-actions-dropdown.open{display:block;}
.seller-actions-dropdown button{display:block;width:100%;text-align:left;padding:12px 16px;font-size:14px;background:none;border:none;border-bottom:1px solid var(--borde);color:var(--texto);}
.seller-actions-dropdown button:last-child{border-bottom:none;}
.seller-actions-dropdown button.danger{color:var(--terracota);}
.card-title-row{display:flex;align-items:flex-start;gap:6px;}
.card-title-row .card-title{flex:1;}
.card-fav{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; border:none; background:none;
  display:flex; align-items:center; justify-content:center; color:var(--terracota); padding:0; margin-top:2px;
}
.card-fav svg{ width:18px; height:18px; }
.card-body{padding:14px 10px 12px;display:flex;flex-direction:column;gap:4px;}
.card-title{font-size:13px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;}
.card-author{font-size:12px;color:var(--texto-sec);min-height:1.3em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Precio y estado siempre en la misma línea, misma altura, para que todas las tarjetas del grid queden simétricas tengan o no precio tachado */
.card-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:4px;min-height:26px;gap:6px;}
.card-price-wrap{display:flex;flex-direction:column;gap:0;min-width:0;}
.card-price{font-size:19px;font-weight:800;color:var(--morado);white-space:nowrap;line-height:1.15;}
.card-price.gratis{color:var(--verde);}
.card-price-old{font-size:11.5px;color:var(--texto-sec);text-decoration:line-through;font-weight:600;white-space:nowrap;line-height:1.3;}
.cond-pill{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--fondo);color:var(--texto-sec);border:1px solid var(--borde);white-space:nowrap;flex-shrink:0;}

.empty-state{padding:40px 24px;text-align:center;color:var(--texto-sec);}
.empty-state a{color:var(--morado);font-weight:600;}

/* categoría */
.cat-header{background:var(--fondo);color:var(--texto);padding:16px 16px 10px;}
.cat-header .breadcrumb{color:var(--texto-sec);}
.cat-header .breadcrumb a{color:var(--texto-sec);}
.cat-header p{margin-top:4px;color:var(--texto-sec);font-size:13px;}
@media(min-width:900px){ .cat-header{padding:36px 28px;} }
.breadcrumb{font-size:12px;color:var(--texto-sec);margin-bottom:8px;}
.breadcrumb a{color:var(--morado);font-weight:600;}
.breadcrumb a{color:#D8CBF2;}
.breadcrumb b{color:#fff;}
.toolbar-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.toolbar-controls{display:flex;flex-wrap:wrap;gap:8px;width:100%;}
.toolbar-pill{background:var(--tarjeta);border:1px solid var(--borde);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:600;color:var(--morado);text-decoration:none;white-space:nowrap;}
@media(min-width:640px){
  .toolbar-wrap{flex-direction:row;justify-content:space-between;align-items:center;}
}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin:14px 16px 4px;gap:8px;}
@media(min-width:900px){ .toolbar{margin:0 0 16px;} .cat-body{padding:28px 28px 0;} }
.toolbar .count{font-size:13px;color:var(--texto-sec);flex-shrink:0;}
.sortsel{font-size:12px;font-weight:600;border:1px solid var(--borde);border-radius:10px;padding:7px 10px;background:var(--tarjeta);color:var(--texto);}

/* producto */
.prod-wrap{padding:0 0 calc(90px + env(safe-area-inset-bottom));}
@media(min-width:900px){ .prod-wrap{display:flex;gap:40px;padding:36px 28px 40px;align-items:flex-start;max-width:1100px;margin:0 auto;} }
.gallery{padding:16px;}
@media(min-width:900px){ .gallery{width:380px;flex-shrink:0;padding:0;} }
.gallery-main{position:relative;height:34vh;background:var(--fondo);border:1px solid var(--borde);border-radius:18px;overflow:hidden;margin:0 auto;}
@media(min-width:900px){ .gallery-main{height:570px;margin:0;} }
.gallery-scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;width:100%;height:100%;scrollbar-width:none;}
.gallery-scroll::-webkit-scrollbar{display:none;}
.gallery-slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;padding:14px;cursor:zoom-in;box-sizing:border-box;}
.gallery-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;object-position:center;border-radius:8px;}
.gallery-slide svg{width:56px;height:56px;color:var(--morado);opacity:.5;}
.gallery-counter{position:absolute;bottom:10px;right:10px;background:rgba(43,36,48,0.68);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;pointer-events:none;}
.lightbox-scroll{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.lightbox-scroll::-webkit-scrollbar{display:none;}
.lightbox-slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;}
.lightbox-slide img{max-width:92vw;max-height:78vh;object-fit:contain;border-radius:8px;}
.scan-note{display:flex;gap:8px;align-items:flex-start;background:var(--mostaza-suave);border-radius:12px;padding:11px 13px;margin-top:12px;font-size:12px;color:#7A5A16;}

.prod-info{padding:0 16px;}
@media(min-width:900px){ .prod-info{flex:1;min-width:320px;padding:0;} }
.prod-badges{display:flex;gap:8px;margin-bottom:10px;}
.prod-title{font-size:22px;line-height:1.25;}
@media(min-width:900px){ .prod-title{font-size:28px;} }
.prod-author{font-size:15px;color:var(--texto-sec);margin-top:4px;}
.prod-meta{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:16px;padding:14px 0;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);}
.tech-specs-open{margin-top:16px;padding-top:14px;border-top:1px solid var(--borde);}
.tech-specs-open .prod-meta{margin-top:4px;border-top:none;padding-top:0;}
.meta-item{font-size:11px;color:var(--texto-sec);}
.meta-item b{display:block;font-size:13px;color:var(--texto);font-weight:600;margin-top:2px;}
.prod-description-card{margin-top:16px;background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:16px;}

/* Características en filas completas (estilo "ficha de producto" tipo
   Amazon) — cada dato ocupa su propia línea con una fina separación, en
   vez del grid con salto de línea que había antes (con 7-8 datos
   distintos, algunos valores largos como el género o la editorial
   rompían la alineación de forma poco predecible en móvil). */
.spec-rows{margin-top:16px;background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;overflow:hidden;}
.spec-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--borde);}
.spec-row:last-child{border-bottom:none;}
.spec-row-label{font-size:12.5px;color:var(--texto-sec);flex-shrink:0;}
.spec-row-value{font-size:13px;font-weight:600;color:var(--texto);text-align:right;}
.spec-row-value a{color:var(--morado);text-decoration:underline;font-weight:600;}
.prod-description-card h3{font-size:13.5px;color:var(--texto-sec);font-weight:700;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:8px;}
.prod-description{font-size:14.5px;line-height:1.6;color:var(--texto);white-space:pre-line;}
.price-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;}
.price-big{font-size:42px;font-weight:800;color:var(--morado-oscuro);line-height:1;}
.price-big.gratis{color:var(--verde);}
.price-hint{font-size:13px;color:var(--texto-sec);}
.cond-box{margin-top:14px;background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;}
.cond-box .cond-name{font-weight:700;font-size:14.5px;}
.cond-box .cond-desc{font-size:13.5px;color:var(--texto-sec);margin-top:2px;}
.seller-card{margin-top:18px;background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:14px;display:flex;align-items:center;gap:12px;}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--mostaza);color:#4A3512;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.seller-name{font-weight:600;font-size:14px;}
.seller-loc{font-size:12px;color:var(--texto-sec);margin-top:2px;}
.cta-row{display:flex;gap:10px;margin-top:18px;}
.btn-chat{flex:1;background:var(--morado);color:#fff;font-weight:600;font-size:14px;padding:13px 18px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-outline{background:#fff;border:1.5px solid var(--morado);color:var(--morado);font-weight:600;padding:13px 16px;border-radius:14px;}
.btn-report{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;margin-top:14px;font-size:13px;font-weight:700;color:#fff;background:var(--terracota);border-radius:10px;padding:11px;}
.prod-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.prod-title-row .prod-title{flex:1;}
.prod-fav{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--borde);background:none;display:flex;align-items:center;justify-content:center;color:var(--terracota);margin-top:2px;}
.prod-fav svg{width:18px;height:18px;}

/* barra inferior mobile */
.tabbar{position:fixed;bottom:0;left:0;right:0;background:var(--tarjeta);border-top:1px solid var(--borde);display:flex;z-index:30;padding:8px 4px calc(8px + env(safe-area-inset-bottom));}
@media(min-width:900px){ .tabbar{display:none;} body{padding-bottom:0 !important;} }

.topnav-desktop{display:none;}
@media(min-width:900px){
  .topnav-desktop{
    display:block; position:sticky; top:0; z-index:40; background:var(--tarjeta);
    border-bottom:1px solid var(--borde); padding:0 28px;
  }
  .topnav-inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:28px; height:64px; }
  .topnav-logo{ display:flex; align-items:center; color:var(--morado); margin-right:12px; }
  .topnav-logo svg{ height:32px; width:auto; }
  .topnav-search{ display:flex; align-items:center; gap:8px; background:var(--fondo); border:1px solid var(--borde); border-radius:999px; padding:8px 14px; width:280px; }
  .topnav-search input{ border:none; background:none; outline:none; font-family:'Poppins',sans-serif; font-size:13px; width:100%; }
  .topnav-link{ color:var(--texto); font-weight:600; font-size:14px; position:relative; }
  .topnav-link:hover{ color:var(--morado); }
  .topnav-badge{ position:absolute; top:-6px; right:-14px; min-width:16px; height:16px; padding:0 3px; border-radius:999px; background:var(--terracota); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .topnav-publish{ margin-left:auto; background:var(--morado); color:#fff; font-weight:700; font-size:14px; padding:10px 18px; border-radius:10px; }
  .topnav-publish:hover{ background:var(--morado-oscuro); }
}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--texto-sec);font-size:10px;font-weight:600;padding:4px 0;}
.tab-item svg{width:22px;height:22px;}
.tab-item.active{color:var(--morado);}
.tab-item.fab .fab-circle{width:44px;height:44px;border-radius:50%;background:var(--mostaza);display:flex;align-items:center;justify-content:center;margin-top:-22px;box-shadow:0 6px 14px rgba(217,164,65,0.45);}
.tab-item.fab .fab-circle svg{color:#4A3512;width:22px;height:22px;}

/* Lista tipo "menú de ajustes" reutilizada en profile.php y account.php —
   antes cada página tenía su propia copia casi idéntica sin ningún límite
   de ancho en escritorio, estirándose de punta a punta de la pantalla */
.profile-menu{ margin:20px 16px; background:var(--tarjeta); border-radius:16px; overflow:hidden; border:1px solid var(--borde); }
.profile-menu a, .profile-menu label{
  display:flex; align-items:center; gap:12px; padding:16px; color:var(--texto); border-bottom:1px solid var(--borde); font-size:15px; text-decoration:none;
}
.profile-menu a:last-child, .profile-menu label:last-child{ border-bottom:none; }
.profile-menu .chev, .profile-menu a .chev{ margin-left:auto; color:var(--texto-sec); }
.profile-menu.danger a{ color:var(--terracota); }
.profile-menu a .icon{ color:var(--morado); display:flex; }
.profile-menu a .label{ flex:1; font-weight:600; }
.profile-menu a .count{ color:var(--texto-sec); font-size:13px; }
@media(min-width:900px){ .profile-menu{ max-width:560px; margin:20px auto; } }

/* Escáner de código de barras — mismo marco guía y aviso en TODOS los
   sitios donde se escanea (publicar, mi biblioteca, buscar reseñas,
   perfil de vendedor, tienda PRO), aunque cada uno lo muestre dentro de
   un contenedor distinto (paso embebido en publish.php, modal a pantalla
   completa en el resto) */
.card-box{
  background:var(--tarjeta); border:1px solid var(--borde); border-radius:16px;
  padding:20px; margin-bottom:16px;
}
.scan-frame{
  position:relative; aspect-ratio:1/1; background:#000; border-radius:16px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.scan-frame video{ width:100%; height:100%; object-fit:cover; }
.manual-toggle{ text-align:center; margin-top:14px; font-size:13px; color:var(--morado); font-weight:600; cursor:pointer; }
.scan-guide{
  position:absolute; inset:14% 8%; border:3px dashed rgba(255,255,255,0.7); border-radius:8px; pointer-events:none;
  transition:inset .2s;
}
.scan-hint{
  position:absolute; bottom:12px; left:0; right:0; text-align:center; color:#fff; font-size:12px;
  background:rgba(0,0,0,0.4); padding:6px; margin:0 12px; border-radius:8px;
}
.scan-camera-gate{
  position:absolute; inset:0; background:rgba(43,36,48,0.85); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:16px; z-index:2;
}
.scan-camera-gate .box{ background:var(--tarjeta); border-radius:16px; padding:20px; text-align:center; max-width:280px; }
.scan-camera-gate .box p{ font-size:13px; color:var(--texto-sec); margin-bottom:14px; }
.scan-camera-gate .box .btn-accept{ width:100%; margin-bottom:8px; background:var(--morado); color:#fff; border:none; border-radius:14px; padding:13px; font-weight:600; font-size:14px; }
.scan-camera-gate .box .btn-skip{ background:none; border:none; color:var(--morado); font-size:12px; font-weight:600; }
.scan-manual-link{
  display:none; position:absolute; bottom:16px; left:16px; right:16px; margin:0; text-align:center;
  font-size:13px; font-weight:600; color:#fff; text-decoration:underline; cursor:pointer; z-index:2;
}