/* 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-texto);}
.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:14px;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));}
.grid > *{min-width:0;} /* ningún texto largo ensancha una columna (antes, en Mis ventas, la página se salía de lado) */
@media(min-width:640px){ .grid{grid-template-columns:repeat(3,1fr);} }
/* Escritorio: tarjetas más contenidas (antes 5 columnas a lo ancho de toda
   la pantalla, con portadas enormes) y siempre alineadas con la barra
   superior (mismo ancho máximo de 1200px) */
@media(min-width:900px){ .grid{grid-template-columns:repeat(5,1fr);gap:18px;padding:0 28px 40px;max-width:1200px;margin:0 auto;box-sizing:border-box;} }
@media(min-width:1200px){ .grid{grid-template-columns:repeat(6,1fr);} }

/* 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:1200px){
  .destacados-carousel .card{ width:15.5%; }
}

.card{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-width:0;} /* min-width:0: un texto largo sin cortes no ensancha la columna del grid */
.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;} }

/* Galería deslizable en la tarjeta del grid — scroll-snap nativo, sin
   ninguna librería. El gesto de deslizar (con movimiento) no dispara la
   navegación del <a> que envuelve la tarjeta, solo el toque corto lo
   hace — es el comportamiento nativo del navegador para gestos táctiles,
   no hace falta ningún JS para diferenciarlos. */
.cover-gallery{
  position:absolute; inset:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.cover-gallery::-webkit-scrollbar{ display:none; }
.cover-gallery img{
  flex:0 0 100%; width:100%; height:100%; object-fit:contain; scroll-snap-align:start; padding:10px 10px 22px;
}
.cover-dots{
  position:absolute; bottom:12px; left:auto; right:10px; display:flex; justify-content:flex-end; gap:4px; z-index:1; /* a la derecha: a la izquierda va el estado del libro */
}
.cover-dots span{
  width:5px; height:5px; border-radius:50%; background:rgba(43,36,48,0.35); box-shadow:0 0 0 1px rgba(255,255,255,0.6); transition:background .15s;
}
.cover-dots span.active{ background:var(--morado); width:14px; border-radius:3px; }
.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:11px;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-texto);}
.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-texto); padding:0; margin-top:2px;
  position:relative; /* el icono se ve igual de pequeño, pero el área táctil es de 44px (ver ::after) */
}
.card-fav::after{ content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%); border-radius:50%; }
.card-fav svg{ width:18px; height:18px; }
.card-body{padding:14px 10px 12px;display:flex;flex-direction:column;gap:4px;flex:1;}
.card-author{margin-bottom:6px;} /* la fila de distancia/en persona se va siempre al fondo de la tarjeta: todas alineadas aunque los títulos tengan distinto largo */
.card-title{font-size:13.5px;font-weight:700;color:var(--texto);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-0.005em;} /* sin altura mínima: si el título ocupa 1 línea, el autor va justo debajo (antes quedaba un hueco) */
.card-author{font-size:12px;font-weight:400;color:var(--texto-sec);min-height:1.3em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-2px;}
/* Tarjeta: precio arriba (lo que más pesa), título, autor y abajo los datos
   prácticos pequeños con icono (distancia + venta en persona) */
