/* ══════════════════════════════════════════════════════════════════
   ns-layout.css — Base compartida (header, carrousel, cookies, responsive)
   ══════════════════════════════════════════════════════════════════ */

/* ── Layout Principal ── */
#ns-content{
  position:fixed;inset:var(--hdr-h) 0 var(--ftr-h) 0;
  display:grid;grid-template-columns:1fr 2fr;overflow:hidden;
}

#ns-content.no-carousel {
  grid-template-columns: 1fr;
}

/* ── CARRUSEL ── */
.p-carousel{border-right:1px solid var(--br);position:relative;overflow:hidden;}
.pause-badge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:30;background:rgba(8,8,7,.78);border:1px solid var(--br);
  backdrop-filter:blur(8px);padding:8px 14px;font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mu);
  pointer-events:none;opacity:0;transition:.25s;
}
.p-carousel:hover .pause-badge{opacity:1}
.p-carousel:has(.ctrl:hover) .pause-badge{opacity:0}

.ctrl{
  position:absolute;left:0;right:0;height:64px;z-index:20;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;cursor:pointer;
}
.ctrl.top{top:0;background:linear-gradient(to bottom,rgba(8,8,7,.98) 20%,transparent)}
.ctrl.bot{bottom:0;background:linear-gradient(to top,rgba(8,8,7,.98) 20%,transparent)}

.pill{
  width:32px;height:32px;border:1px solid var(--br);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--mu);background:rgba(17,16,9,.9);backdrop-filter:blur(6px);
  transition:.18s;
}
.ctrl:hover .pill{border-color:var(--ac);color:var(--ac);transform:scale(1.1)}
.ctrl:active .pill{transform:scale(.9);background:rgba(212,168,83,.1)}
.pill svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.5;fill:none}

.track{position:absolute;inset:0;overflow:hidden}
.col{position:absolute;top:0;will-change:transform}
.col.a{left:8px;width:calc(33.333% - 10px)}
.col.b{left:calc(33.333% + 2px);width:calc(33.333% - 10px)}
.col.c{left:calc(66.666% + 2px);width:calc(33.334% - 10px)}

.card{
  margin-bottom:var(--gap);cursor:pointer;overflow:hidden;
  border:1.5px solid transparent;transition:.2s;position:relative;
  aspect-ratio:1;
}
.card.sel{border-color:var(--ac)}
.card img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover img{transform:scale(1.07)}
.card-ov{
  position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 60%);
  opacity:0;transition:.25s;
}
.card:hover .card-ov{opacity:1}
.card-label{
  position:absolute;bottom:6px;left:7px;right:7px;font-size:.52rem;color:#fff;
  letter-spacing:.1em;opacity:0;transition:.25s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card:hover .card-label{opacity:1}

/* ── PANEL 2: DETALLES ── */
.p-detail{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg);
}
.p2-bar{
  flex-shrink:0;border-bottom:1px solid var(--br);
  padding:0 .9rem .5rem;display:flex;flex-direction:column;gap:.45rem;
}
.p2-meta{display:flex;align-items:center;gap:.7rem}
.p2-count{font-size:.91rem;color:var(--mu);letter-spacing:.12em;white-space:nowrap}

.ns-search{
  display:flex;align-items:center;gap:8px;background:#d7f8b6;
  border:1px solid var(--br);padding:5px 11px;flex:1;transition:.2s;
}
.ns-search:focus-within{border-color:var(--ac)}
.ns-search svg{width:20px;height:20px;stroke:var(--mu);transition:.2s;fill:none}
.ns-search:focus-within svg{stroke:var(--ac)}
.ns-search input{
  background:none;border:none;outline:none;color:#111;
  font-size:.92rem;width:100%;font-family:'DM Mono',monospace;
}

.p2-body{
  flex:1;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:var(--br) transparent;
}
.p2-body::-webkit-scrollbar{width:2px}
.p2-body::-webkit-scrollbar-thumb{background:var(--br2)}

/* ── ESTADO VACÍO ── */
.ns-empty{
  height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:12px;color:var(--mu);text-align:center;padding:2rem;
}
.ns-empty-ring{
  width:48px;height:48px;border:1px solid var(--br);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.ns-empty-ring svg{width:20px;height:20px;stroke:var(--br2);fill:none;stroke-width:1.5}
.ns-empty p{font-size:.78rem;line-height:2.1;letter-spacing:.06em}

/* ── GALERÍA DE BÚSQUEDA ── */
.gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:6px;padding:1rem;
}
.gallery-item{
  aspect-ratio:1;overflow:hidden;cursor:pointer;
  border:1.5px solid transparent;transition:.2s;
  background:none;padding:0;
}
.gallery-item:hover{border-color:var(--ac)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:.35s;display:block}
.gallery-item:hover img{transform:scale(1.07)}

/* ── Banner Cookies ── */
#cookie-banner {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 18px;
  background: #1a1a1a;
  color: #f5f2ee;
  padding: 14px 20px 14px 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  min-width: 320px;
  max-width: 520px;
  width: max-content;
  overflow: hidden;
  transition: opacity .45s ease, transform .45s ease;
}

#cookie-banner.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}

#cookie-banner-text {
  font-size: .88rem;
  letter-spacing: .01em;
  line-height: 1.4;
  flex: 1;
  color: #f5f2ee !important;
}

#cookie-banner-close {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(245,242,238,.3);
  color: #f5f2ee;
  font-size: 1.2rem;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

#cookie-banner-close:hover {
  background: rgba(245,242,238,.15);
}

#cookie-banner-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: #649733;
  transform-origin: left center;
  animation: cookieCountdown 7s linear forwards;
}

@keyframes cookieCountdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  #ns-content {
    grid-template-columns: 1fr;
  }
  .p-carousel {
    display: none;
  }
  .header-container {
    padding: 12px 20px;
    gap: 20px;
  }
  .header-logo img {
    width: 32px;
    height: 32px;
  }
  .header-logo-text {
    font-size: 18px;
  }
  .nav-link {
    padding: 8px 15px;
    font-size: 14px;
  }
  #cookie-banner {
    min-width: 280px;
    max-width: 90vw;
    padding: 12px 16px 12px 16px;
  }
}