/* ============================================================
   Hoshi Anime — Estilos de producción
   Estética japonesa editorial · rojo / blanco / negro · washi
   ============================================================ */

:root {
  --serif: 'Shippori Mincho', serif;
  --sans: 'Zen Kaku Gothic New', sans-serif;
  --label: 'Zen Maru Gothic', monospace;

  --shu: #d92f2f;      /* rojo primario / accent */
  --matcha: #a3122a;   /* rojo profundo */
  --gold: #e06a4f;     /* terracota */
  --sakura: #e5a3a6;   /* rojo claro */
  --ink: #161318;      /* casi negro */

  --bg: #ffffff;
  --bg-body: #ffffff;
  --surface: #ffffff;
  --surface-cream: #faf7f4;
  --field: #f6f1ec;

  --text: #161318;
  --text-2: #4a4750;
  --text-3: #8a8578;
  --text-4: #a39a8c;
  --placeholder: #b3a89a;

  --border: rgba(22, 19, 24, 0.1);
  --border-soft: rgba(22, 19, 24, 0.08);

  --accent: #d92f2f;

  --sh-card: 0 12px 34px -24px rgba(22, 19, 24, 0.5);
  --sh-card-hover: 0 30px 55px -28px rgba(22, 19, 24, 0.55);
  --sh-card-dark: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  --sh-hero: 0 44px 84px -32px rgba(22, 19, 24, 0.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
}
::selection { background: rgba(217, 47, 47, 0.24); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(22, 19, 24, 0.3); border-radius: 6px; border: 3px solid var(--bg); }

img { max-width: 100%; display: block; }
button { font-family: var(--sans); cursor: pointer; }
input { font-family: var(--sans); }
a { color: inherit; text-decoration: none; }

/* ---------- Animaciones ---------- */
@keyframes np-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-20px) rotate(1deg); } }
@keyframes np-float2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
@keyframes np-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes np-sun { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes np-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes np-pulse { 0% { box-shadow: 0 0 0 0 rgba(217,47,47,0.5); } 100% { box-shadow: 0 0 0 8px rgba(217,47,47,0); } }
@keyframes np-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes np-modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Fondo blanco (se retiró la textura washi seigaiha) ---------- */
.seigaiha { display: none; }
.app { position: relative; z-index: 1; }

/* ---------- Utilidades ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.serif { font-family: var(--serif); }
.shu { color: var(--shu); }
.ink-c { color: var(--ink); }
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--shu); font-family: var(--sans); margin-bottom: 8px;
}
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1); }
.reveal.seen { opacity: 1; transform: none; }

/* ---------- Botones ---------- */
.btn { font-family: var(--sans); font-weight: 700; cursor: pointer; border: none; transition: transform .2s, background .2s, color .2s; }
.btn-dark { padding: 15px 28px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 15px; box-shadow: 0 12px 26px -10px rgba(22,19,24,0.6); }
.btn-dark:hover { transform: translateY(-2px); }
.btn-outline-red { padding: 15px 28px; border-radius: 14px; background: transparent; color: var(--shu); font-size: 15px; border: 1.5px solid var(--shu); }
.btn-outline-red:hover { background: var(--shu); color: #fff; }
.btn-outline-dark { padding: 11px 20px; border-radius: 11px; background: transparent; border: 1.5px solid var(--ink); font-size: 14px; }
.btn-outline-dark:hover { background: var(--ink); color: #fff; }
.btn-outline-white { padding: 11px 20px; border-radius: 11px; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.35); font-size: 14px; }
.btn-outline-white:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-red { padding: 12px 24px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 15px; }
.btn-red:hover { transform: scale(1.03); }
.btn-block { width: 100%; display: block; text-align: center; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(16px); background: rgba(247, 243, 238, 0.82);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: 26px; padding: 14px 28px; max-width: 1240px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.logo-mark {
  width: 42px; height: 42px; border-radius: 50%; background: var(--shu);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: #fff; font-family: var(--serif);
  box-shadow: 0 8px 20px -6px rgba(217,47,47,0.7);
}
.logo-txt { display: flex; flex-direction: column; line-height: 1.02; }
.logo-name { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; font-family: var(--serif); }
.logo-sub { font-size: 10px; color: var(--shu); letter-spacing: 0.28em; text-transform: uppercase; font-weight: 700; }
.nav-links { display: flex; gap: 3px; margin-left: 6px; }
.nav-link {
  padding: 9px 15px; border: none; border-radius: 11px; background: transparent;
  color: var(--text-3); font-weight: 700; font-size: 14px; cursor: pointer; transition: all .2s;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { background: rgba(217,47,47,0.12); color: var(--shu); }
.nav-spacer { flex: 1; }
.nav-search {
  display: flex; align-items: center; gap: 7px; background: #fff;
  border: 1px solid rgba(22,19,24,0.12); border-radius: 999px; padding: 9px 15px; width: 210px; position: relative;
}
.nav-search span { color: var(--ink); font-size: 15px; }
.nav-search input { border: none; outline: none; background: transparent; font-size: 13px; color: var(--ink); width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: 13px;
  border: 1px solid rgba(22,19,24,0.12); background: #fff; cursor: pointer; font-size: 17px;
  display: flex; align-items: center; justify-content: center; transition: border-color .2s;
}
.icon-btn:hover { border-color: var(--shu); }
.icon-btn.heart { color: var(--shu); }
.icon-btn.cart { border: none; background: var(--accent); color: #fff; font-family: var(--serif); box-shadow: 0 8px 18px -6px rgba(217,47,47,0.6); }
.badge {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.nav-hamburger { display: none; width: 42px; height: 42px; border-radius: 13px; border: 1px solid rgba(22,19,24,0.12); background: #fff; font-size: 18px; }

/* Búsqueda desplegable */
.search-results {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: #fff;
  border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--sh-card);
  overflow: hidden; display: none; z-index: 50; width: 280px;
}
.search-results.open { display: block; }
.search-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--border-soft); }
.search-item:hover { background: var(--field); }
.search-thumb { width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.search-thumb i { width: 20px; height: 20px; border-radius: 50%; display: block; }
.search-info p { margin: 0; font-size: 13px; font-weight: 700; font-family: var(--serif); }
.search-info span { font-size: 12px; color: var(--text-3); }

/* ============================================================
   SCREENS
   ============================================================ */
.screen { display: none; }
.screen.active { display: block; animation: np-fade-up .4s ease; }

/* ---------- HERO ---------- */
.hero { position: relative; overflow: hidden; background: #ffffff; border-bottom: 1px solid rgba(22,19,24,0.07); }
/* Ilustración sumi-e horizontal como fondo del hero.
   'contain' muestra la escena completa sin recorte y escala proporcionalmente. */
.hero-sun {
  position: absolute; inset: 0;
  background: url('images/sumi-hero.png') center / contain no-repeat;
  opacity: 0.95; pointer-events: none;
}
@media (max-width: 1024px) { .hero-sun { opacity: 0.35; } }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; padding: 58px 28px 60px; position: relative; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; background: #fff; border: 1px solid rgba(22,19,24,0.12); font-size: 12px; font-weight: 700; color: var(--shu); margin-bottom: 26px; }
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--shu); }
.hero h1 { font-size: clamp(46px,5.4vw,78px); font-weight: 800; line-height: 0.98; letter-spacing: -0.03em; margin: 0 0 22px; font-family: var(--serif); }
.hero h1 .sans { font-family: var(--sans); font-weight: 900; }
.hero-p { font-size: 19px; color: var(--text-2); max-width: 440px; margin: 0 0 34px; }
.hero-p b { color: var(--ink); }
.hero-p .r { color: var(--shu); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 34px; margin-top: 44px; }
.hero-stats .n { font-family: var(--serif); font-weight: 800; font-size: 28px; }
.hero-stats .l { font-size: 13px; color: var(--text-3); }

.hero-showcase { position: relative; height: 520px; display: flex; align-items: center; justify-content: center; perspective: 1200px; }
.showcase-card {
  position: relative; width: 330px; height: 448px; border-radius: 26px;
  background: linear-gradient(160deg,#fff,#f4ebe4); border: 1px solid rgba(22,19,24,0.1);
  box-shadow: var(--sh-hero); transform-style: preserve-3d; transition: transform .18s ease-out, opacity .35s ease;
  animation: np-float2 6s ease-in-out infinite; display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
}
.showcase-shot { flex: 1; margin: 15px; border-radius: 18px; background: linear-gradient(160deg,#f6d9d5,#fff); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden; }
.showcase-blob { width: 100px; height: 100px; border-radius: 50%; background: var(--shu); opacity: 0.32; }
.showcase-label { font-family: var(--label); font-size: 11px; color: var(--placeholder); letter-spacing: 0.1em; }
.showcase-badge { position: absolute; top: 13px; left: 13px; padding: 5px 11px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; transform: translateZ(55px); }
.showcase-body { padding: 0 20px 22px; transform: translateZ(35px); }
.showcase-brand { font-size: 11px; color: var(--shu); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.showcase-name { font-weight: 700; font-size: 21px; letter-spacing: -0.02em; margin: 3px 0 8px; font-family: var(--serif); }
.showcase-row { display: flex; align-items: center; justify-content: space-between; }
.showcase-price { font-family: var(--serif); font-weight: 800; font-size: 22px; color: var(--shu); }
.showcase-scale { font-size: 12px; color: var(--text-3); }
.float-pill { position: absolute; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(22,19,24,0.1); box-shadow: 0 20px 40px -20px rgba(22,19,24,0.4); font-size: 13px; font-weight: 700; }
.float-pill.p1 { top: 30px; right: 0; color: var(--ink); animation: np-float 7s ease-in-out infinite; }
.float-pill.p2 { bottom: 42px; left: -6px; color: var(--shu); animation: np-float 8s ease-in-out infinite 0.5s; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; background: var(--ink); padding: 16px 0; }
.marquee-track { display: flex; gap: 44px; width: max-content; animation: np-marquee 24s linear infinite; font-family: var(--serif); font-weight: 700; font-size: 17px; color: #f2ebe4; }
.marquee-track .sep { color: var(--shu); }

/* ---------- Video band ---------- */
.video-band { position: relative; height: 460px; overflow: hidden; background: var(--ink); }
.video-band video, .video-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-band .overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,19,24,0.88) 0%, rgba(163,18,42,0.5) 48%, rgba(22,19,24,0.15) 100%); pointer-events: none; }
.video-band .content { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.video-band h2 { margin: 0 0 16px; font-size: clamp(38px,4.6vw,60px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: #fff; font-family: var(--serif); }
.video-band .eyebrow { color: var(--shu); letter-spacing: 0.2em; margin-bottom: 14px; }
.video-band p { margin: 0; font-size: 17px; color: #e7ddd6; max-width: 440px; }

/* ---------- Sección genérica ---------- */
.band { padding: 64px 0; }
.band-featured { background: linear-gradient(180deg,#ffffff 0%, #fdf6f4 100%); }
.band-dark { background: var(--ink); }
.band-cream { background: var(--surface-cream); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 20px; }
.section-head h2 { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -0.03em; font-family: var(--serif); }
.section-head .eyebrow.dark { color: var(--ink); }
.section-head.on-dark h2 { color: #fff; }

/* ---------- Grid de productos ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* ---------- Tarjeta de producto ---------- */
.card-wrap { perspective: 1000px; }
.pcard {
  border-radius: 22px; background: #fff; border: 1px solid var(--border-soft); overflow: hidden;
  transition: transform .18s ease-out, box-shadow .3s; transform-style: preserve-3d; box-shadow: var(--sh-card);
  cursor: pointer;
}
.pcard:hover { box-shadow: var(--sh-card-hover); }
.pcard.on-dark { border-color: rgba(255,255,255,0.1); box-shadow: var(--sh-card-dark); }
.pcard.on-dark:hover { box-shadow: 0 30px 60px -26px rgba(0,0,0,0.85); }
.pcard-shot { position: relative; height: 228px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pcard-shot.sm { height: 210px; }
.pcard-blob { width: 82px; height: 82px; border-radius: 50%; }
.pcard-label { position: absolute; bottom: 10px; font-family: var(--label); font-size: 10px; color: var(--placeholder); letter-spacing: 0.12em; }
.pcard-badge { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; transform: translateZ(45px); }
.badge-ink { background: var(--ink); color: #fff; }
.badge-shu { background: var(--shu); color: #fff; }
.pcard-wish {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.92); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center;
  transform: translateZ(45px); color: #c9beb0; transition: color .2s;
}
.pcard-wish.on { color: var(--shu); }
.pcard-body { padding: 16px 17px 18px; }
.pcard-brand { font-size: 11px; color: var(--shu); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; }
.pcard-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin: 3px 0 2px; font-family: var(--serif); }
.pcard-meta { font-size: 12px; color: var(--text-4); margin-bottom: 12px; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; }
.pcard-price-wrap { display: flex; align-items: baseline; gap: 7px; }
.pcard-price { font-family: var(--serif); font-weight: 800; font-size: 18px; color: var(--ink); }
.pcard-old { font-size: 12px; color: #bcb3a5; text-decoration: line-through; }
.pcard-add { width: 36px; height: 36px; border-radius: 11px; border: none; background: var(--accent); color: #fff; cursor: pointer; font-size: 19px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.pcard-add:hover { transform: scale(1.08); }

/* ---------- Promo split ---------- */
.promo { display: grid; grid-template-columns: 1fr 1fr; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(22,19,24,0.5); min-height: 340px; }
.promo-vid { position: relative; background: var(--ink); }
.promo-vid video, .promo-vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-panel { background: linear-gradient(135deg,var(--shu) 0%, var(--matcha) 100%); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.promo-panel .circ { position: absolute; top: -40px; right: -30px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.1); }
.promo-panel .eyebrow { color: rgba(255,255,255,0.85); letter-spacing: 0.2em; }
.promo-panel h2 { margin: 0 0 14px; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; font-family: var(--serif); position: relative; }
.promo-panel p { margin: 0 0 26px; font-size: 16px; color: #ffe4e0; max-width: 360px; position: relative; }
.promo-panel .btn { align-self: flex-start; padding: 14px 26px; border-radius: 13px; background: #fff; color: var(--shu); font-size: 15px; position: relative; }

/* ---------- Newsletter ---------- */
.newsletter { background: linear-gradient(135deg,#161318 0%, #4a0f18 100%); }
.newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; position: relative; padding: 70px 28px 80px; }
.newsletter-glow { position: absolute; top: -70px; right: -40px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(217,47,47,0.5), transparent 70%); }
.newsletter h2 { margin: 0 0 10px; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; font-family: var(--serif); color: #fff; }
.newsletter .eyebrow { color: #f0a89f; letter-spacing: 0.2em; }
.newsletter p { margin: 0; color: #d8cdc9; font-size: 16px; max-width: 420px; }
.newsletter-form { position: relative; display: flex; gap: 10px; background: rgba(255,255,255,0.12); padding: 8px; border-radius: 16px; }
.newsletter-form input { border: none; outline: none; background: transparent; color: #fff; font-size: 15px; padding: 12px 16px; width: 210px; }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.6); }

/* ============================================================
   PÁGINAS INTERNAS (Figuras / Preventas / Cuenta)
   ============================================================ */
.page { max-width: 1240px; margin: 0 auto; padding: 44px 28px 90px; }
.breadcrumb { font-size: 13px; color: var(--text-3); }
.breadcrumb b { color: var(--ink); font-weight: 600; }
.page-title { margin: 8px 0 6px; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; font-family: var(--serif); }
.page-sub { margin: 0; color: var(--text-2); font-size: 16px; max-width: 560px; }

.catalog-layout { display: grid; grid-template-columns: 250px 1fr; gap: 30px; align-items: start; margin-top: 28px; }
.filters { position: sticky; top: 88px; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 24px; box-shadow: 0 12px 34px -26px rgba(22,19,24,0.45);
  /* Sin estos dos, un panel más alto que la pantalla deja los últimos filtros
     FUERA DE ALCANCE: al quedar fijo, su parte inferior nunca sube. Ahora el
     panel se desplaza por dentro cuando no cabe. */
  max-height: calc(100vh - 108px);
  /* dvh tiene en cuenta la barra del navegador móvil, que aparece y desaparece
     al desplazarse; con 100vh a secas el panel se sale de la pantalla. */
  max-height: calc(100dvh - 108px);
  overflow-y: auto; overscroll-behavior: contain; }
/* Barra de desplazamiento discreta, para que se note que hay más contenido. */
.filters::-webkit-scrollbar { width: 8px; }
.filters::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.filters::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.filters { scrollbar-width: thin; }
.filters-title { font-weight: 700; font-size: 15px; margin-bottom: 18px; font-family: var(--serif); }
.filter-label { font-size: 12px; font-weight: 700; color: var(--shu); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.filter-group { margin-bottom: 24px; }
.chips { display: flex; flex-direction: column; gap: 6px; }
.chip { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; border-radius: 10px; border: none; background: var(--field); color: var(--text-2); font-weight: 600; font-size: 13px; cursor: pointer; text-align: left; transition: all .18s; }
.chip span { opacity: 0.55; font-size: 12px; }
.chip.active { background: var(--ink); color: #fff; }
.chip.active span { opacity: 0.7; }
.price-boxes { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
/* `.price-box` era un <span> decorativo con un precio escrito a mano; ahora es
   un campo real. Se le quitan los adornos del number para que no aparezcan las
   flechitas dentro de una caja tan estrecha. */
.price-box { flex: 1; width: 100%; min-width: 0; text-align: center; padding: 9px 6px; border-radius: 9px; background: var(--field); border: 1.5px solid transparent; font-family: var(--serif); font-weight: 700; font-size: 13px; color: var(--ink); transition: border-color .16s; }
.price-box::placeholder { color: var(--placeholder); font-weight: 400; }
.price-box:focus { outline: none; border-color: var(--shu); background: #fff; }
.price-box::-webkit-outer-spin-button, .price-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-box[type=number] { -moz-appearance: textfield; appearance: textfield; }
.filter-hint { font-size: 11.5px; color: var(--text-4); letter-spacing: .2px; }

.checks { display: flex; flex-direction: column; gap: 2px; }
/* Con 19 marcas la barra lateral crecía tanto que empujaba el resto fuera de
   la pantalla; se acota y se desplaza sola. */
.checks.scrollable { max-height: 232px; overflow-y: auto; padding-right: 4px; }
.checks.scrollable::-webkit-scrollbar { width: 6px; }
.checks.scrollable::-webkit-scrollbar-thumb { background: rgba(22,19,24,0.18); border-radius: 6px; }
.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); cursor: pointer; padding: 6px 7px; border-radius: 8px; transition: background .14s; }
.check:hover { background: var(--field); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid rgba(22,19,24,0.22); display: inline-block; position: relative; transition: all .16s; }
.check.on .box { background: var(--shu); border-color: var(--shu); }
.check.on .box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check.on { color: var(--ink); font-weight: 600; }
.check input:focus-visible + .box { outline: 2px solid var(--shu); outline-offset: 2px; }
.check-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-n { font-size: 11.5px; color: var(--text-4); font-variant-numeric: tabular-nums; }
/* Una marca que en este momento no daría resultados se atenúa en vez de
   esconderse: desaparecer opciones al filtrar desorienta más que atenuarlas. */
.check.vacia { opacity: .42; }

.btn-limpiar { width: 100%; margin-top: 18px; padding: 10px; border-radius: 10px; border: 1.5px solid var(--border); background: #fff; color: var(--text-2); font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .16s; }
.btn-limpiar:hover { border-color: var(--shu); color: var(--shu); }
.page-btn:disabled { opacity: .35; cursor: default; }
.page-gap { color: var(--text-4); padding: 0 2px; align-self: center; }

.search-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; background: rgba(217,47,47,0.07); border: 1px solid rgba(217,47,47,0.18); border-radius: 14px; padding: 12px 18px; font-size: 14px; color: var(--text-2); }
.search-banner b { color: var(--ink); font-family: var(--serif); }
.search-banner button { background: none; border: none; color: var(--shu); font-weight: 700; font-size: 13px; cursor: pointer; font-family: var(--sans); white-space: nowrap; }
.search-banner button:hover { text-decoration: underline; }
.no-results { grid-column: 1 / -1; text-align: center; padding: 60px 24px; background: #fff; border: 1px solid var(--border); border-radius: 20px; }
.no-results .nr-icon { font-size: 42px; margin-bottom: 12px; opacity: 0.7; }
.no-results h3 { font-family: var(--serif); font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.no-results p { color: var(--text-3); font-size: 14px; margin: 0 0 20px; }

.results-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; }
.results-bar span { font-size: 14px; color: var(--text-2); }
.results-bar strong { color: var(--ink); }
.sorts { display: flex; gap: 4px; }
.sort-btn { padding: 8px 13px; border-radius: 9px; border: none; background: transparent; color: var(--text-3); font-weight: 600; font-size: 13px; cursor: pointer; }
.sort-btn.active { background: var(--accent); color: #fff; }

/* La paginación va vacía cuando solo hay una página, así que el margen se
   aplica solo si tiene contenido: si no, deja un hueco muerto bajo la lista. */
.pagination { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pagination:not(:empty) { margin-top: 32px; }
.pag-resumen { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pag-btns { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.page-btn { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 11px; border: 1px solid rgba(22,19,24,0.14); background: #fff; color: var(--ink); cursor: pointer; font-family: var(--serif); font-size: 14px; transition: all .15s; }
.page-btn:hover:not(:disabled):not(.active) { border-color: var(--shu); color: var(--shu); }
.page-btn.active { border: none; background: var(--accent); color: #fff; font-weight: 700; }
/* Dentro del panel (fondo oscuro) los mismos controles necesitan otro color. */
.admin .pag-resumen { color: #8f8c96; }
.admin .page-btn { background: #1e1e26; border-color: #33333e; color: #e9e7e4; }
.admin .page-btn:hover:not(:disabled):not(.active) { border-color: #c6282e; color: #f0888c; }
.admin .page-btn.active { background: #c6282e; color: #fff; }
@media (max-width: 560px) {
  .page-btn { min-width: 36px; height: 36px; padding: 0 7px; font-size: 13px; }
}

/* ---------- Preventas ---------- */
.quarters { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: rgba(22,19,24,0.25) transparent; }
.quarters::-webkit-scrollbar { height: 6px; }
.quarters::-webkit-scrollbar-thumb { background: rgba(22,19,24,0.2); border-radius: 3px; }
.quarters .q-btn { flex: 0 0 auto; white-space: nowrap; }
.pre-precio-filtro { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.ppf-label { font-size: 14px; font-weight: 700; color: var(--text-2); }
.pre-precio-filtro input {
  width: 100px; padding: 9px 13px; border-radius: 10px; border: 1px solid var(--border);
  background: #fff; font-size: 14px; color: var(--ink); font-family: var(--sans); outline: none; transition: border-color .2s, box-shadow .2s;
}
.pre-precio-filtro input:focus { border-color: var(--shu); box-shadow: 0 0 0 3px rgba(217,47,47,0.1); }
.ppf-dash { color: var(--text-3); }
.ppf-count { font-size: 13px; color: var(--text-3); margin-left: 4px; }
.q-btn { padding: 10px 18px; border-radius: 11px; border: 1.5px solid rgba(22,19,24,0.14); background: #fff; color: var(--text-2); font-weight: 700; font-size: 13px; cursor: pointer; }
.q-btn.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.pre-card { display: grid; grid-template-columns: 168px 1fr; border-radius: 22px; background: #fff; border: 1px solid var(--border); overflow: hidden; transition: transform .18s ease-out, box-shadow .3s; transform-style: preserve-3d; box-shadow: 0 14px 36px -26px rgba(22,19,24,0.5); cursor: pointer; }
.pre-card:hover { box-shadow: var(--sh-card-hover); }
.pre-shot { position: relative; display: flex; align-items: center; justify-content: center; }
.pre-blob { width: 66px; height: 66px; border-radius: 50%; }
.pre-tri { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; transform: translateZ(40px); }
.pre-body { padding: 18px 20px; }
.pre-brand { font-size: 11px; color: var(--shu); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; }
.pre-name { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; margin: 3px 0 4px; font-family: var(--serif); }
.pre-date { font-size: 12px; color: var(--text-4); margin-bottom: 14px; }
.pre-date strong { color: var(--text-2); }
.pre-views { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.pre-pulse { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--shu); animation: np-pulse 1.8s ease-out infinite; }
.pre-views span { font-size: 13px; color: var(--text-2); }
.pre-views strong { color: var(--ink); font-family: var(--serif); }
.pre-foot { display: flex; align-items: center; justify-content: space-between; }
.pre-price { font-family: var(--serif); font-weight: 800; font-size: 19px; }
.pre-btn { padding: 10px 18px; border-radius: 11px; border: none; background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .2s; }
.pre-btn:hover { background: var(--shu); }
.legal-note { margin: 36px 0 0; font-size: 12px; color: var(--text-4); text-align: center; }
.legal-note a { color: var(--shu); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---------- Cuenta ---------- */
.account-layout { display: grid; grid-template-columns: 270px 1fr; gap: 28px; align-items: start; }
.account-side { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 24px; box-shadow: 0 14px 36px -28px rgba(22,19,24,0.45); }
.account-user { display: flex; align-items: center; gap: 13px; padding-bottom: 20px; border-bottom: 1px solid var(--border-soft); margin-bottom: 16px; }
.account-avatar { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--shu), var(--matcha)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 22px; font-family: var(--serif); }
.account-user .n { font-weight: 700; font-size: 16px; font-family: var(--serif); }
.account-user .l { font-size: 12px; color: var(--text-3); }
.account-tabs { display: flex; flex-direction: column; gap: 5px; }
.account-tab { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; border: none; background: transparent; color: var(--text-2); font-weight: 500; font-size: 14px; cursor: pointer; text-align: left; width: 100%; transition: all .18s; }
.account-tab .icon { font-size: 15px; font-family: var(--serif); font-weight: 700; width: 18px; text-align: center; color: var(--shu); }
.account-tab.active { background: rgba(217,47,47,0.1); color: var(--shu); font-weight: 700; }
.logout-btn { width: 100%; margin-top: 16px; padding: 11px; border-radius: 11px; border: 1px solid rgba(22,19,24,0.14); background: transparent; font-size: 14px; color: var(--text-2); cursor: pointer; }
.logout-btn:hover { border-color: var(--shu); color: var(--shu); }

.account-tabpanel { display: none; }
.account-tabpanel.active { display: block; animation: np-fade-up .35s ease; }
.stat-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 22px; }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 22px; }
.stat-card .n { font-family: var(--serif); font-weight: 800; font-size: 32px; }
.stat-card .l { font-size: 13px; color: var(--text-3); }
.panel { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 26px; }
.panel-title { font-weight: 700; font-size: 17px; margin-bottom: 18px; font-family: var(--serif); }
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.data-field .k { font-size: 12px; color: var(--text-3); margin-bottom: 5px; }
.data-field .v { padding: 11px 14px; border-radius: 10px; background: var(--field); font-size: 14px; }
.orders { display: flex; flex-direction: column; gap: 14px; }
.order-row { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.order-id { font-family: var(--serif); font-weight: 700; font-size: 15px; }
.order-meta { font-size: 13px; color: var(--text-3); }
.order-right { display: flex; align-items: center; gap: 18px; }
.order-total { font-family: var(--serif); font-weight: 800; font-size: 16px; }
.order-status { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.st-entregado { background: #e9e4e6; color: var(--ink); }
.st-camino { background: #f6d9d5; color: var(--matcha); }
.st-preventa { background: var(--ink); color: #fff; }
.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.addr-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 22px; position: relative; }
.addr-card.primary { border: 2px solid var(--shu); }
.addr-badge { position: absolute; top: 16px; right: 16px; padding: 4px 10px; border-radius: 999px; background: var(--shu); color: #fff; font-size: 11px; font-weight: 700; }
.addr-name { font-family: var(--serif); font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.addr-text { font-size: 14px; color: var(--text-2); line-height: 1.7; }
.addr-add { border: 1.5px dashed rgba(22,19,24,0.2); border-radius: 18px; padding: 22px; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 14px; cursor: pointer; min-height: 120px; }
.addr-add:hover { border-color: var(--shu); color: var(--shu); }
.wish-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.wish-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; cursor: pointer; }
.wish-shot { height: 130px; display: flex; align-items: center; justify-content: center; }
.wish-blob { width: 56px; height: 56px; border-radius: 50%; }
.wish-body { padding: 14px; }
.wish-name { font-weight: 700; font-size: 14px; font-family: var(--serif); }
.wish-price { font-family: var(--serif); font-weight: 800; font-size: 15px; color: var(--shu); margin-top: 4px; }
.settings-list { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 4px; }
.setting { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid rgba(22,19,24,0.06); }
.setting .t { font-weight: 600; font-size: 15px; }
.setting .d { font-size: 13px; color: var(--text-3); }
.toggle { width: 46px; height: 26px; border-radius: 999px; position: relative; cursor: pointer; transition: background .2s; }
.toggle .knob { position: absolute; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; }
.toggle.on { background: var(--shu); }
.toggle.on .knob { left: 23px; }
.toggle.off { background: #d8cdbc; }
.toggle.off .knob { left: 3px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--border); background: var(--ink); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 40px 28px; max-width: 1240px; margin: 0 auto; }
.footer-brand { display: flex; align-items: center; gap: 11px; }
.footer-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--shu); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; font-family: var(--serif); }
.footer-brand span { font-size: 13px; color: #b8b0aa; }
.footer-links { display: flex; gap: 18px; font-size: 13px; color: #d8cdc9; flex-wrap: wrap; }
.footer-links span { cursor: pointer; }
.footer-links span:hover { color: #fff; }
.footer-social { display: flex; gap: 10px; align-items: center; }
.fs-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); transition: transform .15s ease, background .2s ease, opacity .2s ease; text-decoration: none; }
.fs-btn:hover { transform: translateY(-2px); }
.fs-wa:hover { background: #25d366; }
.fs-fb:hover { background: #1877f2; }
.fs-ig:hover { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }

/* ============================================================
   AUTH (Login / Registro / Verificación)
   ============================================================ */
.auth-screen { min-height: calc(100vh - 72px); display: flex; align-items: center; justify-content: center; padding: 48px 28px; position: relative; }
.auth-card {
  width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--border);
  border-radius: 26px; padding: 40px; box-shadow: var(--sh-hero); position: relative;
  animation: np-modal-in .4s ease;
}
.auth-mark { width: 52px; height: 52px; border-radius: 50%; background: var(--shu); display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; font-family: var(--serif); margin: 0 auto 18px; box-shadow: 0 10px 24px -8px rgba(217,47,47,0.7); }
.auth-eyebrow { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--shu); margin-bottom: 8px; }
.auth-title { text-align: center; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; font-family: var(--serif); margin: 0 0 6px; }
.auth-sub { text-align: center; font-size: 14px; color: var(--text-3); margin: 0 0 28px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.field-input { position: relative; }
.field-input input {
  width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(22,19,24,0.14);
  background: var(--field); font-size: 15px; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s;
}
.field-input input:focus { border-color: var(--shu); box-shadow: 0 0 0 3px rgba(217,47,47,0.12); background: #fff; }
.field-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-3); font-size: 13px; cursor: pointer; font-weight: 700; }
.auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; font-size: 13px; }
.auth-check { display: flex; align-items: center; gap: 8px; color: var(--text-2); cursor: pointer; }
.auth-check input { accent-color: var(--shu); }
.auth-link { color: var(--shu); font-weight: 700; cursor: pointer; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--text-3); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.gbtn-wrap { display: flex; justify-content: center; min-height: 44px; margin-bottom: 4px; }
.btn-google {
  width: 100%; padding: 13px; border-radius: 12px; border: 1px solid rgba(22,19,24,0.16); background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 11px; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s;
}
.btn-google:hover { background: var(--field); border-color: rgba(22,19,24,0.28); }
.g-icon { width: 20px; height: 20px; flex-shrink: 0; }
.auth-foot { text-align: center; font-size: 14px; color: var(--text-3); margin-top: 22px; }
.auth-terms { font-size: 12px; color: var(--text-4); text-align: center; margin-top: 18px; line-height: 1.6; }
.auth-terms a { color: var(--shu); cursor: pointer; }

/* Verificación por código */
.code-inputs { display: flex; gap: 10px; justify-content: center; margin: 8px 0 26px; }
.code-box {
  width: 52px; height: 62px; border-radius: 14px; border: 1.5px solid rgba(22,19,24,0.16); background: var(--field);
  text-align: center; font-size: 26px; font-weight: 800; font-family: var(--serif); color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s;
}
.code-box:focus { border-color: var(--shu); box-shadow: 0 0 0 3px rgba(217,47,47,0.12); background: #fff; }
.code-box.filled { border-color: var(--shu); background: #fff; }
.resend { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 20px; }
.resend b { color: var(--shu); cursor: pointer; }
.code-hint { text-align: center; font-size: 13px; color: var(--text-3); background: var(--field); border-radius: 12px; padding: 12px; margin-bottom: 22px; }
.code-hint b { color: var(--shu); font-family: var(--serif); font-size: 16px; letter-spacing: 0.15em; }

/* ============================================================
   CARRITO (slide-over)
   ============================================================ */
.overlay { position: fixed; inset: 0; background: rgba(22,19,24,0.5); backdrop-filter: blur(3px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .3s; }
.overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0; width: 420px; max-width: 92vw; height: 100vh; background: var(--bg);
  z-index: 210; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .38s cubic-bezier(.4,0,.2,1); box-shadow: -20px 0 60px -30px rgba(0,0,0,0.5);
}
.cart-drawer.open { transform: translateX(0); }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--border); background: #fff; }
.cart-head h3 { margin: 0; font-size: 19px; font-weight: 800; font-family: var(--serif); display: flex; align-items: center; gap: 10px; }
.cart-head .kanji { color: var(--shu); }
.cart-close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 18px; cursor: pointer; color: var(--text-2); }
.cart-close:hover { border-color: var(--shu); color: var(--shu); }
.cart-items { flex: 1; overflow-y: auto; padding: 16px 24px; }
.cart-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.cart-thumb { width: 76px; height: 76px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cart-thumb i { width: 34px; height: 34px; border-radius: 50%; display: block; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-brand { font-size: 10px; color: var(--shu); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.cart-item-name { font-family: var(--serif); font-weight: 700; font-size: 15px; margin: 2px 0; }
.cart-item-scale { font-size: 12px; color: var(--text-4); }
.cart-item-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.qty { display: flex; align-items: center; gap: 6px; }
.qty button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 14px; color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.qty button:hover { border-color: var(--shu); color: var(--shu); }
.qty .n { font-family: var(--serif); font-weight: 700; min-width: 20px; text-align: center; }
.cart-item-price { font-family: var(--serif); font-weight: 800; font-size: 15px; }
.cart-remove { background: none; border: none; color: var(--text-4); font-size: 12px; cursor: pointer; margin-top: 6px; padding: 0; }
.cart-remove:hover { color: var(--shu); }
.cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--text-3); text-align: center; padding: 40px; }
.cart-empty .big { font-size: 40px; color: var(--shu); font-family: var(--serif); }
.cart-foot { padding: 20px 24px; border-top: 1px solid var(--border); background: #fff; }
.cart-line { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
.cart-total-line { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 18px; }
.cart-total-line .l { font-weight: 700; font-size: 16px; }
.cart-total-line .v { font-family: var(--serif); font-weight: 800; font-size: 24px; color: var(--shu); }
.cart-note { font-size: 12px; color: var(--text-4); text-align: center; margin-top: 12px; }

/* ============================================================
   DETALLE DE PRODUCTO
   ============================================================ */
.pd-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: start; margin-top: 24px; }
.pd-gallery { position: sticky; top: 88px; }
.pd-main {
  height: 480px; border-radius: 26px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; border: 1px solid var(--border-soft); box-shadow: var(--sh-card);
}
.pd-main-blob { width: 150px; height: 150px; border-radius: 50%; }
.pd-main-label { position: absolute; bottom: 18px; font-family: var(--label); font-size: 11px; color: var(--placeholder); letter-spacing: 0.14em; }
.pd-badge { position: absolute; top: 18px; left: 18px; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pd-thumbs { display: flex; gap: 12px; margin-top: 14px; }
.pd-thumb { width: 76px; height: 76px; border-radius: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid transparent; opacity: 0.6; transition: all .2s; }
.pd-thumb i { width: 32px; height: 32px; border-radius: 50%; display: block; }
.pd-thumb:hover { opacity: 0.9; }
.pd-thumb.active { border-color: var(--shu); opacity: 1; }

.pd-brand { font-size: 12px; color: var(--shu); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.pd-name { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; font-family: var(--serif); margin: 6px 0 4px; line-height: 1.05; }
.pd-serie { font-size: 15px; color: var(--text-3); margin-bottom: 20px; }
.pd-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.pd-price { font-family: var(--serif); font-weight: 800; font-size: 34px; color: var(--ink); }
.pd-old { font-size: 18px; color: #bcb3a5; text-decoration: line-through; }
.pd-off { padding: 4px 11px; border-radius: 999px; background: var(--shu); color: #fff; font-size: 12px; font-weight: 700; }
.pd-avail { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 24px; }
.pd-avail .dot { width: 8px; height: 8px; border-radius: 50%; }
.pd-avail.stock { color: #2f7d4f; }
.pd-avail.stock .dot { background: #2f7d4f; }
.pd-avail.pre { color: var(--matcha); }
.pd-avail.pre .dot { background: var(--shu); animation: np-pulse 1.8s ease-out infinite; }
.pd-views-line { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); margin-bottom: 22px; }
.pd-views-line strong { color: var(--ink); font-family: var(--serif); }
.pd-desc { font-size: 15px; color: var(--text-2); line-height: 1.7; margin-bottom: 26px; }
.pd-specs { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 22px; margin-bottom: 26px; }
.pd-specs-title { font-family: var(--serif); font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.pd-spec { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.pd-spec:last-child { border-bottom: none; }
.pd-spec .k { color: var(--text-3); }
.pd-spec .v { font-weight: 600; color: var(--ink); font-family: var(--serif); }
.pd-actions { display: flex; gap: 12px; margin-bottom: 16px; }
.pd-add { flex: 1; padding: 16px; border-radius: 14px; border: none; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; transition: transform .2s, background .2s; }
.pd-add:hover { transform: translateY(-2px); background: var(--shu); }
.pd-add.pre { background: var(--shu); }
.pd-wish-btn { width: 56px; border-radius: 14px; border: 1.5px solid var(--border); background: #fff; font-size: 20px; color: #c9beb0; cursor: pointer; transition: all .2s; }
.pd-wish-btn.on { color: var(--shu); border-color: var(--shu); }
.pd-pre-info { background: linear-gradient(135deg, rgba(217,47,47,0.08), rgba(163,18,42,0.05)); border: 1px solid rgba(217,47,47,0.2); border-radius: 14px; padding: 16px; margin-bottom: 20px; }
.pd-pre-info .row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
.pd-pre-bar { height: 6px; border-radius: 999px; background: rgba(22,19,24,0.08); overflow: hidden; margin-top: 4px; }
.pd-pre-fill { height: 100%; background: linear-gradient(90deg, var(--shu), var(--matcha)); border-radius: 999px; }
.pd-related { margin-top: 70px; }

/* Anticipo en el detalle */
.pd-deposit { margin-bottom: 12px; }
.pd-deposit label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.pd-deposit-row { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 6px 14px; width: fit-content; }
.pd-deposit-row span { color: var(--text-3); font-family: var(--serif); font-weight: 700; }
.pd-deposit-row input { border: none; outline: none; width: 110px; font-family: var(--serif); font-weight: 800; font-size: 20px; color: var(--ink); text-align: center; }
.pd-full-btn { width: 100%; margin-top: 10px; padding: 13px; border-radius: 14px; border: 1.5px solid var(--ink); background: #fff; font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; transition: all .2s; }
.pd-full-btn:hover { background: var(--ink); color: #fff; }
.pd-deadline { margin: 12px 0 0; font-size: 12.5px; color: var(--text-3); }
.pd-deadline b { color: var(--shu); }

/* Etiquetas y resto en el carrito */
.ci-tag { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 4px; }
.ci-tag.anticipo { background: #f6d9d5; color: var(--matcha); }
.ci-tag.completo { background: #e9e4e6; color: var(--ink); }
.ci-resto { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.ci-resto b { color: var(--matcha); font-family: var(--serif); }

/* Botón quitar de la lista de deseos */
.wish-card { position: relative; }
.wish-remove { position: absolute; top: 8px; right: 8px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(22,19,24,0.55); color: #fff; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: background .2s; }
.wish-remove:hover { background: var(--shu); }
.wish-shot, .wish-body { cursor: pointer; }

/* ---------- Cuenta: perfil editable ---------- */
.data-field label.k { display: block; }
.v-input, .phone-input input {
  width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: #fff; font-size: 14px; color: var(--ink); font-family: var(--sans); outline: none; transition: border-color .2s, box-shadow .2s;
}
.v-input:focus, .phone-input input:focus { border-color: var(--shu); box-shadow: 0 0 0 3px rgba(217,47,47,0.1); }
.phone-input { display: flex; align-items: stretch; gap: 8px; }
.phone-input span {
  display: flex; align-items: center; padding: 0 12px; border-radius: 10px; background: var(--field);
  border: 1px solid var(--border); font-size: 14px; font-weight: 700; color: var(--text-2); white-space: nowrap;
}
.phone-input input { flex: 1; }

/* ---------- Cuenta: direcciones ---------- */
.addr-note {
  display: flex; align-items: center; gap: 8px; background: rgba(217,47,47,0.07); border: 1px solid rgba(217,47,47,0.18);
  color: var(--matcha); border-radius: 12px; padding: 12px 16px; font-size: 13.5px; margin-bottom: 18px;
}
.addr-note b { color: var(--shu); }
.addr-actions { display: flex; gap: 14px; margin-top: 14px; }
.btn-text { background: none; border: none; color: var(--shu); font-weight: 700; font-size: 13px; cursor: pointer; font-family: var(--sans); padding: 0; }
.btn-text:hover { text-decoration: underline; }
.btn-text.danger { color: var(--text-3); }
.btn-text.danger:hover { color: var(--shu); }
.addr-add i { font-size: 24px; font-style: normal; }
.addr-form {
  margin-top: 20px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 24px;
  box-shadow: var(--sh-card); animation: np-fade-up .3s ease;
}
.addr-form-title { font-family: var(--serif); font-weight: 700; font-size: 16px; margin-bottom: 18px; }
.addr-form-title span { color: var(--shu); font-weight: 700; }
.addr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; }
.form-field label { font-size: 12px; color: var(--text-3); margin-bottom: 5px; }
.form-field input, .form-field select {
  padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border); background: var(--field);
  font-size: 14px; color: var(--ink); font-family: var(--sans); outline: none; transition: border-color .2s, box-shadow .2s;
}
.form-field input:focus, .form-field select:focus { border-color: var(--shu); box-shadow: 0 0 0 3px rgba(217,47,47,0.1); background: #fff; }
.addr-form-actions { display: flex; gap: 12px; margin-top: 20px; }
@media (max-width: 680px) { .addr-form-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; margin-top: 24px; }
.checkout-side { position: sticky; top: calc(var(--nav-height) + 24px); }
.co-addr { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; cursor: pointer; transition: border-color .2s, background .2s; }
.co-addr:hover { border-color: rgba(217,47,47,0.3); }
.co-addr input { accent-color: var(--shu); margin-top: 3px; }
.co-addr-name { font-weight: 700; font-size: 14px; }
.co-addr-text { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.co-addr-form { margin-top: 6px; padding: 16px; background: var(--field); border-radius: 12px; }
.co-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.co-item:last-child { border-bottom: none; }
.co-item-thumb { width: 54px; height: 54px; border-radius: 10px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.co-item-info { flex: 1; min-width: 0; }
.co-item-name { font-family: var(--serif); font-weight: 700; font-size: 14px; }
.co-item-meta { font-size: 12px; color: var(--text-3); }
.co-item-price { font-family: var(--serif); font-weight: 800; font-size: 15px; }
.co-line { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-2); padding: 7px 0; }
.co-envio { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--text-3); padding: 10px 0; border-top: 1px solid var(--border-soft); margin-top: 6px; }
.co-envio strong { color: var(--matcha); text-align: right; }
.co-total-line { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 4px; border-top: 2px solid var(--border); margin-top: 6px; font-weight: 700; }
.co-total { font-family: var(--serif); font-weight: 800; font-size: 24px; color: var(--shu); }
.co-aviso { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3); border-radius: 12px; padding: 12px; font-size: 12.5px; color: #7a5a10; margin-top: 12px; line-height: 1.5; }
.co-deadline { font-size: 13px; color: var(--text-2); margin-top: 12px; }
.co-deadline b { color: var(--shu); }

/* Pedido confirmado */
.confirmado-box { max-width: 620px; margin: 20px auto; text-align: center; }
.conf-check { width: 72px; height: 72px; border-radius: 50%; background: var(--success); color: #fff; font-size: 38px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.conf-title { font-family: var(--serif); font-size: 34px; font-weight: 800; margin: 0 0 8px; }
.conf-folio { font-size: 16px; color: var(--text-2); margin: 0 0 4px; }
.conf-folio b { font-family: var(--serif); color: var(--shu); font-size: 20px; }
.conf-sub { font-size: 14px; color: var(--text-3); margin: 0 0 8px; }
.conf-siguiente { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 28px; margin-top: 24px; text-align: left; box-shadow: var(--sh-card); }
.conf-paso-num { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--shu); }
.conf-siguiente h3 { font-family: var(--serif); font-size: 20px; font-weight: 800; margin: 6px 0 8px; }
.conf-siguiente p { font-size: 14px; color: var(--text-2); margin: 0 0 18px; }
.conf-chat-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.chat-btn { flex: 1; min-width: 120px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 14px; font-weight: 700; font-size: 15px; color: #fff; transition: transform .2s; }
.chat-btn:hover { transform: translateY(-2px); }
.chat-btn.wa { background: #25D366; }
.chat-btn.fb { background: #0866FF; }
.chat-btn.ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.conf-msg-hint { font-size: 12.5px; color: var(--text-3); margin-top: 16px; }
.conf-msg-hint span { color: var(--ink); font-style: italic; }
@media (max-width: 1024px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-side { position: static; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(120px);
  background: var(--ink); color: #fff; padding: 14px 26px; border-radius: 14px; font-size: 14px; font-weight: 600;
  z-index: 400; transition: transform .4s cubic-bezier(.4,0,.2,1); box-shadow: 0 16px 40px -12px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 10px;
}
.toast .k { color: var(--shu); font-family: var(--serif); }
.toast.show { transform: translateX(-50%) translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-showcase { display: none; }
  .hero-p { margin-left: auto; margin-right: auto; }
  .hero-cta, .hero-stats { justify-content: center; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .catalog-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .account-layout { grid-template-columns: 1fr; }
  .pd-layout { grid-template-columns: 1fr; gap: 28px; }
  .pd-gallery { position: static; }
  .grid-2 { grid-template-columns: 1fr; }
  .promo { grid-template-columns: 1fr; }
  .promo-vid { min-height: 220px; }
}
@media (max-width: 680px) {
  .nav-links { display: none; }
  .nav-search { display: none; }
  .nav-hamburger { display: flex; align-items: center; justify-content: center; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-cards { grid-template-columns: 1fr; }
  .data-grid { grid-template-columns: 1fr; }
  .addr-grid, .wish-grid { grid-template-columns: 1fr; }
  .newsletter-form { width: 100%; }
  .newsletter-form input { flex: 1; width: auto; }
  .page-title { font-size: 34px; }
  .pd-name { font-size: 30px; }
  .section-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 460px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .auth-card { padding: 28px 22px; }
  .code-box { width: 44px; height: 54px; font-size: 22px; }
}

/* Mobile menu */
.mobile-menu { display: none; flex-direction: column; gap: 4px; padding: 12px 20px 20px; background: rgba(247,243,238,0.98); border-bottom: 1px solid var(--border); }
.mobile-menu.open { display: flex; }
.mobile-menu button { padding: 13px 15px; border-radius: 11px; border: none; background: transparent; text-align: left; font-weight: 700; font-size: 15px; color: var(--text-2); cursor: pointer; }
.mobile-menu button.active { background: rgba(217,47,47,0.12); color: var(--shu); }

/* ==================== PANEL ADMIN (back-office oscuro) ==================== */
#screen-admin { background: #131318; min-height: 100vh; }
.admin-wrap { max-width: 1240px; margin: 0 auto; padding: 28px 24px 80px; color: #e9e7e4; }
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-kicker { font-size: 11px; letter-spacing: 3px; color: #b58b5e; font-weight: 600; }
.admin-title { font-family: Georgia, 'Times New Roman', serif; font-size: 34px; color: #fff; margin: 4px 0 0; }
.admin-head-actions { display: flex; gap: 10px; }
.admin-btn { border: 1px solid #33333e; background: #1e1e26; color: #e9e7e4; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s; }
.admin-btn:hover { border-color: #4a4a58; }
.admin-btn.primary { background: #c6282e; border-color: #c6282e; color: #fff; }
.admin-btn.primary:hover { background: #d83a40; }
.admin-btn.ghost { background: transparent; }
.admin-btn.full { width: 100%; margin-top: 8px; padding: 12px; }

.admin-stats { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.adm-stat { background: #1c1c24; border: 1px solid #2a2a34; border-radius: 12px; padding: 14px 20px; min-width: 130px; }
.adm-stat .v { font-size: 22px; font-weight: 700; color: #fff; }
.adm-stat .k { font-size: 11px; letter-spacing: 1px; color: #8a8790; text-transform: uppercase; margin-top: 2px; }

.admin-toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-input { background: #1c1c24; border: 1px solid #2f2f3a; color: #e9e7e4; padding: 10px 12px; border-radius: 9px; font-size: 13px; outline: none; }
.admin-input:focus { border-color: #c6282e; }
.admin-input.search { flex: 1; min-width: 240px; }
select.admin-input { cursor: pointer; }

.admin-table-wrap { overflow-x: auto; border: 1px solid #26262f; border-radius: 14px; background: #17171d; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; }
.admin-table thead th { text-align: left; padding: 12px 14px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #7d7a84; border-bottom: 1px solid #26262f; white-space: nowrap; }
.admin-table tbody td { padding: 13px 14px; border-bottom: 1px solid #212129; vertical-align: middle; }
.admin-table tbody tr { cursor: pointer; transition: background .12s; }
.admin-table tbody tr:hover { background: #1f1f28; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table .mono { font-variant-numeric: tabular-nums; }
.admin-table .prod { max-width: 260px; color: #b8b5bd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-table .dim { color: #6f6c76; }
.admin-table .ok { color: #4fbf7b; }
.admin-table .saldo { color: #f0a13a; font-weight: 600; }
.admin-table .guia { font-size: 11px; color: #6f6c76; margin-top: 3px; }
.admin-empty { text-align: center; color: #7d7a84; padding: 30px; }

.adm-chip { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.adm-chip.ok { background: rgba(79,191,123,.15); color: #6fd89a; }
.adm-chip.info { background: rgba(74,144,226,.15); color: #6ab0f5; }
.adm-chip.warn { background: rgba(240,161,58,.15); color: #f0b45f; }
.adm-chip.pend { background: rgba(160,160,170,.13); color: #b4b1bb; }
.adm-chip.bad { background: rgba(198,40,46,.16); color: #f07278; }
.adm-chip.saldo { background: rgba(240,161,58,.15); color: #f0b45f; }

/* Overlay + drawer */
.admin-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); z-index: 120; display: none; }
.admin-overlay.open { display: block; }
.admin-drawer { position: absolute; top: 0; right: 0; height: 100%; width: 460px; max-width: 94vw; background: #16161c; border-left: 1px solid #2a2a34; box-shadow: -20px 0 50px rgba(0,0,0,.4); overflow-y: auto; color: #e9e7e4; animation: dwIn .22s ease; }
@keyframes dwIn { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.dw-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid #26262f; position: sticky; top: 0; background: #16161c; z-index: 2; }
.dw-folio { font-family: Georgia, serif; font-size: 22px; color: #fff; }
.dw-sub { font-size: 12px; color: #8a8790; margin-top: 4px; display: flex; gap: 8px; align-items: center; }
.dw-x { background: none; border: none; color: #8a8790; font-size: 18px; cursor: pointer; }
.dw-x:hover { color: #fff; }
.dw-body { padding: 18px 22px 40px; display: flex; flex-direction: column; gap: 14px; }
.dw-card { background: #1c1c24; border: 1px solid #26262f; border-radius: 12px; padding: 14px 16px; }
.dw-card-t { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #b58b5e; font-weight: 600; margin-bottom: 10px; }
.dw-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; color: #b8b5bd; }
.dw-kv b { color: #ececec; font-weight: 600; text-align: right; }
.dw-kv.col { flex-direction: column; }
.dw-kv.col b { text-align: left; margin-top: 2px; }
.dw-kv.total { border-top: 1px solid #2a2a34; margin-top: 4px; padding-top: 8px; font-size: 15px; }
.dw-kv .ok { color: #6fd89a; }
.dw-kv .saldo { color: #f0b45f; }
.dw-item { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed #262630; }
.dw-item:last-child { border-bottom: none; }
.dw-item em { color: #b58b5e; font-style: normal; font-size: 11px; }
.dw-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; font-size: 12px; color: #9a97a1; }
.dw-field select, .dw-field input, .dw-field textarea { background: #14141a; border: 1px solid #2f2f3a; color: #e9e7e4; border-radius: 8px; padding: 9px 11px; font-size: 13px; outline: none; font-family: inherit; }
.dw-field select:focus, .dw-field input:focus, .dw-field textarea:focus { border-color: #c6282e; }
.dw-abono { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-size: 13px; padding: 8px 0; border-bottom: 1px dashed #262630; }
.dw-abono .dim { color: #6f6c76; font-size: 11px; margin-top: 2px; }
.dw-del { background: none; border: none; color: #7d5a5c; font-size: 14px; cursor: pointer; }
.dw-del:hover { color: #f07278; }
.dw-abono-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.dw-abono-form .admin-btn { grid-column: 1 / -1; }
.mono { font-variant-numeric: tabular-nums; }

/* ---- Vista Catálogo del panel (alta y edición de figuras) ---- */
.admin-nav { display: inline-flex; background: #17171e; border: 1px solid #26262f; border-radius: 10px; padding: 3px; margin-right: 10px; }
.admin-nav-btn { background: none; border: none; color: #8f8c96; font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 15px; border-radius: 8px; cursor: pointer; transition: all .16s; }
.admin-nav-btn:hover { color: #e9e7e4; }
.admin-nav-btn.active { background: #c6282e; color: #fff; }

.cat-mini { width: 42px; height: 42px; object-fit: contain; border-radius: 7px; background: #fff; display: block; }
.cat-mini.vacia { display: flex; align-items: center; justify-content: center; background: #1c1c24; color: #55525c; font-family: var(--serif); }
.badge-mini { display: inline-block; font-size: 10.5px; letter-spacing: .5px; padding: 3px 8px; border-radius: 20px; background: #2a2a34; color: #b8b5bd; white-space: nowrap; }
.badge-mini.ok { background: rgba(111,216,154,.14); color: #6fd89a; }
.badge-mini.warn { background: rgba(240,180,95,.14); color: #f0b45f; }
.badge-mini.shu { background: rgba(198,40,46,.18); color: #f0888c; }
.badge-mini.gris { background: #22222b; color: #77747e; }
.admin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Aviso de figura agotada dentro de un pedido vivo. Ámbar = revisa; rojo =
   además no hay dinero de por medio, así que cerrarlo es limpio. */
.adm-agotada { display: inline-block; margin-top: 5px; font-size: 10.5px; letter-spacing: .3px; padding: 2px 8px; border-radius: 20px; background: rgba(240,180,95,.14); color: #f0b45f; white-space: nowrap; }
.adm-agotada.libre { background: rgba(198,40,46,.16); color: #f0888c; }

.dw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dw-nota { font-size: 11.5px; color: #77747e; line-height: 1.55; margin-top: 4px; }
.dw-nota-sm { font-size: 10.5px; color: #66636d; }
.dw-nota .pos { color: #6fd89a; }
.dw-nota .neg { color: #f07278; }
.dw-aviso { background: rgba(240,180,95,.1); border: 1px solid rgba(240,180,95,.28); color: #f0b45f; font-size: 12.5px; line-height: 1.6; border-radius: 10px; padding: 11px 14px; }
.dw-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #b8b5bd; padding: 6px 0; cursor: pointer; }
.dw-check input { accent-color: #c6282e; width: 16px; height: 16px; }
.dw-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid #26262f; background: #17171e; position: sticky; bottom: 0; }

.fg-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; margin-bottom: 12px; }
.fg-foto { position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: #fff; border: 2px solid transparent; }
.fg-foto.principal { border-color: #c6282e; }
.fg-foto img { width: 100%; height: 100%; object-fit: contain; }
.fg-tag { position: absolute; left: 0; bottom: 0; right: 0; background: #c6282e; color: #fff; font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; text-align: center; padding: 2px; }
.fg-acciones { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; opacity: 0; transition: opacity .16s; }
.fg-foto:hover .fg-acciones, .fg-foto:focus-within .fg-acciones { opacity: 1; }
.fg-acciones button { width: 24px; height: 24px; border-radius: 6px; border: none; background: rgba(20,20,26,.85); color: #fff; font-size: 12px; cursor: pointer; line-height: 1; }
.fg-acciones button:hover { background: #c6282e; }
/* En táctil no hay hover: las acciones se dejan siempre visibles. */
@media (hover: none) { .fg-acciones { opacity: 1; } }
.fg-subir { display: block; text-align: center; padding: 13px; border: 1.5px dashed #3a3a46; border-radius: 10px; color: #9a97a1; font-size: 13px; cursor: pointer; transition: all .16s; }
.fg-subir:hover { border-color: #c6282e; color: #e9e7e4; }
.fg-subir input { display: none; }
.dim { color: #6f6c76; }

/* Nuevo pedido: buscador de figuras + items */
.np-res { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.np-res-item { text-align: left; background: #14141a; border: 1px solid #2a2a34; border-radius: 8px; padding: 9px 11px; color: #e0ded9; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.np-res-item:hover { border-color: #c6282e; }
.np-res-item span { color: #8a8790; font-size: 12px; white-space: nowrap; }
.np-items { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.np-item { background: #14141a; border: 1px solid #26262f; border-radius: 9px; padding: 10px 12px; }
.np-item-n { font-size: 13px; margin-bottom: 8px; }
.np-item-ctrl { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.np-item-ctrl label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #8a8790; }
.np-item-ctrl input, .np-item-ctrl select { background: #1c1c24; border: 1px solid #2f2f3a; color: #e9e7e4; border-radius: 7px; padding: 6px 8px; font-size: 12px; width: 78px; }
.np-item-ctrl .dw-del { margin-left: auto; }

/* Etiqueta de pasarela/tipo en cada abono */
.ab-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ab-top b { color: #ececec; }
.ab-tag { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; }
.ab-tag.manual { background: rgba(181,139,94,.18); color: #d6b389; }
.ab-tag.stripe { background: rgba(99,91,255,.18); color: #a6a0ff; }
.ab-tag.mercadopago { background: rgba(0,158,227,.18); color: #5cc4f5; }

/* Filtro de fechas + card de abonado */
.admin-date { display: flex; flex-direction: column; gap: 2px; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: #7d7a84; }
.admin-date input { color-scheme: dark; }
.adm-stat .v.ok { color: #6fd89a; }

/* ==================== MODAL LEGAL + CHECKBOX REGISTRO ==================== */
.reg-check { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 16px; font-size: 12.5px; color: #6a6a72; line-height: 1.5; cursor: pointer; }
.reg-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: #c6282e; flex-shrink: 0; }

.legal-overlay { position: fixed; inset: 0; background: rgba(20,16,16,.55); backdrop-filter: blur(2px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.legal-overlay.open { display: flex; }
.legal-modal { background: #fdfcfb; width: 100%; max-width: 720px; max-height: 86vh; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
.legal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid #eee6e0; }
.legal-head h3 { margin: 0; font-size: 16px; color: #1a1a1a; font-weight: 600; }
.legal-x { background: none; border: none; font-size: 18px; color: #9a938d; cursor: pointer; }
.legal-x:hover { color: #1a1a1a; }
.legal-body { padding: 22px 26px 34px; overflow-y: auto; white-space: pre-wrap; font-size: 13.5px; line-height: 1.7; color: #3a3632; font-family: inherit; }

/* Toggle de preferencias de marketing en la cuenta */
.pref-toggle { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #5a5a62; line-height: 1.5; cursor: pointer; }
.pref-toggle input { margin-top: 2px; width: 17px; height: 17px; accent-color: #c6282e; flex-shrink: 0; }

/* ==================== FIGURA AGOTADA ==================== */
.pcard-badge.agotada { background: #3a3a3f; color: #fff; }
.pcard.is-agotada .pcard-shot img { filter: grayscale(.9) opacity(.75); }
.pcard.is-agotada .pcard-price { color: #9a938d; }
.pd-agotada { background: #f6f1ec; border: 1px solid #e5d9cf; border-radius: 12px; padding: 14px 16px; font-size: 14px; color: #5a534d; margin: 14px 0; line-height: 1.55; }
.pd-agotada b { color: #1a1a1a; }
.pd-badge.agotada { background: #3a3a3f; color: #fff; }

/* Correos al cliente (detalle de pedido admin) */
.dw-mails { display: flex; gap: 8px; flex-wrap: wrap; }
.dw-mails .admin-btn { font-size: 12px; padding: 8px 12px; }
.dw-mail-log { margin-top: 12px; border-top: 1px dashed #262630; padding-top: 8px; }
.dw-mail-row { font-size: 12px; color: #9ad8ae; padding: 3px 0; }
.dw-mail-row.err { color: #f07278; }
.dw-mail-row .dim { color: #6f6c76; }

/* Vista de métricas (orgánicas) */
.met-nota { align-self: center; font-size: 12px; color: #7d7a84; }
.met-sub { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #b58b5e; font-weight: 600; margin: 18px 0 10px; }

/* Filtro multi-selección (casillas) del panel de métricas */
.ms { position: relative; }
.ms-btn { display: flex; align-items: center; gap: 8px; justify-content: space-between; min-width: 190px;
  background: #1c1c24; border: 1px solid #2f2f3a; color: #e9e7e4; padding: 10px 12px;
  border-radius: 9px; font-size: 13px; cursor: pointer; font-family: inherit; text-align: left; }
.ms-btn:hover { border-color: #4a4a58; }
.ms.activo .ms-btn { border-color: #c6282e; }
.ms-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.ms-panel { display: none; position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 260px;
  max-height: 300px; overflow-y: auto; background: #1c1c24; border: 1px solid #33333e;
  border-radius: 10px; padding: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.ms.open .ms-panel { display: block; }
.ms-opt { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px;
  font-size: 13px; color: #d8d5dc; cursor: pointer; }
.ms-opt:hover { background: #262630; }
.ms-opt input { width: 15px; height: 15px; accent-color: #c6282e; flex-shrink: 0; }
/* el multiselect vive dentro de .admin-date: no heredar mayúsculas ni tracking */
.ms, .ms-btn, .ms-panel, .ms-opt { text-transform: none; letter-spacing: normal; }

/* Desglose de pedidos por estado de cobro */
.adm-stat .v.warn { color: #f0b45f; }
.adm-stat .v.dim { color: #8a8790; }
.admin-table .warn { color: #f0b45f; }
.met-desglose { font-size: 10px; margin-top: 3px; display: flex; gap: 3px; color: #55535c; }

/* Gráficas circulares (donas) del panel de métricas */
.met-charts { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0 6px; }
.met-chart { flex: 1; min-width: 320px; background: #17171d; border: 1px solid #26262f; border-radius: 14px; padding: 16px 18px; }
.met-chart-t { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #b58b5e; font-weight: 600; margin-bottom: 12px; }
.don-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.don-svg { width: 140px; height: 140px; flex-shrink: 0; }
.don-c1 { fill: #fff; font-size: 17px; font-weight: 700; }
.don-c2 { fill: #7d7a84; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
.don-leg { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 6px; }
.don-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c9c6cf; }
.don-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.don-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.don-val { color: #ececec; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table .bad { color: #f07278; }
.adm-stat .v.bad { color: #f07278; }
.admin-table tr.met-total td { background: #1e1e26; border-top: 1px solid #33333e; }
.admin-table tr.met-total { cursor: default; }

/* Gráficas de barras y líneas + chips de variación */
.met-chart-full { margin: 14px 0; }
.chart-svg { width: 100%; height: auto; display: block; }
.gr-line { stroke: #26262f; stroke-width: 1; }
.bar-v { fill: #c9c6cf; font-size: 10px; }
.bar-x { fill: #6f6c76; font-size: 9px; }
.bar-y { fill: #55535c; font-size: 9px; }
.chart-leg { display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 10px; font-size: 12px; color: #c9c6cf; }
.met-nota-sm { font-size: 10px; color: #6f6c76; text-transform: none; letter-spacing: normal; font-weight: 400; }
.met-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.met-sub-row select { text-transform: none; letter-spacing: normal; font-weight: 400; padding: 7px 10px; }
.pct { display: inline-block; font-size: 10px; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.adm-stat .pct { display: block; margin: 5px 0 0; }
.pct-up { color: #6fd89a; }
.pct-down { color: #f07278; }
.pct-eq, .pct-na { color: #55535c; }

/* Explicación bajo cada card — oculta hasta pulsar "Explicar métricas" */
.adm-ayuda { display: none; }
body.explicar .adm-ayuda {
  display: block; margin-top: 9px; padding-top: 9px; border-top: 1px solid #2a2a34;
  font-size: 11.5px; line-height: 1.5; color: #8a8790; text-transform: none; letter-spacing: normal;
}
/* con la explicación visible caben menos por fila, pero se leen */
body.explicar .met-grupo .adm-stat { flex: 1 1 250px; max-width: 340px; }
.adm-stat .v.oro { color: #d8ab72; }

/* Encabezados ordenables */
.admin-table th.th-orden { cursor: pointer; user-select: none; position: relative; padding-right: 16px; }
.admin-table th.th-orden:hover { color: #d8d5da; }
.admin-table th.th-orden::after { content: '⇅'; position: absolute; right: 5px; opacity: .25; font-size: 10px; }
.admin-table th.orden-asc::after { content: '▲'; opacity: .9; color: #b58b5e; }
.admin-table th.orden-desc::after { content: '▼'; opacity: .9; color: #b58b5e; }
.gr-cero { stroke: #55535c; stroke-width: 1; stroke-dasharray: 3 3; }

/* Cards del dashboard agrupadas por tema */
.met-grupo { margin-bottom: 20px; }
.met-grupo .admin-stats { margin-bottom: 0; }
.met-grupo-t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: #b58b5e;
  font-weight: 600; margin: 0 0 9px; padding-bottom: 7px; border-bottom: 1px solid #26262f; }
.met-grupo-t span { text-transform: none; letter-spacing: normal; font-weight: 400;
  font-size: 11.5px; color: #6f6c76; }
.met-grupo .adm-stat { flex: 1 1 150px; max-width: 250px; }   /* que 2 cards no se estiren a lo ancho */
#metComparacion { align-self: stretch; line-height: 1.7; max-width: 900px; margin: 2px 0 18px; }
#metComparacion b { color: #b9b6bd; font-weight: 600; }
#metComparacion i { color: #b9b6bd; font-style: normal; }
#metComparacion .pct { margin: 0 1px; }

/* ==================== DETALLE DEL PEDIDO (VISTA DEL CLIENTE) ==================== */
/* Distinto del drawer del panel: aquí no hay nada editable, solo lo que la
   persona necesita saber de su compra. */
.order-click { cursor: pointer; flex-direction: column; align-items: stretch; gap: 10px;
  transition: border-color .15s, transform .15s; }
.order-click:hover { border-color: var(--shu); transform: translateY(-1px); }
.order-click:focus-visible { outline: 2px solid var(--shu); outline-offset: 2px; }
.order-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-money { font-size: 13px; color: var(--text-2); }
.order-ver { font-size: 12px; color: var(--shu); font-weight: 600; }

.mp-overlay { position: fixed; inset: 0; background: rgba(20,18,16,.55); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; z-index: 120; padding: 20px; }
.mp-overlay.open { display: flex; }
.mp-panel { background: #fff; border-radius: 16px; width: min(560px, 100%); max-height: 88vh;
  overflow-y: auto; padding: 26px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.mp-x { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 26px;
  line-height: 1; cursor: pointer; color: var(--text-3); }
.mp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  flex-wrap: wrap; margin-bottom: 20px; padding-right: 30px; }
.mp-folio { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.mp-fecha { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.mp-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.mp-card-t { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; margin-bottom: 12px; }
.mp-item, .mp-kv { display: flex; justify-content: space-between; gap: 14px;
  font-size: 14px; padding: 6px 0; }
.mp-item { border-bottom: 1px dashed var(--line); }
.mp-kv.mp-total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; font-size: 15px; }
.mp-kv .ok { color: #1f7a4d; } .mp-kv .saldo { color: var(--shu); }
.mp-vacio, .mp-nota { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.mp-nota { margin-top: 8px; }
.mp-dir { font-size: 13.5px; color: var(--text-2); margin-top: 10px; line-height: 1.5; }

/* ==================== MÓVIL ==================== */
@media (max-width: 680px) {
  .mp-overlay { padding: 0; align-items: flex-end; }
  /* En pantalla chica ocupa todo el ancho y sube desde abajo, como una hoja:
     alcanzar la X arriba de un modal centrado es incómodo con una sola mano. */
  .mp-panel { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; padding: 22px 18px 28px; }
  .mp-folio { font-size: 19px; }

  /* Los videos de fondo se descargan aunque estén de adorno, y en móvil eso
     suele ser plan de datos. Se ocultan y en su lugar va la misma imagen que
     usan de póster, servida como fondo del contenedor. */
  .video-band video, .promo-vid video { display: none; }
  .video-band { background: url('images/sumi-mountains.png') center/cover no-repeat; }
  .promo-vid { background: url('images/sumi-lake.png') center/cover no-repeat; }
}

/* El carrito lateral vive estacionado fuera de pantalla a la derecha hasta que
   se abre. Eso hacía que la página se pudiera arrastrar de lado en el teléfono:
   se veía una franja vacía y el contenido "bailaba" al hacer scroll.
   `clip` en vez de `hidden` porque `hidden` crea un contenedor de scroll y
   rompería el encabezado fijo (position: sticky). */
body { overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }

/* El carrito ya se desplazaba fuera de pantalla con transform, pero un elemento
   fixed y transformado sigue contando para el área desplazable del documento:
   por eso la página se podía arrastrar de lado ~30 px en el teléfono.
   `visibility: hidden` sí lo saca del cálculo (y de paso los lectores de
   pantalla dejan de anunciar un carrito que no está abierto). La transición
   retrasa el ocultado para que la animación de salida se siga viendo. */
.cart-drawer { visibility: hidden; transition: transform .38s cubic-bezier(.4,0,.2,1), visibility 0s linear .38s; }
.cart-drawer.open { visibility: visible; transition: transform .38s cubic-bezier(.4,0,.2,1), visibility 0s; }

/* Aclara que los correos del pedido no son opcionales: son finalidad primaria
   del servicio, no marketing. Evita que alguien crea que apagando esto deja de
   recibir la confirmación de su compra. */
.setting-nota { font-size: 12.5px; color: var(--text-3); line-height: 1.55;
  padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line); }

/* ==================== ESTADO DE CARGA EN BOTONES ==================== */
/* Una acción lenta sin señal invita a pulsar otra vez, y cada pulsación crea
   otro pedido: así aparecieron pedidos duplicados en producción. El botón se
   desactiva, cambia su texto y muestra un giro; además `conBloqueo` ignora
   reentradas aunque el clic llegue por otra vía (Enter, doble toque). */
button.cargando, .btn.cargando, .admin-btn.cargando {
  opacity: .75; cursor: progress; pointer-events: none;
}
.spinner {
  display: inline-block; width: 13px; height: 13px; margin-right: 8px;
  vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
/* Quien pidió menos movimiento ve el botón atenuado, sin el giro. */
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; opacity: .6; } }

/* Guía de montos al registrar un abono: cuánto lleva pagado, cuánto falta y —lo
   que no se veía— el anticipo MÍNIMO para dar la preventa por apartada. Sin ese
   dato había que ir a buscar la figura para saber si el abono alcanzaba. */
.dw-abono-guia { display: flex; gap: 22px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px;
  background: #1c1c24; border: 1px solid #2a2a34; border-radius: 9px; }
.dw-abono-guia > div { display: flex; flex-direction: column; gap: 2px; }
.dw-abono-guia span { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: #8a8790; }
.dw-abono-guia b { font-size: 15px; }
.dw-abono-guia .ok { color: #6fd89a; } .dw-abono-guia .saldo { color: #f0b45f; }

/* ==================== CONTACTO FLOTANTE ==================== */
/* La tienda vende por chat: el contacto tiene que estar siempre a un toque, no
   escondido en el pie. En escritorio va en columna abajo a la derecha. */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: flex; flex-direction: column; gap: 10px; }
.fab-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.22); transition: transform .16s ease, box-shadow .16s ease; }
.fab-btn svg { width: 25px; height: 25px; fill: #fff; }
.fab-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.fab-btn:focus-visible { outline: 3px solid var(--shu); outline-offset: 3px; }
.fab-btn.wa { background: #25D366; }
.fab-btn.ig { background: linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888); }
.fab-btn.fb { background: linear-gradient(45deg,#0695FF,#A334FA); }

@media (max-width: 680px) {
  /* En el teléfono, en fila horizontal y más pequeñas: una columna de tres
     burbujas tapa el contenido, y el pulgar llega mejor al borde inferior.
     Se separan del borde para no chocar con la barra de gestos del sistema. */
  .fab { flex-direction: row; right: 12px; bottom: 14px; gap: 8px; }
  .fab-btn { width: 42px; height: 42px; }
  .fab-btn svg { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) { .fab-btn { transition: none; } .fab-btn:hover { transform: none; } }

/* ==================== PEDIDOS DEL CLIENTE: IMÁGENES Y CIFRAS ==================== */
/* Antes solo había texto. Reconocer una figura por su foto es inmediato; leer
   un título de 60 caracteres, no. Y las cifras que importan —total, pagado,
   falta y fecha límite— estaban perdidas en una línea corrida. */
.order-minis { display: flex; gap: 6px; align-items: center; }
.order-minis img, .order-minis .sin-img, .order-minis .mas {
  width: 46px; height: 46px; border-radius: 8px; background: #fff;
  border: 1px solid var(--line); object-fit: contain; padding: 3px; flex-shrink: 0;
}
.order-minis .sin-img, .order-minis .mas {
  display: grid; place-items: center; color: var(--text-3); font-size: 15px;
  background: var(--bg-2); padding: 0;
}
.order-minis .mas { font-size: 13px; font-weight: 700; }

.order-cifras { display: flex; gap: 24px; flex-wrap: wrap; padding-top: 4px; }
.order-cifras > div { display: flex; flex-direction: column; gap: 1px; }
.order-cifras span { font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--text-3); }
.order-cifras b { font-size: 15px; }
.order-cifras .ok { color: #1f7a4d; } .order-cifras .saldo { color: var(--shu); }

/* Bloque de cifras del detalle: lo que la persona busca primero. */
.mp-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px; padding: 16px; margin-bottom: 16px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; }
.mp-res-item { display: flex; flex-direction: column; gap: 3px; }
.mp-res-item span { font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--text-3); }
.mp-res-item b { font-size: 19px; font-family: var(--serif); }
.mp-res-item.destacado b { font-size: 23px; }
.mp-res-item .ok { color: #1f7a4d; } .mp-res-item .saldo { color: var(--shu); }
.mp-res-item .limite { font-size: 15px; }

.mp-prod { display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px dashed var(--line); }
.mp-prod-img { width: 54px; height: 54px; border-radius: 9px; background: #fff;
  border: 1px solid var(--line); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; }
.mp-prod-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.mp-prod-img .sin-img { color: var(--text-3); font-size: 18px; }
.mp-prod-txt { flex: 1; min-width: 0; }
.mp-prod-nom { font-size: 13.5px; line-height: 1.35; }
.mp-prod-cant { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.mp-prod > b { white-space: nowrap; }

/* Cancelar: acción destructiva, así que discreta — no compite con WhatsApp. */
.mp-cancelar { display: block; width: 100%; margin-top: 10px; padding: 11px;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  color: var(--text-3); font-size: 13px; cursor: pointer; transition: all .15s; }
.mp-cancelar:hover { border-color: var(--shu); color: var(--shu); }

/* ==================== CAPA DE ESPERA A PANTALLA COMPLETA ==================== */
/* Desactivar solo el botón no basta: mientras se procesa un pedido la persona
   puede pulsar OTRA cosa y dejar todo a medias. Esta capa cubre la pantalla e
   impide cualquier interacción hasta que la petición termine. */
.capa-carga {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20,18,16,.55); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center;
}
.capa-carga.visible { display: flex; }
.capa-caja {
  display: flex; align-items: center; gap: 14px;
  background: #fff; color: var(--ink); padding: 20px 26px; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.3); font-size: 15px; font-weight: 600;
  max-width: calc(100vw - 40px);
}
.capa-spinner {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2.5px solid var(--shu); border-right-color: transparent;
  border-radius: 50%; animation: girar .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .capa-spinner { animation: none; opacity: .6; }
  .capa-carga { backdrop-filter: none; }
}

/* ==================== CANALES DE CONTACTO Y CANCELAR ==================== */
/* Antes solo se ofrecía WhatsApp; quien vive en Instagram o Messenger tenía que
   cambiar de aplicación para preguntar por su pedido. */
.mp-canales { display: flex; gap: 8px; flex-wrap: wrap; }
.canal { flex: 1 1 100px; text-align: center; padding: 11px 10px; border-radius: 10px;
  font-size: 13px; font-weight: 700; color: #fff; transition: transform .14s, filter .14s; }
.canal:hover { transform: translateY(-1px); filter: brightness(1.07); }
.canal.wa { background: #25D366; }
.canal.ig { background: linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888); }
.canal.fb { background: linear-gradient(45deg,#0695FF,#A334FA); }

.mp-contacto { margin-top: 4px; }
.mp-contacto-t { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; margin-bottom: 10px; }

/* En la fila: los canales y el cancelar quedan ANTES de "Ver detalle", para no
   tener que abrir el pedido solo para escribir o cerrarlo. */
.order-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 4px; }
.order-acciones .mp-canales { flex: 1 1 240px; }
.order-cancelar, .mp-cancelar {
  padding: 11px 16px; border-radius: 10px; border: 1.5px solid var(--shu);
  background: none; color: var(--shu); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.order-cancelar:hover, .mp-cancelar:hover { background: var(--shu); color: #fff; }
.mp-cancelar { display: block; width: 100%; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .canal:hover { transform: none; } }

/* La casilla de términos del checkout: obligatoria, así que se distingue del
   resto del resumen sin gritar. El asterisco marca que no es opcional. */
.co-terminos { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; }
.co-terminos b, .reg-check b { color: var(--shu); }
.reg-check a { color: var(--shu); font-weight: 600; }