.card-top-row{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:26px;}
.card-top-row .card-price-wrap{flex-direction:row;align-items:baseline;gap:6px;flex-wrap:wrap;}
.card-pro-label{font-size:11.5px;color:var(--morado);font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.card-pro-row{display:flex;align-items:center;gap:6px;min-width:0;}
/* Insignia PRO: píldora morada con icono de librería o de autor. Va en el
   cuerpo de la tarjeta, junto al tipo de vendedor: así nunca tapa la
   portada ni compite con el badge protagonista de arriba. */
.pro-pill{display:inline-flex;align-items:center;gap:3px;flex-shrink:0;background:var(--morado);color:#fff;font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.04em;padding:3px 7px 3px 5px;border-radius:999px;box-shadow:0 1px 3px rgba(43,36,48,0.22);white-space:nowrap;}
.pro-pill-ic{display:inline-flex;line-height:0;}
.pro-pill-ic svg{width:11px;height:11px;}
.pro-pill-ic svg *{stroke-width:2.2;}
/* Portada que no ha cargado: mismo aspecto que una tarjeta sin foto */
.cover-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--morado);}
.cover-gallery .cover-ph{flex:0 0 100%;}
.card-meta-place{min-width:0;}
.card-meta-place > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px;}
.card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:auto;padding-top:7px;border-top:1px solid var(--borde);font-size:12px;color:var(--texto-sec);font-weight:500;min-height:14px;}
.card-meta-item{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;}
.card-meta-item svg{flex-shrink:0;color:var(--texto-sec);}
.card-meta-inperson{color:var(--verde-texto, #1E7A46);font-weight:600;}
.card-meta-inperson svg{color:currentColor;}
/* Estado del libro sobre la portada, abajo a la izquierda */
.card-cond{position:absolute;left:8px;bottom:8px;z-index:2;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,0.94);color:var(--texto);box-shadow:0 1px 4px rgba(43,36,48,0.18);white-space:nowrap;}
.card-cond-new{background:var(--morado);color:#fff;}
/* 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-texto);}
.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:11.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;}
/* Los enlaces con aspecto de botón mantienen su propio color de texto (antes
   ".empty-state a" les ponía texto morado sobre fondo morado → ilegible) */
.empty-state a.btn-chat,.empty-state a.btn-next,.card-box a.btn-chat{color:#fff;}

/* 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;}
/* (antes aquí había colores pensados para una cabecera oscura antigua —
   lila claro y blanco sobre fondo claro, prácticamente invisibles) */
.breadcrumb b{color:var(--texto);font-weight:600;}
.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;flex-wrap:wrap;gap:40px;padding:36px 28px 40px;align-items:flex-start;max-width:1100px;margin:0 auto;box-sizing:border-box;} }
/* "Más como esto" va debajo, a lo ancho — antes caía como una tercera
   columna estrechísima al lado de la ficha */
@media(min-width:900px){
  .prod-wrap > .prod-related-title{flex:0 0 100%;padding:8px 0 0 !important;}
  .prod-wrap > .prod-related-grid{flex:0 0 100%;padding:0 !important;max-width:none;margin-top:-28px;}
  .prod-info{max-width:560px;}
}
.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:12px;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-texto);}
.price-hint{font-size:13px;color:var(--texto-sec);}
.inperson-box{margin-top:14px;display:flex;gap:10px;align-items:flex-start;background:#EAF3EC;border:1px solid #CFE3D5;border-radius:14px;padding:12px 14px;}
.inperson-icon{width:34px;height:34px;border-radius:50%;background:#fff;color:#2F6B45;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.inperson-title{font-weight:700;font-size:14.5px;color:#2F6B45;}
.inperson-desc{font-size:13px;color:var(--texto-sec);margin-top:2px;line-height:1.45;}
.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;border:none;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:5px;text-align:center;margin:18px auto 0;width:max-content;min-height:44px;font-size:12px;font-weight:500;color:var(--texto-sec);background:none;padding:0 10px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--borde);}
.btn-report:hover{color:var(--terracota-texto);}
.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-texto);margin-top:2px;}
.prod-fav svg{width:18px;height:18px;}
.prod-fav{position:relative;}
.prod-fav::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);} /* área táctil de 44px sin agrandar el botón */
/* Avisos dentro de la ficha (reservado, anuncio no público) */
.listing-notice{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.45;}
.listing-notice b{display:block;font-size:14px;}
.listing-notice span{display:block;}
.listing-notice .eti-ic{margin-top:1px;}
.listing-notice-reserved{background:#2B2430;color:#fff;}
.listing-notice-reserved span{color:rgba(255,255,255,0.82);}
.listing-notice-muted{background:var(--fondo);border:1px solid var(--borde);color:var(--texto-sec);margin:0 0 12px;}
.buy-bar-thumb-ph{display:flex;align-items:center;justify-content:center;color:var(--morado);}
.gallery-slide .cover-ph{color:var(--morado);opacity:.5;}

/* 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:16px; 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-texto); 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); }
  .topnav-explore{ display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font-family:inherit; padding:0; }
  .topnav-inner{ gap:22px; padding:0 20px; }
  .topnav-link, .topnav-publish{ white-space:nowrap; }
  .topnav-search{ flex:1 1 200px; width:auto; max-width:300px; min-width:150px; }
}
/* Pie de página: solo en escritorio (en el móvil ya está todo en "Menú") */
.site-footer{ display:none; }
@media(min-width:900px){
  .site-footer{ display:block; background:var(--tarjeta); border-top:1px solid var(--borde); margin-top:56px; padding:36px 28px 24px; }
  .site-footer-inner{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
  .site-footer-logo{ display:inline-flex; color:var(--morado); }
  .site-footer-logo svg{ height:30px; width:auto; }
  .site-footer-brand p{ font-size:14px; color:var(--texto-sec); margin-top:10px; max-width:320px; line-height:1.5; }
  .site-footer-brand p.site-footer-slogan{ font-size:17px; font-weight:800; color:var(--morado); margin-top:12px; }
  .site-footer-brand p.site-footer-slogan + p{ margin-top:4px; }
  .site-footer-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-sec); margin:0 0 10px; }
  .site-footer-col a{ display:block; font-size:14px; color:var(--texto); padding:4px 0; text-decoration:none; }
  .site-footer-col a:hover{ color:var(--morado); }
  .site-footer-copy{ max-width:1200px; margin:24px auto 0; padding-top:16px; border-top:1px solid var(--borde); font-size:12.5px; color:var(--texto-sec); }
}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--texto-sec);font-size:11px;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-texto); }
.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;
}

/* Flecha de "volver" en la ficha: va sobre la foto y se desplaza con ella
   (antes era fija y, al bajar, tapaba el principio del título). En
   escritorio no hace falta: está la barra superior */
@media(min-width:900px){ .listing-back{display:none !important;} }

/* Barra de compra en la ficha: en el móvil, fija abajo (sustituye a la barra
   de navegación en esta página) con el precio y "Escribir al vendedor"; en
   el ordenador, justo debajo del precio */
.buy-bar{ display:flex; align-items:center; gap:12px; margin-top:12px; }
.buy-bar-item{ display:none; }
.buy-bar-btn{ flex:1; font-size:15px; padding:14px 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.buy-bar-btn .lbl-m{ display:none; }
@media (max-width:899px){
  .has-buy-bar .tabbar{ display:none; }
  .has-buy-bar{ padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important; }
  .buy-bar{ position:fixed; left:0; right:0; bottom:0; z-index:35; margin:0; background:var(--tarjeta); border-top:1px solid var(--borde); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -6px 18px rgba(43,36,48,.08); }
  /* Miniatura + título + precio a la izquierda; botón compacto a la derecha */
  .buy-bar-item{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
  .buy-bar-thumb{ width:38px; height:52px; object-fit:cover; border-radius:4px 7px 7px 4px; background:var(--morado-suave); flex:none; box-shadow:0 3px 8px -3px rgba(43,36,48,.35); }
  .buy-bar-info{ display:flex; flex-direction:column; min-width:0; }
  .buy-bar-title{ font-size:13px; font-weight:600; color:var(--texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .buy-bar-price{ font-size:18px; font-weight:800; color:var(--morado); white-space:nowrap; line-height:1.2; }
  .buy-bar-btn{ flex:none; font-size:14.5px; padding:12px 18px; min-height:46px; border-radius:14px; }
  .buy-bar-btn .lbl-m{ display:inline; } .buy-bar-btn .lbl-d{ display:none; }
}
@media (min-width:900px){ .buy-bar-btn{ max-width:360px; } }
@media (min-width:900px) and (max-width:1100px){ .topnav-inner{ gap:16px; } .topnav-logo{ margin-right:0; } }

/* Aviso de confirmar correo (arriba del todo en publicar y chat) */
.verify-banner{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#FFF6DE; border:1px solid #F0D58A; color:#5A4410; border-radius:14px; padding:12px 14px; margin:0 0 14px; font-size:14px; line-height:1.5; }
.verify-banner p{ flex:1 1 220px; margin:0; }
.verify-banner button{ background:var(--morado); color:#fff; border:none; border-radius:10px; padding:9px 14px; font:600 13px 'Poppins',sans-serif; cursor:pointer; white-space:nowrap; }
.verify-banner button:disabled{ opacity:.75; cursor:default; }

/* Libros que incluye un lote */
.lote-books .lb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:620px){.lote-books .lb-list{grid-template-columns:1fr 1fr}}
.lb-it{display:flex;gap:12px;align-items:center;background:var(--fondo);border:1px solid var(--borde);border-radius:12px;padding:8px 10px;min-width:0}
.lb-cov{width:42px;height:60px;border-radius:3px 6px 6px 3px;flex:none;object-fit:cover;box-shadow:0 4px 8px -4px rgba(43,36,48,.35);background:var(--morado-suave)}
.lb-ph{display:flex;align-items:center;justify-content:center;color:var(--morado);font-weight:800;font-size:17px}
.lb-ph1{background:#FBF0DC;color:#7A5A12}.lb-ph2{background:#E5F0E8;color:#2F5A3E}.lb-ph3{background:#F7E6DF;color:#8C4A31}
.lb-txt{min-width:0;flex:1}
.lb-t{font-size:13.5px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--texto)}
.lb-a{font-size:12px;color:var(--texto-sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.lb-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.lb-c{font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--morado-suave);color:var(--morado)}
.lb-c.c-excelente{background:#E5F0E8;color:#2F5A3E}.lb-c.c-bueno{background:#FBF0DC;color:#7A5A12}.lb-c.c-aceptable{background:#F7E6DF;color:#8C4A31}
.lb-r{font-size:11.5px;font-weight:600;color:var(--morado);text-decoration:none}
.lb-note{font-size:11.5px;color:var(--texto-sec);margin:10px 0 0;line-height:1.45}
.cover-wrap .card-pro-badge svg{ width:10px; height:10px; color:var(--mostaza); opacity:1; }