/* ── VARIABLES ─────────────────────────────────────────────────────────── */
:root {
  --bg:          #080401;
  --bg-med:      #100704;
  /* FIX: antes era #18090302 (hex de 8 dígitos  alpha ~1%, fondo casi invisible) */
  --card:        rgba(24,9,3,.92);
  --card-solid:  #180903;
  --card-hover:  #231005;
  --border:      #2E1306;
  --border-acc:  #5A3010;
  --gold:        #C8921A;
  --gold-bright: #E0A828;
  --gold-dim:    #7A5810;
  --cream:       #F2E2C4;
  --cream-dim:   #B09878;
  /* FIX contraste: antes #7A6048 (3,6:1 sobre --bg, por debajo de AA 4,5:1) */
  --muted:       #9A7E5F;
  --danger:      #8B2020;
  --danger-h:    #A03030;
  --r:           12px;
  --r-sm:        8px;
  --r-pill:      999px;
  /* Escala de espaciado (para reglas nuevas; las antiguas migran gradualmente) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* Escala tipográfica — .62rem (≈10px) es el MÍNIMO legible en móvil */
  --tx-2xs: .62rem; --tx-xs: .68rem; --tx-sm: .75rem; --tx-md: .88rem; --tx-lg: 1.05rem;
  --tr:          0.18s ease;
  /* Vocabulario de movimiento — un solo lenguaje para toda la app */
  --ease-salida:  cubic-bezier(.2, .8, .3, 1);      /* algo que aparece: rápido y se posa */
  --ease-entrada: cubic-bezier(.4, 0, 1, 1);        /* algo que se va: acelera y desaparece */
  --ease-muelle:  cubic-bezier(.34, 1.56, .64, 1);  /* rebote con carácter */
  --t-tacto: .13s;   /* respuesta al dedo: inmediata */
  --t-corta: .22s;   /* micro-transición */
  --t-media: .34s;   /* superficie que entra */
  --shadow-gold: 0 0 0 1px rgba(200,146,26,.12), 0 4px 24px rgba(0,0,0,.6);
  --shadow-card: 0 2px 16px rgba(0,0,0,.5);
}

/* ── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Sin flash gris/azul nativo al tocar en móvil (feedback propio via :active) */
* { -webkit-tap-highlight-color: transparent; }
/* overscroll-behavior: none en html + body bloquea el "pull-to-refresh" nativo
   del navegador (recargar al deslizar hacia abajo) y el scroll-chaining. */
html {
  scroll-behavior: smooth;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;       /* fallback navegadores antiguos */
  min-height: 100dvh;      /* viewport dinámico móvil (barra de URL) */
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(120,60,10,.18) 0%, transparent 70%);
  color: var(--cream);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── SCROLLBAR ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-acc); border-radius: 4px; }
@media (hover: hover) {
  ::-webkit-scrollbar-thumb:hover { background: var(--gold); }
}

/* ── TOP NAV ─────────────────────────────────────────────────────────────── */
.top-nav {
  position: sticky; top: 0; z-index: 100;
  /* Respeta el notch/status-bar en PWA instalada (viewport-fit=cover) */
  height: calc(60px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: rgba(8,4,1,.96);
  border-bottom: 1px solid rgba(200,146,26,.2);
  display: flex; align-items: center;
  padding-left: 20px; padding-right: 20px; gap: 12px;
  flex-shrink: 0;
}
.top-nav--home {
  justify-content: center;
  border-bottom-color: transparent;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-brand {
  font-size: .9rem; font-weight: 700;
  letter-spacing: .4em; color: var(--gold);
  font-family: Georgia, serif;
}
.nav-title {
  flex: 1; text-align: center;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .2em; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Hueco derecho del nav para equilibrar el botón "volver" y centrar el logo.
   Puede encogerse en pantallas estrechas (antes era width:80px inline fijo). */
.nav-spacer { width: 80px; flex-shrink: 2; min-width: 0; }

/* Botón "volver" con nombre variable: truncar para no saturar la barra */
.nav-back { max-width: 40vw; }
.nav-back-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; display: block;
}

/* Logo en nav */
.nav-logo {
  height: 48px; width: auto;
  object-fit: contain;
  display: block;
}
/* El <a> que envuelve el logo ocupa el espacio central del nav */
.top-nav > a:has(.nav-logo--inner) {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.nav-logo--inner {
  height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, var(--gold) 0%, #A87015 100%);
  color: #080401;
  border: none; border-radius: var(--r-sm);
  padding: 10px 22px;
  font: 600 .82rem/1 'Segoe UI', sans-serif;
  letter-spacing: .06em; cursor: pointer;
  transition: all var(--tr);
  white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(200,146,26,.25);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .btn:hover {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
  box-shadow: 0 4px 16px rgba(200,146,26,.4);
  transform: translateY(-1px);
}
}
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-sm { padding: 7px 14px; font-size: .76rem; border-radius: 6px; }

.btn-ghost {
  background: rgba(200,146,26,.07);
  color: var(--gold);
  border: 1px solid rgba(200,146,26,.25);
  box-shadow: none;
}
@media (hover: hover) {
  .btn-ghost:hover {
  background: rgba(200,146,26,.15);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(200,146,26,.15);
  transform: none;
}
}

/* Botón de peligro sólido (lo usa el confirm-modal compartido de base.html).
   Sin esta clase heredaba el dorado de .btn y "Eliminar" no parecía destructivo. */
.btn-danger {
  background: linear-gradient(135deg, var(--danger-h) 0%, var(--danger) 100%);
  color: var(--cream);
  border: 1px solid rgba(139,32,32,.6);
  box-shadow: 0 2px 8px rgba(139,32,32,.3);
}
@media (hover: hover) {
  .btn-danger:hover {
    background: linear-gradient(135deg, #B84040 0%, var(--danger-h) 100%);
    box-shadow: 0 4px 16px rgba(139,32,32,.45);
  }
}

.btn-danger-outline {
  background: rgba(139,32,32,.08);
  color: var(--danger);
  border: 1px solid rgba(139,32,32,.35);
  box-shadow: none;
}
@media (hover: hover) {
  .btn-danger-outline:hover {
  background: var(--danger); color: var(--cream);
  transform: none;
}
}

.btn-file { position: relative; overflow: hidden; }
.file-btn-group { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn-file input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}

.btn-icon {
  width: 28px; height: 28px;
  background: rgba(255,255,255,.04);
  color: var(--muted); border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .82rem; cursor: pointer;
  transition: all var(--tr); flex-shrink: 0;
}
@media (hover: hover) {
  .btn-icon:hover { background: var(--gold); color: #080401; border-color: var(--gold); }
  .btn-icon--danger:hover { background: var(--danger); color: var(--cream); border-color: var(--danger); }
}
.btn-icon--danger { color: var(--danger); border-color: rgba(139,32,32,.3); }

/* ── LAYOUT ──────────────────────────────────────────────────────────────── */
main { min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px); }
.page-padding { padding: 32px 32px; }

@media (max-width: 480px) {
  .page-padding { padding: 16px 16px; }
}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 340px;
  padding: calc(60px + env(safe-area-inset-top)) 20px 44px;
  background: linear-gradient(180deg, #1A0800 0%, #0D0500 50%, var(--bg) 100%);
  border-bottom: 1px solid rgba(200,146,26,.15);
  text-align: center; gap: 12px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(200,146,26,.08) 0%, transparent 70%);
  pointer-events: none;
}
/* Logo en hero */
.hero-logo {
  width: min(420px, 88vw);
  height: auto;
  object-fit: contain;
  /* La sombra se pinta UNA vez y no se anima (ver @keyframes logoPulse) */
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.7));
  margin-bottom: 4px;
}
/* El halo dorado: capa propia detrás del logo, solo con opacidad animada. */
.hero-logo-wrap { position: relative; display: inline-flex; }
.hero-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(200,146,26,.5), rgba(200,146,26,.16) 55%, transparent 72%);
  opacity: .38;
  animation: logoPulse 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo-wrap::before { animation: none; }
}

.hero-deco { color: var(--gold-dim); font-size: .8rem; letter-spacing: .7em; font-family: Georgia, serif; }
.hero-title {
  font-size: clamp(2rem, 8vw, 3.8rem);
  font-weight: 700; color: var(--gold);
  letter-spacing: clamp(.12em, 3vw, .6em);
  font-family: Georgia, serif;
  text-shadow: 0 0 60px rgba(200,146,26,.3);
}
.hero-subtitle { color: var(--muted); font-style: italic; font-size: .95rem; letter-spacing: .3em; }
.hero-btns { display: flex; gap: 14px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.btn-hero { padding: 14px 36px; font-size: .9rem; letter-spacing: .18em; border-radius: 10px; }
.btn-hero--ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(200,146,26,.5);
  box-shadow: none;
}
@media (hover: hover) {
  .btn-hero--ghost:hover {
  background: rgba(200,146,26,.08);
  border-color: var(--gold);
  box-shadow: none;
  transform: translateY(-1px);
}
}
.btn-hero--wish {
  background: transparent;
  color: #e8748a;
  border: 1px solid rgba(232,116,138,.4);
  box-shadow: none;
}
@media (hover: hover) {
  .btn-hero--wish:hover {
  background: rgba(232,116,138,.08);
  border-color: #e8748a;
  box-shadow: none;
  transform: translateY(-1px);
}
}

/* ── CIGAR SEARCH ────────────────────────────────────────────────────────── */
.cigar-search-wrap {
  padding-top: 20px;
  padding-bottom: 8px;
}
.cigar-search-bar {
  display: flex; align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(200,146,26,.25);
  border-radius: var(--r);
  padding: 0 14px;
  gap: 10px;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.cigar-search-bar:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,146,26,.1);
}
.cigar-search-icon { color: var(--gold-dim); font-size: 1rem; flex-shrink: 0; }
.cigar-search-input {
  flex: 1;
  background: none; border: none; outline: none;
  color: var(--cream);
  font: 500 .95rem/1 'Segoe UI', sans-serif;
  padding: 14px 0;
}
.cigar-search-input::placeholder { color: var(--muted); }
.cigar-search-clear {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: .9rem; padding: 4px;
  transition: color var(--tr);
  flex-shrink: 0;
}
@media (hover: hover) {
  .cigar-search-clear:hover { color: var(--cream); }
}

.search-results-header { padding-top: 8px; padding-bottom: 4px; }
.search-results-count {
  font-size: .78rem; letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase;
}

.search-catalog-section { padding: 0; }
.search-catalog-label {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-dim); padding: 12px 20px 8px;
  border-top: 1px solid rgba(200,146,26,.12);
}
/* Cards del catálogo: cursor pointer, sin href */
.card--catalog { cursor: pointer; }
@media (hover: hover) {
  .card--catalog:hover { border-color: var(--gold); }
}
.search-catalog-hint { padding: 12px 0; color: var(--muted); font-size: .85rem; }

/* ── STATS BAR ───────────────────────────────────────────────────────────── */
.stats-bar {
  display: flex; align-items: center; justify-content: center; gap: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-med) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 24px clamp(8px, 4vw, 40px);
}
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1 1 0; min-width: 0;
  padding: 0 clamp(6px, 3.5vw, 40px);
}
.stat-value {
  font-size: clamp(1.5rem, 5.5vw, 3rem); font-weight: 700; color: var(--gold); line-height: 1;
  font-family: Georgia, serif;
  text-shadow: 0 0 30px rgba(200,146,26,.25);
}
.stat-label {
  font-size: clamp(.6rem, 1.6vw, .68rem);
  color: var(--muted); letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
}
.stat-divider { width: 1px; height: 48px; background: var(--border); flex-shrink: 0; }

@media (max-width: 520px) {
  .stats-bar { flex-wrap: wrap; padding: 0; }
  .stat-divider { display: none; }
  .stat {
    flex: 0 0 50%; min-width: 0;
    padding: 20px 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  /* Columna derecha (PUROS=3º hijo, DESEADOS=7º hijo) — sin borde derecho */
  .stat:nth-child(3), .stat:nth-child(7) { border-right: none; }
  /* Fila inferior (BOTELLAS=5º, DESEADOS=7º) — sin borde inferior */
  .stat:nth-child(5), .stat:nth-child(7) { border-bottom: none; }
  .stat-value { font-size: 2rem; }
  .stat-label { font-size: .62rem; letter-spacing: .12em; }
}

/* ── RECENT LIST ─────────────────────────────────────────────────────────── */
.recent-section { padding: 40px 32px 48px; }
@media (max-width: 480px) {
  .recent-section { padding: 28px 16px 40px; }
}
.section-title {
  font-size: .7rem; color: var(--gold);
  font-weight: 700; letter-spacing: .4em; text-transform: uppercase;
}
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--border-acc) 0%, transparent 100%);
  margin: 10px 0 22px;
}
.empty-msg { color: var(--muted); font-style: italic; font-size: .9rem; padding: 20px 0; }
.empty-page { display:flex; align-items:center; justify-content:center; min-height:60vh; padding:40px; text-align:center; }
.recent-list { display: flex; flex-direction: column; gap: 8px; }
.recent-row {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 16px;
  cursor: pointer;
}
@media (hover: hover) {
  .recent-row { transition: border-color var(--tr), background var(--tr), transform var(--tr); }
  .recent-row:hover {
    border-color: rgba(200,146,26,.4);
    background: rgba(200,146,26,.05);
    transform: translateX(4px);
  }
  .recent-arrow { transition: transform var(--tr); }
  .recent-row:hover .recent-arrow { transform: translateX(3px); color: var(--gold); }
}
.recent-thumb {
  width: 48px; height: 48px; border-radius: 8px;
  object-fit: contain; background: var(--bg-med); flex-shrink: 0;
}
.recent-thumb--empty {
  background: var(--card-hover); display:flex; align-items:center; justify-content:center;
  font-size: 1.3rem; border-radius: 8px; flex-shrink: 0;
  width: 48px; height: 48px;
}
.recent-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.recent-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-detail { font-size: .75rem; color: var(--muted); }
.recent-arrow { color: var(--gold-dim); font-size: 1.1rem; flex-shrink: 0; }

/* ── CARDS GRID ──────────────────────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px; align-items: start;
}
.cards-grid--sm {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}
@media (max-width: 600px) {
  /* Humidores / muebles bar: 2 por fila */
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Puros / bebidas: 2 por fila (más legible que 3) */
  .cards-grid--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Cuerpo en 2 columnas — más espacio que con 3 */
  .cards-grid--sm .card-body  { padding: 7px 10px 5px; gap: 3px; }
  .cards-grid--sm .card-title { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cards-grid--sm .card-brand { font-size: .62rem; }
  .cards-grid--sm .card-vitola,
  .cards-grid--sm .card-stock { font-size: .64rem; }
  /* Qty-bar compacto; ocultar editar/eliminar (accesibles desde el detalle) */
  .cards-grid--sm .qty-bar  { padding: 6px 8px; gap: 4px; }
  .cards-grid--sm .qty-btn  { width: 24px; height: 24px; font-size: .92rem; border-radius: 5px; }
  .cards-grid--sm .qty-val  { font-size: .82rem; min-width: 22px; }
  .cards-grid--sm .btn-icon { display: none; }
}

/* ── CARD ────────────────────────────────────────────────────────────────── */
.card {
  background: rgba(24,9,3,.95);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
}
@media (hover: hover) {
  .card {
    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  }
  .card:hover {
    border-color: rgba(200,146,26,.45);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(200,146,26,.15);
  }
}
.card-img-link {
  display: block; position: relative;
  width: 100%; aspect-ratio: 3/4;
  background: var(--bg-med); overflow: hidden;
}
.card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.card-img--empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.card-img--empty span { color: var(--border-acc); font-style: italic; font-size: .78rem; }
.card-body { padding: 12px 14px 8px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.card-brand { font-size: .63rem; color: var(--gold); letter-spacing: .22em; text-transform: uppercase; }
.card-title { font-size: .88rem; font-weight: 600; color: var(--cream); display: block; margin-top: 2px; }
@media (hover: hover) {
  .card-title:hover { color: var(--gold); }
}
.card-stock { font-size: .75rem; color: var(--gold); font-weight: 600; }
.card-vitola { font-size: .72rem; color: var(--muted); }
.card-desc { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.card-actions {
  display: flex; gap: 6px; padding: 8px 12px;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
  background: rgba(0,0,0,.2);
}

/* ── QTY BAR ─────────────────────────────────────────────────────────────── */
.qty-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.25);
}
.qty-btn {
  width: 26px; height: 26px;
  background: rgba(200,146,26,.1); color: var(--gold);
  border: 1px solid rgba(200,146,26,.2);
  border-radius: 6px;
  font-size: 1rem; font-weight: bold; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--tr); flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .qty-btn:hover { background: var(--gold); color: #080401; border-color: var(--gold); }
}
.qty-val {
  font-size: .95rem; font-weight: 700; color: var(--cream);
  min-width: 28px; text-align: center;
}

/* ── CAVA HEADER ─────────────────────────────────────────────────────────── */
.cava-header {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(180deg, rgba(30,12,3,.8) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
  padding-top: 24px; padding-bottom: 24px;
}
.cava-header-img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 10px; flex-shrink: 0;
  border: 1px solid var(--border-acc);
}
.cava-header-info { display: flex; flex-direction: column; gap: 4px; }
.cava-header-name { font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; }
.cava-header-desc { font-size: .82rem; color: var(--muted); font-style: italic; }

/* ── CIGAR DETAIL ────────────────────────────────────────────────────────── */
.detail-top {
  display: flex; gap: 48px; align-items: flex-start;
  padding-top: 40px; padding-bottom: 40px;
}
@media (max-width: 700px) {
  .detail-top { flex-direction: column; gap: 24px; }
}
.detail-left { display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; }

.detail-main-img {
  width: 240px; height: 320px; object-fit: contain;
  background: linear-gradient(180deg, var(--bg-med) 0%, var(--bg) 100%);
  border-radius: var(--r); border: 1px solid var(--border);
  box-shadow: var(--shadow-gold);
}
.detail-main-img--empty {
  width: 240px; height: 320px;
  background: var(--bg-med); border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: var(--border-acc); font-style: italic; font-size: .85rem;
}
@media (max-width: 700px) {
  .detail-main-img, .detail-main-img--empty { width: 100%; height: 240px; }
}

.qty-control {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.qty-control-label { font-size: .62rem; color: var(--muted); letter-spacing: .3em; }
.qty-control-row { display: flex; align-items: center; gap: 16px; }
.qty-btn--lg { width: 38px; height: 38px; font-size: 1.3rem; border-radius: 8px; }
.qty-val--lg { font-size: 1.8rem; font-weight: 700; min-width: 44px; text-align: center;
               font-family: Georgia, serif; color: var(--gold); }

.detail-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.detail-brand { font-size: .68rem; color: var(--gold); letter-spacing: .3em; margin-bottom: 8px; font-weight: 600; }
.detail-name {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 700; line-height: 1.1; margin-bottom: 6px;
  font-family: Georgia, serif;
}
.detail-vitola { font-size: .95rem; color: var(--muted); font-style: italic; margin-bottom: 20px; }
.detail-divider { height: 1px; background: linear-gradient(90deg, var(--border) 0%, transparent 100%); margin: 20px 0; }
.detail-divider-full { height: 1px; background: var(--border); margin: 0; }

.detail-grid {
  display: grid; grid-template-columns: auto 1fr;
  gap: 12px 28px; align-items: baseline;
}
.detail-grid dt {
  font-size: .63rem; color: var(--muted); letter-spacing: .22em;
  white-space: nowrap; text-transform: uppercase; font-weight: 600;
}
.detail-grid dd { font-size: .88rem; font-weight: 600; color: var(--cream); }
.strength-ligero  { color: #5AAA5A !important; }
.strength-medio   { color: var(--gold) !important; }
.strength-medio-fuerte { color: #D07828 !important; }
/* #C04040 daba 3,76:1 sobre la card: no llega a AA y aparece en 39 sitios.
   #D65A5A sube a ~5,2:1 y sigue leyéndose como «rojo = fuerte». */
.strength-fuerte  { color: #D65A5A !important; }

/* Stars */
.stars { display: flex; gap: 4px; margin-top: 18px; }
/* Las estrellas apagadas estaban a 1,71:1: no se veía cuántas había ni dónde
   tocar. Con --gold-dim (#7A5810) suben a 2,95:1, y como son iconos grandes
   (24 px) es suficiente para distinguirlas del fondo sin que compitan con las
   encendidas, que van en oro pleno. */
.star {
  font-size: 1.5rem; color: var(--gold-dim);
  cursor: pointer; transition: color var(--tr), transform var(--tr);
  -webkit-tap-highlight-color: transparent;
}
.star--on { color: var(--gold); }
@media (hover: hover) {
  .star:hover { color: var(--gold-bright); transform: scale(1.15); }
}

.detail-section-label {
  font-size: .63rem; color: var(--muted); letter-spacing: .25em;
  text-transform: uppercase; margin-bottom: 8px; font-weight: 600;
}
.detail-desc { font-size: .88rem; color: var(--cream-dim); line-height: 1.7; }

/* ── DETAIL SECTIONS ─────────────────────────────────────────────────────── */
.detail-section { padding: 32px 32px 36px; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
@media (max-width: 480px) {
  .detail-section { padding: 20px 16px; }
}

/* Photo strip */
.photos-strip {
  display: flex; gap: 10px; overflow-x: auto;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px;
  min-height: 136px; align-items: center;
}
.photo-thumb { position: relative; flex-shrink: 0; }
.photo-thumb img {
  width: 110px; height: 110px;
  object-fit: cover; border-radius: 8px; cursor: pointer;
  transition: all var(--tr); border: 1px solid var(--border);
}
@media (hover: hover) { .photo-thumb img:hover { opacity: .85; transform: scale(1.03); } }
.photo-del {
  position: absolute; top: 5px; right: 5px;
  width: 20px; height: 20px;
  background: rgba(139,32,32,.88); color: #fff;
  border: none; border-radius: 4px;
  font-size: .7rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--tr);
}
@media (hover: hover) { .photo-del:hover { background: var(--danger-h); } }

/* Notes */
.note-form { display: flex; flex-direction: column; margin-bottom: 20px; }
.note-card {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--r-sm);
  padding: 14px 16px; margin-bottom: 8px;
  transition: border-left-color var(--tr);
}
@media (hover: hover) {
  .note-card:hover { border-left-color: var(--gold); }
}
.note-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.note-date { font-size: .7rem; color: var(--muted); }
.note-text { font-size: .88rem; color: var(--cream-dim); line-height: 1.6; white-space: pre-wrap; }

/* ── FORMS ───────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.field--sm { flex: 0 0 auto; min-width: 120px; }
.field-label { font-size: .62rem; color: var(--muted); letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.field-input {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--cream);
  padding: 9px 12px; font: .88rem/1.3 'Segoe UI', sans-serif;
  transition: all var(--tr); width: 100%;
}
.field-input:focus {
  outline: none;
  border-color: rgba(200,146,26,.6);
  background: rgba(200,146,26,.05);
  box-shadow: 0 0 0 3px rgba(200,146,26,.1);
}
/* --border-acc (#5A3010) da 1,7:1 sobre el campo: sirve de borde, NO de texto.
   --muted (#9A7E5F) llega a 5,05:1 y se lee. */
.field-input::placeholder { color: var(--muted); opacity: 1; }
.field-textarea { resize: vertical; min-height: 70px; }
select.field-input { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23C8921A'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 28px;
}
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row > .field { min-width: 140px; }

.file-pick-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.img-preview-wrap { position: relative; flex-shrink: 0; }
.img-preview { width: 80px; height: 80px; object-fit: contain; border-radius: 8px; background: var(--bg-med); border: 1px solid var(--border); }
.img-preview-empty {
  width: 80px; height: 80px; border-radius: 8px;
  background: rgba(255,255,255,.03); border: 1px dashed var(--border-acc);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: var(--border-acc); font-style: italic;
}

/* ── MODALS ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.85);
  display: none; align-items: flex-start; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.modal-overlay.active {
  display: flex;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal {
  background: rgba(16,7,4,.97);
  border: 1px solid rgba(200,146,26,.2);
  border-top: 2px solid var(--gold);
  border-radius: var(--r);
  padding: 26px;
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; gap: 14px;
  margin: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,.8), 0 0 0 1px rgba(200,146,26,.08);
}
.modal-lg { max-width: 660px; }
.modal-sm { max-width: 400px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: .8rem; color: var(--gold); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.modal-close {
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--muted); font-size: .9rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--tr);
}
@media (hover: hover) { .modal-close:hover { background: rgba(255,255,255,.1); color: var(--cream); } }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

/* ── CIGAR DETAIL SHEET ──────────────────────────────────────────────────── */
.cigar-detail-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.cigar-detail-overlay.active { display: flex; }
.cigar-detail-overlay.active .cigar-detail-sheet { animation: scaleIn .25s cubic-bezier(0.34,1.56,0.64,1) both; }
.cigar-detail-overlay.closing { animation: fadeOut .2s ease both; }
.cigar-detail-overlay.closing .cigar-detail-sheet { animation: scaleOut .18s ease both; }

.cigar-detail-sheet {
  background: rgba(14,6,3,.98);
  border: 1px solid rgba(200,146,26,.25);
  border-top: 2px solid var(--gold);
  border-radius: var(--r);
  width: 100%; max-width: 480px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  display: flex; flex-direction: column;
  box-shadow: 0 -12px 48px rgba(0,0,0,.7);
}

.cigar-detail-img-wrap {
  position: relative; width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg-med);
  overflow: hidden; flex-shrink: 0;
}
.cigar-detail-img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.cigar-detail-img-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: .8rem; letter-spacing: .1em;
  background: linear-gradient(160deg, var(--bg-med) 0%, var(--card-hover) 100%);
}
.cigar-detail-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.6); border: 1px solid var(--border);
  color: var(--cream); font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--tr);
}
@media (hover: hover) {
  .cigar-detail-close:hover { background: rgba(0,0,0,.85); }
}

.cigar-detail-body {
  padding: 20px 20px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.cigar-detail-brand {
  font-size: .68rem; font-weight: 700; color: var(--gold);
  letter-spacing: .22em; text-transform: uppercase;
}
.cigar-detail-name {
  font-size: 1.25rem; font-weight: 700; color: var(--cream);
  line-height: 1.25; margin: 0;
}
.cigar-detail-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 2px;
}
.cigar-detail-tag {
  font-size: .62rem; font-weight: 600; letter-spacing: .1em;
  padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--border); color: var(--muted);
  background: rgba(255,255,255,.04);
}
.cigar-detail-tag--strength { border-color: rgba(200,146,26,.4); color: var(--gold); }
.cigar-detail-tag--country  { border-color: rgba(180,180,180,.2); }
.cigar-detail-desc {
  font-size: .78rem; color: var(--muted); line-height: 1.65;
  margin: 0; max-height: 120px; overflow-y: auto;
}
.cigar-detail-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; gap: 12px;
}
.cigar-detail-price {
  font-size: 1.1rem; font-weight: 700; color: var(--gold);
  letter-spacing: .02em;
}


/* ── CATALOG SEARCH ──────────────────────────────────────────────────────── */
.catalog-wrap { display: flex; flex-direction: column; gap: 0; }

.catalog-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(200,146,26,.06);
  border: 1px solid rgba(200,146,26,.18);
  border-radius: var(--r-sm); padding: 10px 14px;
}
.catalog-banner-ico { font-size: 1rem; flex-shrink: 0; }
.catalog-banner-hint { flex: 1; font-size: .76rem; color: var(--muted); font-style: italic; min-width: 140px; }
.catalog-toggle-btn { flex-shrink: 0; }

.catalog-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .28s ease, padding .28s ease;
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 2px;
}
.catalog-panel--open { max-height: 420px; padding: 12px 2px 4px; }
.catalog-input { font-size: .88rem; }
.catalog-count { font-size: .68rem; color: var(--muted); letter-spacing: .1em; min-height: 14px; }
.catalog-db-status { font-size: .72rem; color: var(--muted); padding: .1rem .2rem; margin-bottom: .25rem; }

.catalog-results {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow-y: auto; max-height: 280px;
  background: rgba(0,0,0,.4);
}
.catalog-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--tr);
  border-left: 3px solid transparent;
}
.catalog-item:last-child { border-bottom: none; }
@media (hover: hover) {
  .catalog-item:hover { background: rgba(200,146,26,.08); border-left-color: var(--gold); }
}
.catalog-item-main { font-size: .86rem; font-weight: 600; color: var(--cream); }
.catalog-dot { color: var(--gold-dim); margin: 0 5px; }
.catalog-item-sub { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.catalog-empty { padding: 16px 14px; font-size: .85rem; color: var(--muted); font-style: italic; text-align: center; }
.catalog-sep { border: none; border-top: 1px solid var(--border); margin: 14px 0 4px; }

/* ── HISTORIAL DE COMPRAS ──────────────────────────────────────────────── */
.purchases-toggle, .fumadas-toggle { margin-top: 4px; }
.purchases-panel { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.purchase-row {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px; gap: 12px;
}
.purchase-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .82rem; }
.purchase-date { color: var(--cream); font-weight: 600; }
.purchase-loc  { color: var(--muted); }
.purchase-qty  { color: var(--gold); font-weight: 700; }
.purchase-price { color: var(--muted); }

/* ── LIGHTBOX ────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.97);
  display: none; align-items: center; justify-content: center;
  cursor: zoom-out; padding: 20px;
}
.lightbox.active { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: 10px; object-fit: contain; }

/* ── ANIMACIONES ─────────────────────────────────────────────────────────── */

@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.93) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes scaleOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(.93) translateY(10px); }
}
@keyframes qtyBounce {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.55); color: var(--gold-bright); }
  70%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
/* El latido del logo animaba `filter: drop-shadow` con desenfoques de 40-72 px
   sobre una capa de 343x343: el navegador la rerasterizaba ENTERA en cada
   fotograma. Medido el 2026-08-12: la pantalla de inicio iba a 4 fps (266 ms
   por fotograma) mientras el resto de la app iba a 60. Ese era el parpadeo.
   Ahora el halo es una capa aparte, ya rasterizada, a la que solo se le mueve
   la opacidad — que va por GPU y no repinta nada. */
@keyframes logoPulse {
  0%, 100% { opacity: .38; }
  50%      { opacity: .72; }
}
@keyframes toastIn  { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(8px); } }

/* Entrada de página */
/* Sin fundido de entrada: con `both` la página arrancaba invisible y en cada
   navegación se percibía un parpadeo. Aparecer directamente es más rápido. */
main { animation: none; }

/* CONTENIDO AL CARGAR: sin animación de entrada.
   Aquí había fade-in escalonados (hero, stats, filas recientes, tarjetas) con
   `both`: el contenido nacía INVISIBLE y aparecía con retardo, que es
   justo el "parpadeo al cambiar de pantalla" que el usuario rechazó.
   Lo que se anima es la RESPUESTA A SUS ACCIONES (más abajo), no la carga. */
/* El latido vive en .hero-logo-wrap::before, no en la imagen. */
.hero-subtitle,
.hero-btns,
.stat,
.recent-list .recent-row,
.cards-grid .card,
.brand-grid.grid-loaded,
.cards-grid.grid-loaded { animation: none; }

/* Modal abrir / cerrar */
.modal-overlay.active        { animation: fadeIn  .2s ease both; }
.modal-overlay.active .modal { animation: scaleIn .25s cubic-bezier(0.34,1.56,0.64,1) both; }
.modal-overlay.closing       { animation: fadeOut .18s ease both; }
.modal-overlay.closing .modal { animation: scaleOut .18s ease both; }

/* Lightbox */
.lightbox.active     { animation: fadeIn  .2s ease both; }
.lightbox.active img { animation: scaleIn .25s cubic-bezier(0.34,1.56,0.64,1) both; }

/* Feedback cantidad */
.qty-bump { animation: qtyBounce .34s ease; }

/* Nota nueva */
.note-card--new { animation: fadeInUp .26s ease both; }

/* Toast */
.toast-container {
  max-width: calc(100vw - 32px);
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 999; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
/* Sin max-width, un aviso largo («No tienes humidores aún. Crea uno primero
   desde Mis Humidores.», 425 px) se salía 17,6 px por cada lado en una
   pantalla de 390. */
.toast {
  max-width: calc(100vw - 32px);
  white-space: normal;
  text-align: center;
  background: rgba(20,8,3,.97);
  border: 1px solid rgba(200,146,26,.3);
  border-radius: var(--r-sm); padding: 10px 22px;
  font-size: .82rem; font-weight: 500; color: var(--cream);
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
  animation: toastIn .22s ease both;
}
.toast.hiding   { animation: toastOut .18s ease both; }
.toast--ok      { border-color: rgba(90,170,90,.4);   color: #84d484; }
.toast--warning { border-color: rgba(200,146,26,.45); color: var(--gold); }
.toast--error   { border-color: rgba(180,50,50,.4);   color: #d47a7a; }

/* ── LETTER BAR ─────────────────────────────────────────────────────────── */
.letter-bar {
  display: flex; overflow-x: auto; gap: 7px;
  padding: 16px 32px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.letter-bar::-webkit-scrollbar { display: none; }
@media (max-width: 480px) {
  .letter-bar { padding: 12px 16px 8px; gap: 5px; }
}
.letter-btn {
  flex-shrink: 0;
  min-width: 42px; height: 42px; padding: 0 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--muted); font-size: .78rem; font-weight: 800;
  letter-spacing: .08em; cursor: pointer;
  transition: all var(--tr);
  white-space: nowrap;
}
@media (hover: hover) {
  .letter-btn:not(.letter-btn--empty):hover {
  background: rgba(200,146,26,.12);
  color: var(--gold);
  border-color: rgba(200,146,26,.5);
  box-shadow: 0 0 12px rgba(200,146,26,.15);
}
}
.letter-btn--active {
  background: linear-gradient(135deg, var(--gold) 0%, #A87015 100%) !important;
  color: #080401 !important;
  border-color: var(--gold) !important;
  font-weight: 900;
  box-shadow: 0 3px 14px rgba(200,146,26,.4) !important;
}
.letter-btn--empty { opacity: .18; pointer-events: none; }
.letter-btn--todos { min-width: 72px; font-size: .72rem; letter-spacing: .14em; }

/* ── BRAND GRID ──────────────────────────────────────────────────────────── */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
@media (max-width: 480px) {
  .brand-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
}

/* NOTA: aquí hubo un `content-visibility: auto` con `contain-intrinsic-size`.
   Se RETIRÓ (2026-08-10): al no coincidir la altura estimada con la real, las
   tarjetas se repintaban al entrar en pantalla y producían parpadeo y saltos
   de scroll. El catálogo ya se pinta por lotes (IntersectionObserver), que da
   el mismo beneficio sin artefactos visuales. */

/* Brand card — card con imagen */
.brand-card {
  background: rgba(24,9,3,.95);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
@media (hover: hover) {
  .brand-card {
    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  }
  .brand-card:hover {
    border-color: rgba(200,146,26,.5);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(200,146,26,.18);
  }
  .brand-card-img { transition: transform 0.3s ease; }
  .brand-card:hover .brand-card-img { transform: scale(1.06); }
}
.brand-card-img-wrap {
  width: 100%; aspect-ratio: 1/1;
  position: relative; overflow: hidden;
  background: var(--bg-med);
}
.brand-card-img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.brand-card-img-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--bg-med) 0%, var(--card-hover) 100%);
}
.brand-card-initial {
  font-size: 2rem; font-weight: 700;
  font-family: Georgia, serif;
  color: var(--border-acc); opacity: .55;
  user-select: none;
}
.brand-card-body {
  padding: 6px 8px 7px;
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  height: 44px; /* fixed height keeps all cards the same */
  justify-content: center;
}
.brand-card-name {
  font-size: .65rem; font-weight: 700; color: var(--cream);
  line-height: 1.3; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-card-count {
  font-size: .62rem; color: var(--gold);
  letter-spacing: .08em; font-weight: 600;
}

/* ── CATALOG PURO DETAIL PAGE ────────────────────────────────────────────── */
.cat-detail-wrap {
  display: flex; flex-direction: column;
  gap: 24px; padding-top: 24px; padding-bottom: 40px;
  max-width: 600px; margin: 0 auto;
}
.cat-detail-img-wrap {
  width: 100%; border-radius: var(--r); overflow: hidden;
  background: var(--bg-med); border: 1px solid var(--border);
  aspect-ratio: 4/3;
}
.cat-detail-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.cat-detail-img--empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: .8rem; letter-spacing: .1em;
}
.cat-detail-brand {
  font-size: .7rem; font-weight: 700; color: var(--gold);
  letter-spacing: .25em; text-transform: uppercase; margin: 0;
}
.cat-detail-name {
  font-size: 1.6rem; font-weight: 700; color: var(--cream);
  line-height: 1.2; margin: 6px 0 0;
}
.cat-detail-vitola {
  font-size: .85rem; color: var(--muted); margin: 6px 0 0;
  letter-spacing: .06em;
}
.cat-detail-price {
  font-size: 1.3rem; font-weight: 700; color: var(--gold);
  margin: 8px 0 0;
}
.cat-detail-desc {
  font-size: .85rem; color: var(--muted); line-height: 1.7; margin: 0;
}
.cat-detail-actions {
  display: flex; flex-direction: column; gap: 10px;
}
.cat-detail-wish-btn { justify-content: center; }
.cat-detail-wish-btn--active {
  border-color: rgba(200,146,26,.5);
  color: var(--gold);
}

/* ── BRAND VIEW HEADER ───────────────────────────────────────────────────── */
.brand-view-header {
  display: flex; align-items: center; gap: 14px;
  padding-top: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.brand-view-name {
  flex: 1; font-size: 1.05rem; font-weight: 700;
  font-family: Georgia, serif; color: var(--gold);
  letter-spacing: .06em;
}
.brand-view-count { font-size: .75rem; color: var(--muted); flex-shrink: 0; }

/* ── LOGIN ───────────────────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.login-card {
  background: rgba(16,7,4,.97);
  border: 1px solid rgba(200,146,26,.2);
  border-top: 2px solid var(--gold);
  border-radius: var(--r);
  padding: 40px 36px;
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  box-shadow: 0 24px 64px rgba(0,0,0,.85);
  animation: scaleIn .32s cubic-bezier(0.34,1.56,0.64,1) both;
}
.login-logo {
  width: 200px; height: auto;
  filter: drop-shadow(0 0 24px rgba(200,146,26,.35));
}
.login-form {
  width: 100%; display: flex; flex-direction: column; gap: 14px;
}
.login-error {
  width: 100%;
  background: rgba(139,32,32,.12);
  border: 1px solid rgba(139,32,32,.4);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: .82rem; color: #d47a7a; text-align: center;
  animation: fadeInUp .25s ease both;
}

/* ── LOGOUT ──────────────────────────────────────────────────────────────── */
.logout-btn {
  position: fixed; bottom: 22px; right: 18px; z-index: 150;
  width: 34px; height: 34px;
  background: rgba(8,4,1,.94);
  border: 1px solid rgba(200,146,26,.18);
  border-radius: 50%;
  color: var(--muted); font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--tr);
  text-decoration: none;
}
@media (hover: hover) {
  .logout-btn:hover {
  background: rgba(200,146,26,.12);
  border-color: rgba(200,146,26,.5);
  color: var(--gold);
  box-shadow: 0 0 14px rgba(200,146,26,.18);
}
}

/* ── MUEBLE BAR ──────────────────────────────────────────────────────────── */
.btn-hero--bar {
  background: linear-gradient(135deg, rgba(180,100,30,.22), rgba(140,70,10,.18));
  border-color: rgba(180,100,30,.45);
  color: #d4883a;
}
@media (hover: hover) {
  .btn-hero--bar:hover {
    background: linear-gradient(135deg, rgba(200,120,40,.32), rgba(160,80,20,.28));
    border-color: rgba(200,120,40,.7);
    box-shadow: 0 4px 18px rgba(180,100,30,.22);
    color: #e8a055;
  }
}

/* ── BOTÓN SUMILLER (destacado) ──────────────────────────────────────────── */
.btn-hero--sumiller {
  background: linear-gradient(135deg, #C8921A 0%, #8a5a10 100%);
  color: #080401;
  border: 1px solid var(--gold-bright);
  box-shadow: 0 4px 18px rgba(200,146,26,.4);
  font-weight: 700;
}
@media (hover: hover) {
  .btn-hero--sumiller:hover {
    background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
    box-shadow: 0 6px 24px rgba(200,146,26,.55);
    transform: translateY(-1px);
  }
}

/* ── HERO BTNS – ajuste para 5 botones ───────────────────────────────────── */
.hero-btns {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; padding: 0 16px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── MARIDAJES ───────────────────────────────────────────────────────────── */

.pair-tab-bar {
  display: flex; border-bottom: 1px solid var(--border);
  margin: 14px 0 0; gap: 0;
}
/* Con .08em de espaciado las pestañas se cortaban («PURO → BEBI…»). Faltaban
   3 px: se aprieta el espaciado, que es lo que menos se nota. */
.pair-tab {
  flex: 1; min-width: 0; padding: 11px 2px; background: none; border: none;
  color: var(--muted); font-size: .68rem; letter-spacing: .04em;
  font-weight: 700; cursor: pointer; font-family: inherit;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pair-tab--active { color: var(--gold); border-bottom-color: var(--gold); }

.pairing-search-wrap { position: relative; }
.pairing-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: var(--card); border: 1px solid var(--border);
  border-top: none; border-radius: 0 0 var(--r) var(--r);
  max-height: 260px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.pair-result-item {
  padding: 10px 14px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .12s;
}
@media (hover: hover) {
  .pair-result-item:hover { background: var(--card-hover); }
}
.pair-result-thumb {
  width: 38px; height: 38px; object-fit: contain; flex-shrink: 0;
  border-radius: 4px; background: var(--bg-med);
}
.pair-result-thumb--empty { display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.pair-result-info { min-width: 0; }
.pair-result-name {
  display: block; font-size: .8rem; color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pair-result-sub { display: block; font-size: .67rem; color: var(--muted); margin-top: 1px; }

.pair-sel-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(200,146,26,.06); border: 1px solid rgba(200,146,26,.25);
  border-radius: var(--r); padding: 12px; margin: 12px 0 4px;
}
.pair-sel-img {
  width: 60px; height: 60px; object-fit: contain; flex-shrink: 0;
  border-radius: 6px; background: var(--bg-med);
}
.pair-sel-img--empty { display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.pair-sel-info { flex: 1; min-width: 0; }
.pair-sel-name { font-size: .88rem; font-weight: 700; color: var(--cream); }
.pair-sel-sub { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.pair-reason-tag {
  display: inline-block; margin-top: 6px;
  background: rgba(200,146,26,.1); border: 1px solid rgba(200,146,26,.28);
  color: var(--gold); font-size: .62rem; letter-spacing: .06em;
  padding: 3px 8px; border-radius: var(--r-pill); line-height: 1.4;
}

.suggestion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.suggestion-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
}
.suggestion-card-img {
  width: 100%; aspect-ratio: 1/1; object-fit: contain;
  background: var(--bg-med);
}
.suggestion-card-img--empty {
  width: 100%; aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; background: var(--bg-med);
}
.suggestion-card-body { padding: 7px 9px 6px; flex: 1; }
.suggestion-card-brand {
  display: block; font-size: .62rem; color: var(--gold);
  font-weight: 700; letter-spacing: .08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggestion-card-name {
  display: block; font-size: .73rem; color: var(--cream);
  margin-top: 2px; line-height: 1.3;
}
.suggestion-card-sub { display: block; font-size: .62rem; color: var(--muted); margin-top: 3px; }
.suggestion-save-btn {
  width: 100%; padding: 7px; font-size: .67rem; font-family: inherit;
  background: none; border: none; border-top: 1px solid var(--border);
  color: var(--muted); cursor: pointer; transition: color .15s, background .15s;
}
@media (hover: hover) {
  .suggestion-save-btn:hover { background: rgba(200,146,26,.1); color: var(--gold); }
}
.suggestion-save-btn--saved { color: var(--gold); background: rgba(200,146,26,.07); }

.pair-saved-item {
  display: flex; gap: 12px; align-items: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px; margin-bottom: 10px;
}
.pair-saved-thumb {
  width: 40px; height: 40px; object-fit: contain; border-radius: 4px;
  background: var(--bg-med); flex-shrink: 0;
}
.pair-saved-thumb--empty { display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.pair-saved-info { flex: 1; min-width: 0; }
.pair-saved-names {
  font-size: .78rem; color: var(--cream); font-weight: 600;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.pair-saved-arrow { color: var(--gold); font-size: .8rem; }
.pair-saved-notes {
  font-size: .72rem; color: var(--muted); margin-top: 4px;
  font-style: italic;
}
.pair-saved-date { font-size: .62rem; color: var(--muted); margin-top: 3px; }
.pair-saved-del {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 6px; font-size: .9rem; flex-shrink: 0;
  transition: color .15s;
}
@media (hover: hover) {
  .pair-saved-del:hover { color: var(--danger); }
}

/* My-cigars grid (Tab 1: PURO  BEBIDA) */
.pair-humidor-group { margin-bottom: 20px; }
/* --gold-dim se queda en 2,8-3,1:1 como texto: vale para bordes y adornos,
   no para algo que hay que leer. --muted llega a 5,37:1. */
.pair-humidor-label { color: var(--muted); }
.pair-humidor-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .22em;
  color: var(--gold-dim); text-transform: uppercase;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.my-cigars-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 600px) {
  .my-cigars-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.my-cigar-card {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--r); padding: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .my-cigar-card:hover {
    border-color: rgba(200,146,26,.4);
    border-left-color: rgba(200,146,26,.4);
    background: var(--card-hover);
  }
}
.my-cigar-card--selected {
  border-color: var(--gold) !important;
  border-left-color: var(--gold) !important;
  background: rgba(200,146,26,.08) !important;
}
.my-cigar-img {
  width: 44px; height: 44px; object-fit: contain;
  border-radius: 6px; background: var(--bg-med); flex-shrink: 0;
}
.my-cigar-img--empty {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; border-radius: 6px;
  background: var(--bg-med); flex-shrink: 0;
}
.my-cigar-info {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.my-cigar-brand {
  font-size: .62rem; font-weight: 700; color: var(--gold);
  letter-spacing: .1em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.my-cigar-name {
  font-size: .75rem; font-weight: 600; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.my-cigar-sub {
  font-size: .62rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── PAIR BOTTOM SHEET ───────────────────────────────────────────────────── */
@keyframes slideUp   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes slideDown { from { transform: translateY(0); } to { transform: translateY(100%); } }

.pair-sheet-overlay {
  position: fixed; inset: 0; z-index: 195;
  background: rgba(0,0,0,.72);
  display: none; align-items: flex-end; justify-content: center;
}
.pair-sheet-overlay.active {
  display: flex;
  animation: fadeIn .22s ease both;
}
.pair-sheet-overlay.active .pair-sheet {
  animation: slideUp .32s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.pair-sheet-overlay.closing { animation: fadeOut .22s ease both; }
.pair-sheet-overlay.closing .pair-sheet { animation: slideDown .22s ease-in both; }

.pair-sheet {
  width: 100%; max-width: 600px;
  max-height: 88vh; max-height: 88dvh;
  background: rgba(12,5,2,.99);
  border: 1px solid rgba(200,146,26,.2);
  border-top: 2px solid var(--gold);
  border-radius: var(--r) var(--r) 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -12px 48px rgba(0,0,0,.8);
}
.pair-sheet-handle {
  width: 36px; height: 4px;
  background: var(--border-acc); border-radius: 2px;
  margin: 10px auto 0; flex-shrink: 0;
}
.pair-sheet-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pair-sheet-title {
  flex: 1; min-width: 0;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 0;
}
.pair-sheet-close {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--muted); font-size: .9rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--tr);
}
@media (hover: hover) {
  .pair-sheet-close:hover { background: rgba(255,255,255,.12); color: var(--cream); }
}
.pair-sheet-body {
  flex: 1; overflow-y: auto;
  padding: 0 16px 40px;
  -webkit-overflow-scrolling: touch;
}

/* Etiqueta de sección dentro del sheet */
.pair-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .62rem; font-weight: 700; letter-spacing: .2em;
  color: var(--gold-dim); text-transform: uppercase;
  margin: 18px 0 10px;
}

/* Botón "Más maridajes del catálogo" */
.pair-more-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 14px 0 4px;
  padding: 12px 16px;
  background: rgba(200,146,26,.06);
  border: 1px dashed rgba(200,146,26,.3);
  border-radius: var(--r);
  color: var(--cream-dim);
  font: 600 .75rem/1 'Segoe UI', sans-serif;
  letter-spacing: .06em; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.pair-more-btn:active { background: rgba(200,146,26,.13); border-color: var(--gold); color: var(--cream); }
@media (hover: hover) {
  .pair-more-btn:hover { background: rgba(200,146,26,.13); border-color: var(--gold); color: var(--cream); }
}

/* Tarjeta de bebida propia (del bar del usuario) */
.suggestion-card--mybar {
  border-color: rgba(200,146,26,.3);
  background: rgba(200,146,26,.04);
}
.suggestion-card-mybar-badge {
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); background: rgba(200,146,26,.1);
  border-top: 1px solid rgba(200,146,26,.18);
  padding: 4px 8px; text-align: center;
}

/* ── NAV INFERIOR MÓVIL ──────────────────────────────────────────────────── */
.mobile-nav {
  display: none;
}

/* OJO al criterio: solo por ancho, un móvil EN HORIZONTAL (844x390) queda por
   encima de los 700 px y se quedaba SIN NINGUNA navegación — ni la inferior ni
   la de escritorio, porque esa vive en el mismo bloque. Se añade el criterio de
   alto con puntero grueso: pantalla baja + dedo = móvil tumbado. */
@media (max-width: 700px), (max-height: 560px) and (pointer: coarse) {
  .mobile-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 120;
    background: rgba(8,4,1,.97);
    border-top: 1px solid rgba(200,146,26,.18);
    height: calc(54px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    align-items: stretch;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Empuja el contenido para que la nav no lo tape */
  main { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }

  /* Toasts por encima de la nav */
  .toast-container { bottom: calc(54px + env(safe-area-inset-bottom) + 14px); }

  /* Ocultar el botón flotante de logout (está en la nav inferior) */
  .logout-btn { display: none; }

  /* Ocultar el botón de acción del top-nav (lo sustituye el FAB) */
  .nav-action-btn { display: none; }
}

.mobile-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  color: var(--muted); font-size: .62rem; letter-spacing: .03em;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: none; background: none; padding: 0 4px; font-family: inherit;
  transition: color var(--tr);
  min-width: 0;
}
.mobile-nav-item--active { color: var(--gold); }
.mobile-nav-item:active  { opacity: .7; }
.mobile-nav-icon { font-size: 1.2rem; line-height: 1; }

/* Sumiller: botón central destacado (sobresale de la barra, estilo dock).
   IMPORTANTE: el círculo sobresale 22px por encima de la barra, pero el área
   táctil del <a> acaba en el borde de la barra. Sin este ::before, tocar el
   círculo dorado —lo más visible de la nav— no hacía absolutamente nada. */
.mobile-nav-item--sumiller { position: relative; }
.mobile-nav-item--sumiller::before {
  content: '';
  position: absolute;
  top: -26px; left: 50%;
  transform: translateX(-50%);
  width: 58px; height: 58px;
  border-radius: 50%;
}
.mobile-nav-item--sumiller .mobile-nav-icon {
  width: 46px; height: 46px;
  margin-top: -22px;
  background: linear-gradient(135deg, var(--gold-bright) 0%, #A87015 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 4px 14px rgba(200,146,26,.5), 0 0 0 4px rgba(8,4,1,.92);
}
.mobile-nav-item--sumiller.mobile-nav-item--active .mobile-nav-icon {
  box-shadow: 0 4px 18px rgba(200,146,26,.75), 0 0 0 4px rgba(8,4,1,.92);
}
.mobile-nav-item--sumiller:active .mobile-nav-icon { transform: scale(.94); }

/* ── FAB (BOTÓN FLOTANTE ACCIÓN, SOLO MÓVIL) ─────────────────────────────── */
.mobile-fab {
  position: fixed;
  bottom: calc(54px + env(safe-area-inset-bottom) + 14px);
  right: 18px;
  z-index: 130;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, #A87015 100%);
  color: #080401; border: none; cursor: pointer;
  font-size: 1.7rem; font-weight: 300; line-height: 1;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(200,146,26,.55), 0 2px 10px rgba(0,0,0,.5);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mobile-fab:active {
  transform: scale(.92);
  box-shadow: 0 2px 10px rgba(200,146,26,.3);
}

/* Mismo criterio que la nav inferior: si se oculta el botón del top-nav en
   horizontal, el FAB tiene que aparecer o el usuario se queda sin forma de
   añadir nada. */
@media (max-width: 700px), (max-height: 560px) and (pointer: coarse) {
  .mobile-fab { display: flex; }
}

/* ── HOJA "MÁS" (secciones secundarias desde la nav inferior) ────────────── */
.mas-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; padding: 4px 0 6px;
}
.mas-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 16px 6px; min-height: 84px;
  color: var(--cream);
  font: 600 .7rem/1.3 'Segoe UI', sans-serif;
  letter-spacing: .04em; text-align: center;
  cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--tr), background var(--tr);
}
.mas-item:active { background: rgba(200,146,26,.1); border-color: rgba(200,146,26,.45); }
@media (hover: hover) {
  .mas-item:hover { border-color: rgba(200,146,26,.45); background: rgba(200,146,26,.06); }
}
.mas-item-ico { font-size: 1.5rem; line-height: 1; }

/* ── HERO TILES (menú del home, jerarquizado) ────────────────────────────── */
.hero-tiles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-top: 20px;
  width: min(560px, 100%);
  position: relative; z-index: 1;
}
@media (min-width: 701px) {
  .hero-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(780px, 92vw); }
}
.hero-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px;
  background: rgba(24,9,3,.55);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 8px; min-height: 84px;
  color: var(--cream);
  font-weight: 700; font-size: .68rem; letter-spacing: .12em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--tr), background var(--tr), transform var(--tr);
}
@media (hover: hover) {
  .hero-tile:hover {
    border-color: rgba(200,146,26,.5);
    background: rgba(200,146,26,.07);
    transform: translateY(-2px);
  }
}
.hero-tile:active { background: rgba(200,146,26,.1); }
.hero-tile-ico { font-size: 1.6rem; line-height: 1; }

/* Tile destacado: EL SUMILLER (pieza central de la app) */
.hero-tile--featured {
  grid-column: 1 / -1;
  flex-direction: row; gap: 14px;
  min-height: 76px;
  background: linear-gradient(135deg, rgba(200,146,26,.96) 0%, rgba(138,90,16,.96) 100%);
  border-color: var(--gold-bright);
  color: #080401;
  font-size: .82rem; letter-spacing: .14em;
  box-shadow: 0 4px 20px rgba(200,146,26,.35);
}
@media (hover: hover) {
  .hero-tile--featured:hover {
    background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
    box-shadow: 0 6px 26px rgba(200,146,26,.5);
  }
}
.hero-tile--featured .hero-tile-ico { font-size: 2rem; }
.hero-tile-info { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.hero-tile-sub { font-weight: 500; font-size: .64rem; letter-spacing: .03em; opacity: .8; text-transform: none; }

/* Mientras el teclado virtual está abierto (body.kb-open, ver app.js):
   ocultar la nav inferior para ganar espacio */
@media (max-width: 700px) {
  body.kb-open .mobile-nav { transform: translateY(150%); transition: transform .2s ease; }
}

/* ── MODALES  BOTTOM SHEET EN MÓVIL ────────────────────────────────────── */
@media (max-width: 700px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  /* Footer pegajoso: en formularios largos, Guardar/Cancelar siempre a la vista.
     Se excluyen los footers ocultos (p. ej. el paso 1 de "añadir puro"), que
     no deben robar el padding inferior del sheet. */
  .modal .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 4px -26px 0;
    padding: 12px 26px calc(14px + env(safe-area-inset-bottom));
    background: rgba(16,7,4,.97);
    border-top: 1px solid var(--border);
  }
  /* Nota: NO se toca el padding-bottom del .modal con :has(). El footer puede
     estar oculto por un ANCESTRO (p.ej. #cstep-2 en el paso 1 de "añadir puro"),
     caso que :has() no distingue, y el sheet perdía su respiración inferior. */
  .modal {
    border-radius: var(--r) var(--r) 0 0;
    border-top: 2px solid var(--gold);
    border-left: 1px solid rgba(200,146,26,.15);
    border-right: 1px solid rgba(200,146,26,.15);
    border-bottom: none;
    max-width: 100%;
    margin: 0;
    padding-top: 10px;
    max-height: 92vh;
    max-height: 92dvh;
    /* NUNCA más alta que su overlay.
       `dvh` no cuenta el teclado virtual: en Android sigue midiendo la pantalla
       entera, así que el sheet se quedaba en ~610 px dentro de un hueco visible
       de ~370 px. Y como va anclado abajo (align-items: flex-end), lo que se
       salía era la MITAD DE ARRIBA — justo donde está el campo que se escribe.
       Con esto encoge con el overlay y el contenido se desplaza por dentro. */
    max-height: min(92dvh, 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-lg { max-width: 100%; }
  .modal-sm { max-width: 100%; }
  /* Handle pill: aparece como primer flex-item, sin margen extra (el gap lo separa) */
  .modal::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--border-acc);
    border-radius: 2px;
    margin: 0 auto;
    flex-shrink: 0;
  }
  /* Animación de entrada/salida como bottom sheet */
  .modal-overlay.active .modal {
    animation: slideUp .3s cubic-bezier(0.32, 0.72, 0, 1) both;
  }
  .modal-overlay.closing .modal {
    animation: slideDown .22s ease-in both;
  }
}

/* ── AÑADIR PURO: FLUJO 2 PASOS ─────────────────────────────────────────── */
.catalog-results--step1 {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow-y: auto; max-height: 38vh;
  background: rgba(0,0,0,.3);
  margin-top: 4px;
}
@media (max-width: 700px) {
  .catalog-results--step1 { max-height: 44vh; }
}

.cstep-result-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cstep-result-item:last-child { border-bottom: none; }
@media (hover: hover) {
  .cstep-result-item:hover { background: rgba(200,146,26,.07); }
}
.cstep-result-item:active { background: var(--card-hover); }

.cstep-result-thumb {
  width: 36px; height: 36px;
  object-fit: contain; border-radius: 5px;
  background: var(--bg-med); flex-shrink: 0;
}
.cstep-result-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.cstep-result-info { flex: 1; min-width: 0; }
.cstep-result-name {
  font-size: .86rem; font-weight: 600; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cstep-result-sub {
  font-size: .68rem; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cstep-result-arrow { color: var(--gold-dim); font-size: 1.1rem; flex-shrink: 0; }

.cstep-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0 8px; color: var(--muted); font-size: .72rem;
}
.cstep-divider::before,
.cstep-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Mini-tarjeta puro seleccionado en paso 2 */
.cstep-sel-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(200,146,26,.06);
  border: 1px solid rgba(200,146,26,.2);
  border-radius: var(--r); padding: 12px;
  margin-bottom: 16px;
}
.cstep-sel-img {
  width: 44px; height: 44px; object-fit: contain;
  border-radius: 6px; background: var(--bg-med); flex-shrink: 0;
}
.cstep-sel-img--empty {
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.cstep-sel-info { flex: 1; min-width: 0; }
.cstep-sel-brand {
  font-size: .62rem; font-weight: 700; color: var(--gold);
  letter-spacing: .14em; text-transform: uppercase;
}
.cstep-sel-name {
  font-size: .95rem; font-weight: 700; color: var(--cream);
  line-height: 1.2; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cstep-sel-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }

/* ════════════════════════════════════════════════════════════════════════════
   FASE 2 — UX, ACCESIBILIDAD, MICRO-INTERACCIONES
   ════════════════════════════════════════════════════════════════════════════ */

/* ── ACCESIBILIDAD: FOCUS VISIBLE PARA TECLADO ──────────────────────────── */
/* Solo muestra outline cuando el usuario navega con teclado, no con click */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) { outline: none; }

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 5px;
}
.btn-icon:focus-visible,
.qty-btn:focus-visible,
.mobile-nav-item:focus-visible { outline-offset: 2px; }
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* ── BREAKPOINT TABLET (768px) ──────────────────────────────────────────── */
@media (max-width: 768px) and (min-width: 481px) {
  .page-padding   { padding: 22px 22px; }
  .recent-section { padding: 28px 22px 34px; }
  .detail-section { padding: 24px 22px 28px; }
  .cava-header    { gap: 16px; padding-top: 20px; padding-bottom: 20px; }
  .hero           { min-height: 280px; padding: 44px 20px 36px; }
  .hero-btns      { gap: 10px; }
  .btn-hero       { padding: 12px 28px; }
}

/* ── BREAKPOINT MÓVIL GRANDE (600px) ────────────────────────────────────── */
@media (max-width: 600px) and (min-width: 481px) {
  .cards-grid     { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .cards-grid--sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}

/* ── SKELETON LOADERS ───────────────────────────────────────────────────── */
/* El brillo de los esqueletos animaba `background-position`, que repinta en
   cada fotograma: con 24 esqueletos a la vez se comía un tercio de un núcleo
   justo mientras la pantalla está cargando, que es el peor momento posible.
   Ahora el brillo es una capa hija que se DESPLAZA con `transform`. */
@keyframes skeletonShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--card-hover);
  border-radius: var(--r-sm);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%,
              rgba(200,146,26,.13) 50%, transparent 100%);
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}

.skeleton-card {
  display: flex; flex-direction: column;
  background: rgba(24,9,3,.85);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.skeleton-card-img  { width: 100%; aspect-ratio: 3/4; border-radius: 0; }
.skeleton-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; }
.skeleton-line      { height: 10px; border-radius: 4px; }
.skeleton-line--sm  { height: 8px; width: 60%; }
.skeleton-line--md  { height: 12px; width: 80%; }
.skeleton-line--lg  { height: 14px; width: 92%; }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; display: none; }
  .skeleton { opacity: .7; }
}

/* ── LOADING STATE EN BOTONES ───────────────────────────────────────────── */
.btn--loading,
button.btn--loading {
  pointer-events: none;
  opacity: .85;
  position: relative;
  padding-right: 38px;
}
.btn--loading::after {
  content: '';
  position: absolute;
  right: 14px; top: 50%;
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  margin-top: -7px;
  animation: btnSpin .7s linear infinite;
}
.btn-ghost.btn--loading::after,
.btn-icon.btn--loading::after { border-color: var(--gold); border-top-color: transparent; }
@keyframes btnSpin { to { transform: rotate(360deg); } }

.btn-icon--loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.btn-icon--loading::after {
  content: '';
  position: absolute; inset: 0;
  margin: auto; width: 12px; height: 12px;
  border: 2px solid var(--gold);
  border-top-color: transparent;
  border-radius: 50%;
  animation: btnSpin .7s linear infinite;
}

/* ── SUCCESS TICK FLOTANTE ──────────────────────────────────────────────── */
.success-tick {
  position: fixed; top: 50%; left: 50%;
  width: 84px; height: 84px;
  background: rgba(18,12,5,.95);
  color: #5AAA5A;
  border: 2px solid #5AAA5A;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
  z-index: 999;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 30px rgba(90,170,90,.4);
}
.success-tick.show { animation: tickPop .85s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes tickPop {
  0%   { transform: translate(-50%,-50%) scale(0) rotate(-20deg); opacity: 0; }
  35%  { transform: translate(-50%,-50%) scale(1.15) rotate(0); opacity: 1; }
  55%  { transform: translate(-50%,-50%) scale(.95); }
  70%  { transform: translate(-50%,-50%) scale(1.02); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(.7); opacity: 0; }
}

/* ── STAT VALUE PULSE (al cambiar el número) ────────────────────────────── */
@keyframes statPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); text-shadow: 0 0 70px var(--gold-bright), 0 0 30px var(--gold-bright); }
  100% { transform: scale(1); }
}
.stat-value.pulse { animation: statPulse .55s ease; }

/* ── VIEW TRANSITIONS (Chrome 111+, Edge, etc.) ─────────────────────────── */
/* Transiciones de navegación DESACTIVADAS (2026-08-10): el fundido entre
   páginas se percibía como un parpadeo en móvil y hacía sentir la app más
   lenta. La navegación directa es instantánea y más limpia. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

/* ── BÚSQUEDA GLOBAL (Cmd+K) ────────────────────────────────────────────── */
/* Escritorio: esquina inferior derecha (donde estaba el botón de salir).
   Móvil: arriba derecha (abajo se solapa con mobile-nav y FAB "+"). */
.global-search-fab {
  position: fixed; bottom: 22px; right: 18px;
  z-index: 150;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(8,4,1,.94);
  border: 1px solid rgba(200,146,26,.25);
  color: var(--gold);
  font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--tr);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
@media (hover: hover) {
  .global-search-fab:hover {
  background: rgba(200,146,26,.18);
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(200,146,26,.22);
  color: var(--gold-bright);
}
}
/* En móvil NO hay FAB de búsqueda flotante: chocaba con los botones del top-nav
   en las páginas de detalle. La búsqueda vive en la hoja "Más" de la nav inferior. */
@media (max-width: 700px) {
  .global-search-fab { display: none; }
}

.global-search-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: flex-start; justify-content: center;
  padding-top: 8vh;
}
.global-search-overlay.active { display: flex; animation: fadeIn .18s ease both; }
.global-search-overlay.closing { animation: fadeOut .15s ease both; }

.global-search-box {
  width: 100%; max-width: 580px;
  background: rgba(14,7,4,.99);
  border: 1px solid rgba(200,146,26,.3);
  border-top: 2px solid var(--gold);
  border-radius: var(--r);
  display: flex; flex-direction: column;
  max-height: 80vh; max-height: 80dvh;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.8);
  animation: scaleIn .22s cubic-bezier(0.34,1.56,0.64,1) both;
}
.global-search-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.global-search-input-row .gs-ico { color: var(--gold-dim); font-size: 1.05rem; }
.gs-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--cream); font: 500 1rem/1 'Segoe UI', sans-serif;
  padding: 6px 0;
}
.gs-input::placeholder { color: var(--muted); }
.gs-hint {
  font-size: .62rem; letter-spacing: .1em; color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 6px;
}
.gs-results { flex: 1; overflow-y: auto; padding: 4px 0 10px; }
.gs-section-label {
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-dim);
  padding: 14px 18px 6px 18px;
}
.gs-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 18px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background var(--tr), border-left-color var(--tr);
}
.gs-item--focused {
  background: rgba(200,146,26,.07);
  border-left-color: var(--gold);
}
@media (hover: hover) {
  .gs-item:hover {
  background: rgba(200,146,26,.07);
  border-left-color: var(--gold);
}
}
.gs-item-thumb {
  width: 36px; height: 36px; object-fit: contain;
  background: var(--bg-med); border-radius: 5px; flex-shrink: 0;
}
.gs-item-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--muted);
}
.gs-item-info { flex: 1; min-width: 0; }
.gs-item-name { font-size: .85rem; color: var(--cream); font-weight: 600;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item-sub  { font-size: .68rem; color: var(--muted); margin-top: 1px;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item-tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  color: var(--gold); background: rgba(200,146,26,.10);
  border: 1px solid rgba(200,146,26,.22);
  padding: 2px 6px; border-radius: 4px;
  flex-shrink: 0;
}
.gs-empty { padding: 30px 18px; text-align: center; color: var(--muted); font-size: .82rem; font-style: italic; }

/* ── FILTROS FACETADOS ──────────────────────────────────────────────────── */
.facet-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 32px 12px;
}
@media (max-width: 480px) { .facet-bar { padding: 8px 16px 10px; } }
.facet-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 11px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: .68rem; font-weight: 600; letter-spacing: .08em;
  cursor: pointer;
  transition: all var(--tr);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .facet-pill:hover { color: var(--cream); border-color: rgba(200,146,26,.4); }
}
.facet-pill--active {
  background: rgba(200,146,26,.16);
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(200,146,26,.15);
}
.facet-pill-count {
  font-size: .62rem; color: var(--gold-dim); margin-left: 2px;
}
.facet-pill--active .facet-pill-count { color: var(--gold); }

/* ── COMPARADOR (PARA FASE 3) ───────────────────────────────────────────── */
.compare-tray {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translate(-50%, 0);
  z-index: 140;
  display: none;
  background: rgba(14,7,4,.97);
  border: 1px solid rgba(200,146,26,.3);
  border-bottom: none;
  border-radius: var(--r) var(--r) 0 0;
  padding: 12px 16px;
  gap: 14px;
  align-items: center;
  box-shadow: 0 -8px 32px rgba(0,0,0,.6);
}
/* La bandeja se centra con translate(-50%) y `slideUp` anima `transform`:
   con `fill-mode: both` el valor final de la animación SUSTITUYE al centrado
   y la bandeja quedaba 233 px a la derecha. Sus propios fotogramas conservan
   el -50%. */
.compare-tray.show { display: flex; animation: bandejaSube .25s ease both; }
@keyframes bandejaSube {
  from { transform: translate(-50%, 100%); }
  to   { transform: translate(-50%, 0); }
}
@media (max-width: 700px) {
  .compare-tray.show { bottom: calc(54px + env(safe-area-inset-bottom)); }
  /* Con 3-4 huecos se iba a 466 px en una pantalla de 390: se sale por los
     lados. Se acota y, si no cabe, se desplaza por dentro. */
  .compare-tray {
    max-width: calc(100vw - 16px);
    overflow-x: auto;
    scrollbar-width: none;
    /* Con 3 huecos + los dos botones se iba 4 px por encima de los 390 de la
       pantalla: se aprieta el respiro para que entre todo sin desplazar. */
    gap: 10px;
    padding: 10px 12px;
  }
  .compare-tray::-webkit-scrollbar { display: none; }
}
/* --border-acc daba 1,62:1: no se veía que quedaban huecos por llenar. */
.compare-tray-slot { color: var(--muted); }
.compare-tray-slot {
  width: 56px; height: 56px; border-radius: 6px;
  background: var(--card-hover);
  border: 1px dashed var(--border-acc);
  display: flex; align-items: center; justify-content: center;
  color: var(--border-acc); font-size: 1.4rem;
  position: relative;
  flex-shrink: 0;
}
.compare-tray-slot img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }
.compare-tray-slot--filled { border-style: solid; border-color: rgba(200,146,26,.3); }
.compare-tray-remove {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--danger); color: white; border: none;
  font-size: .65rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ── BOTÓN AÑADIR A COMPARAR (en cards de catálogo) ─────────────────────── */
.compare-add-btn {
  position: absolute;
  top: 8px; right: 8px; z-index: 5;
  width: 28px; height: 28px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(200,146,26,.3);
  border-radius: 50%;
  color: var(--gold);
  font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--tr);
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
}
.compare-add-btn:focus-visible { opacity: 1; }
@media (hover: hover) {
  .card:hover .compare-add-btn { opacity: 1; }
}
@media (hover: none) { .compare-add-btn { opacity: .85; } }
@media (hover: hover) {
  .compare-add-btn:hover { background: var(--gold); color: #080401; transform: scale(1.08); }
}
.compare-add-btn--active { background: var(--gold); color: #080401; opacity: 1; }

/* ── EXPORT MENU ────────────────────────────────────────────────────────── */
.export-menu {
  position: absolute;
  right: 0; top: calc(100% + 4px);
  background: rgba(14,7,4,.99);
  border: 1px solid rgba(200,146,26,.25);
  border-radius: var(--r-sm);
  padding: 4px;
  min-width: 160px;
  z-index: 50;
  box-shadow: 0 8px 28px rgba(0,0,0,.6);
  display: none;
  flex-direction: column;
}
.export-menu.show { display: flex; animation: fadeInUp .15s ease both; }
.export-menu-item {
  background: none; border: none; cursor: pointer;
  color: var(--cream-dim); font: 600 .78rem/1 'Segoe UI', sans-serif;
  letter-spacing: .04em; text-align: left;
  padding: 9px 12px; border-radius: 4px;
  display: flex; align-items: center; gap: 8px;
  transition: background var(--tr), color var(--tr);
}
@media (hover: hover) {
  .export-menu-item:hover { background: rgba(200,146,26,.10); color: var(--gold); }
}

/* ── PULL TO REFRESH ────────────────────────────────────────────────────── */
.ptr-indicator {
  position: fixed; top: 60px; left: 50%;
  transform: translate(-50%, -150%);
  z-index: 90;
  width: 38px; height: 38px;
  background: rgba(20,8,3,.96);
  border: 1px solid rgba(200,146,26,.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  font-size: 1.1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  transition: transform .22s ease;
  pointer-events: none;
}
.ptr-indicator.show { transform: translate(-50%, 24px); }
.ptr-indicator.spin span { animation: btnSpin .9s linear infinite; display: inline-block; }

/* ── SWIPE HINT EN LIGHTBOX ─────────────────────────────────────────────── */
.lightbox-hint {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  font-size: .7rem; color: rgba(255,255,255,.4);
  letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none;
  animation: fadeOut 3.5s ease forwards;
  animation-delay: 1.5s;
}
.lightbox-nav-btn {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  background: rgba(20,8,3,.7);
  border: 1px solid rgba(200,146,26,.25);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--tr);
  z-index: 5;
}
@media (hover: hover) {
  .lightbox-nav-btn:hover { background: rgba(200,146,26,.25); }
}
.lightbox-nav-prev { left: 18px; }
.lightbox-nav-next { right: 18px; }
@media (max-width: 600px) {
  .lightbox-nav-btn { width: 38px; height: 38px; font-size: 1.2rem; }
  .lightbox-nav-prev { left: 10px; }
  .lightbox-nav-next { right: 10px; }
}

/* ── GRÁFICOS SIMPLES (Fase 3) ──────────────────────────────────────────── */
.chart-bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 60px;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.chart-bar-label { font-size: .75rem; color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-bar-track {
  height: 10px;
  background: rgba(255,255,255,.04);
  border-radius: 5px; overflow: hidden;
}
.chart-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim) 0%, var(--gold) 100%);
  border-radius: 5px;
  transition: width .8s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 8px rgba(200,146,26,.3);
}
.chart-bar-value { font-size: .78rem; color: var(--gold); font-weight: 700; text-align: right; font-family: Georgia, serif; }
@media (max-width: 480px) {
  .chart-bar-row { grid-template-columns: 90px 1fr 50px; gap: 8px; }
  .chart-bar-label { font-size: .7rem; }
  .chart-bar-value { font-size: .72rem; }
}

/* ── MEJORAS DE TOUCH TARGET (44px mínimo recomendado WCAG/Apple HIG) ───── */
/* Aplica a CUALQUIER dispositivo táctil (móvil y tablet), no solo <700px */
@media (pointer: coarse) {
  /* Botones primarios: altura mínima 44px */
  .btn { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  .btn-sm { min-height: 44px; }
  .btn-hero { min-height: 48px; }

  /* Botones de icono */
  .btn-icon { width: 38px; height: 38px; font-size: .9rem; }

  /* Controles de cantidad (+/−): la acción más usada de la app */
  .qty-btn { width: 36px; height: 36px; }
  .qty-btn--lg { width: 46px; height: 46px; }
  /* En grids densos (2 columnas) un pelín más compactos pero aún tocables */
  .cards-grid--sm .qty-btn { width: 32px; height: 32px; }
  .cards-grid--sm .qty-bar { padding: 6px 6px; }

  /* Cierres de modales y sheets */
  .modal-close,
  .pair-sheet-close,
  .cigar-detail-close { min-width: 40px; min-height: 40px; }

  /* Estrellas de valoración */
  .star { font-size: 1.7rem; padding: 4px; }

  /* Micro-targets de borrado */
  .photo-del { width: 28px; height: 28px; font-size: .8rem; }
  .compare-tray-remove { width: 24px; height: 24px; }
  .pair-saved-del { padding: 12px; }
  .cigar-search-clear { padding: 10px; }
  .suggestion-save-btn { padding: 12px 7px; }

  /* Pills de filtro y pestañas */
  .facet-pill { padding: 9px 13px; }
  .pair-tab { padding: 14px 4px; }

  /* Barra de selección múltiple */
  .selection-cancel,
  .selection-action { width: 40px; height: 40px; }
}

/* ── REDUCED MOTION REFUERZO ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .skeleton              { animation: none !important; }
  .stat-value.pulse      { animation: none !important; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FASE 4 — PWA, OFFLINE, INSTALL BANNER
   ════════════════════════════════════════════════════════════════════════════ */

/* ── BANNER DE INSTALACIÓN PWA ──────────────────────────────────────────── */
.pwa-install-banner {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translate(-50%, calc(100% + 40px));
  z-index: 195;
  width: calc(100% - 32px); max-width: 460px;
  background: rgba(18,8,3,.98);
  border: 1px solid rgba(200,146,26,.35);
  border-radius: var(--r);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.7);
  transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1);
}
.pwa-install-banner.show { transform: translate(-50%, 0); }
@media (max-width: 700px) {
  .pwa-install-banner { bottom: calc(54px + env(safe-area-inset-bottom) + 10px); }
}
.pwa-install-ico { font-size: 1.8rem; flex-shrink: 0; }
.pwa-install-body { flex: 1; min-width: 0; }
.pwa-install-title { font-size: .85rem; font-weight: 700; color: var(--gold); letter-spacing: .04em; }
.pwa-install-msg { font-size: .72rem; color: var(--cream-dim); margin-top: 2px;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── BANNER DE SIN CONEXIÓN ─────────────────────────────────────────────── */
.offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 190;
  background: rgba(180,50,50,.95);
  color: white;
  font-size: .76rem; font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  padding: calc(6px + env(safe-area-inset-top)) 14px 6px;
  transform: translateY(-100%);
  transition: transform .25s ease;
}
.offline-banner.show { transform: translateY(0); }

/* Cuando hay offline banner, empuja el top-nav hacia abajo */
.offline-banner.show ~ .top-nav { /* No fácil con CSS puro; sw lo hace via JS si quisiéramos */ }

/* ── LIGHTBOX MEJORAS ─────────────────────────────────────────────────── */
.lightbox img { transition: transform .2s ease, opacity .12s ease; }

/* ── SAFE AREA INSETS GENERALES ─────────────────────────────────────────── */
@supports(padding: max(0px)) {
  body {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   SELECCIÓN MÚLTIPLE DE PUROS (long-press)
   ════════════════════════════════════════════════════════════════════════════ */

/* Cards seleccionables (puros Y bebidas): bloquear callout/menu nativo al long-press */
.card--cigar[data-cigar-id],
.card--cigar[data-cigar-id] img,
.card--cigar[data-cigar-id] .card-img,
.card--cigar[data-cigar-id] .card-img-link,
.card--drink[data-drink-id],
.card--drink[data-drink-id] img,
.card--drink[data-drink-id] .card-img,
.card--drink[data-drink-id] .card-img-link {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Cards seleccionadas: borde dorado + tick */
.card--drink.card--selected,
.card--cigar.card--selected {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
  transform: scale(.97);
  transition: transform .15s ease;
  position: relative;
  z-index: 2;
}
.card--drink.card--selected::before,
.card--cigar.card--selected::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px;
  z-index: 6;
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
  color: #080401;
  font-weight: 900; font-size: .95rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.7), 0 0 0 2px rgba(8,4,1,.8);
  animation: tickIn .25s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes tickIn {
  0% { transform: scale(0) rotate(-30deg); }
  100% { transform: scale(1) rotate(0); }
}

/* En modo selección, desactivamos navegación de enlaces internos */
body.selection-mode .card--cigar,
body.selection-mode .card--cigar *,
body.selection-mode .card--drink,
body.selection-mode .card--drink * {
  -webkit-user-select: none;
  user-select: none;
}
body.selection-mode .card--cigar a,
body.selection-mode .card--drink a {
  pointer-events: none;
}
body.selection-mode .card--cigar .qty-btn,
body.selection-mode .card--cigar .btn-icon,
body.selection-mode .card--drink .qty-btn,
body.selection-mode .card--drink .btn-icon {
  pointer-events: auto;
  opacity: .5;
  filter: grayscale(.4);
}

/* La .selection-bar es fixed en top:0 y cubre justo la franja del .top-nav
   (60px), no el contenido de <main>, que empieza por debajo. Antes había aquí
   un padding-top:50px que solo provocaba un salto de layout al seleccionar. */

/* Barra superior de selección */
.selection-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: linear-gradient(180deg, var(--gold) 0%, #A87015 100%);
  color: #080401;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 14px;
  transform: translateY(-100%);
  transition: transform .25s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  padding-top: calc(12px + env(safe-area-inset-top));
}
.selection-bar.show { transform: translateY(0); }

.selection-cancel,
/* El texto «Acciones» se desbordaba de este círculo y lo cortaba el borde de
   la pantalla; el botón se queda con su icono y el nombre en aria-label. */
.selection-action {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.18);
  border: none;
  color: #080401;
  font-size: 1.05rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--tr);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .selection-cancel:hover,
  .selection-action:hover { background: rgba(0,0,0,.30); }
}
.selection-action { margin-left: auto; }
.selection-count {
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .04em;
  flex: 1;
}

/* FAB transformado en modo selección */
.mobile-fab.mobile-fab--menu {
  background: linear-gradient(135deg, #d4883a, #A87015);
  font-size: 1.6rem;
  letter-spacing: 0;
  font-weight: 700;
}

/* Menú contextual flotante (sale del FAB o del botón ⋯ de la barra) */
.selection-menu {
  position: fixed;
  z-index: 210;
  background: rgba(14,7,4,.99);
  border: 1px solid rgba(200,146,26,.3);
  border-radius: var(--r);
  padding: 6px;
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 240px;
  max-width: 320px;
  box-shadow: 0 16px 40px rgba(0,0,0,.75);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  /* Posición por defecto: arriba a la derecha (cerca del botón ⋯ de la barra) */
  top: calc(56px + env(safe-area-inset-top));
  right: 12px;
}
.selection-menu.show {
  opacity: 1;
  transform: translateY(0);
}
/* En móvil, si hay FAB visible, lo anclamos cerca del FAB en lugar de arriba */
@media (max-width: 700px) {
  .selection-menu {
    top: auto;
    bottom: calc(54px + env(safe-area-inset-bottom) + 80px);
    right: 14px;
  }
}

.selection-menu-item {
  display: flex; align-items: center; gap: 12px;
  background: none;
  border: none;
  text-align: left;
  padding: 12px 14px;
  font: 600 .85rem/1.2 'Segoe UI', sans-serif;
  color: var(--cream);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--tr);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .selection-menu-item:hover { background: rgba(200,146,26,.12); }
}
.selection-menu-ico {
  font-size: 1.1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.selection-menu-item--danger { color: #d47a7a; }
@media (hover: hover) {
  .selection-menu-item--danger:hover { background: rgba(180,50,50,.15); }
}
.selection-menu-item--ghost  { color: var(--muted); }
.selection-menu-item--disabled {
  opacity: .4;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   MIS CATAS (/catas) — antes vivía inline en catas.html
   ════════════════════════════════════════════════════════════════════════════ */
.catas-list { display: flex; flex-direction: column; gap: 10px; }
.cata-card {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--tr);
}
.cata-card:has(.cata-body--open) { border-color: var(--border-acc); }
.cata-header {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  cursor: pointer; user-select: none;
}
@media (hover: hover) { .cata-header:hover { background: var(--card-hover); } }
.cata-thumb {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--bg-med);
}
.cata-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cata-thumb--empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--muted);
}
.cata-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cata-brand { font-size: .62rem; letter-spacing: .12em; color: var(--gold); font-weight: 700; }
.cata-name {
  font-size: .9rem; color: var(--cream); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cata-vitola { font-size: .72rem; color: var(--cream-dim); }
.cata-cava {
  font-size: .68rem; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cata-status {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-pill);
  border: 1px solid; white-space: nowrap;
}
.cata-status--active {
  color: var(--gold); background: rgba(200,146,26,.08);
  border-color: rgba(200,146,26,.3);
}
.cata-status--archived {
  color: var(--cream-dim); background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.12);
}
.cata-stars { margin-top: 2px; }
.cata-counts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.cata-badge { font-size: .7rem; padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.cata-badge--note  { background: rgba(200,146,26,.12); color: var(--gold); }
.cata-badge--photo { background: rgba(200,146,26,.07); color: var(--cream-dim); }
.cata-chevron {
  font-size: 1.3rem; color: var(--muted);
  transition: transform var(--tr); line-height: 1; margin-top: 4px;
}
.cata-chevron.open { transform: rotate(90deg); }
.cata-body {
  border-top: 1px solid var(--border);
  padding: 16px 14px;
  display: none;
}
.cata-body--open { display: flex; flex-direction: column; gap: 14px; }
.cata-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.cata-photos .photo-thumb {
  width: 80px; height: 80px;
  border-radius: var(--r-sm); overflow: hidden;
  cursor: zoom-in; border: 1px solid var(--border); flex-shrink: 0;
}
.cata-photos .photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cata-notes { display: flex; flex-direction: column; gap: 10px; }

/* ── FEEDBACK TÁCTIL: estado :active en filas/tarjetas tocables ──────────── */
/* En móvil no hay hover: sin esto, tocar una fila no da ninguna señal visual */
@media (hover: none) {
  .recent-row:active,
  .catalog-item:active,
  .gs-item:active,
  .cata-header:active,
  .pair-result-item:active,
  .brand-card:active,
  .card--catalog:active {
    background: rgba(200,146,26,.09);
  }
}

/* Modal "Mover a otra cava" */
.move-cava-list {
  display: flex; flex-direction: column;
  gap: 8px;
  margin: 8px 0 4px;
  max-height: 55vh;
  max-height: 55dvh;
  overflow-y: auto;
}
.move-cava-btn {
  width: 100%;
  justify-content: space-between !important;
  display: flex !important;
  padding: 12px 14px !important;
}
.move-cava-name {
  font-weight: 700;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.move-cava-count {
  font-size: .65rem;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
  flex-shrink: 0;
  margin-left: 12px;
}

/* ── FILAS DE VALOR (modal "Valor colección" — antes una <table> incómoda en móvil) ── */
.value-rows { display: flex; flex-direction: column; }
.value-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
}
.value-row-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.value-row-qty { color: var(--muted); font-size: .78rem; flex-shrink: 0; }
.value-row-val { color: var(--gold); font-weight: 600; flex-shrink: 0; min-width: 76px; text-align: right; }
.value-row--total { border-bottom: none; padding-top: 14px; }
.value-row--total .value-row-name,
.value-row--total .value-row-qty { font-weight: 700; color: var(--cream); }
.value-row--total .value-row-val { font-weight: 700; font-size: 1.05rem; }

/* ════════════════════════════════════════════════════════════════════════════
   ICONOS SVG — sistema propio (sustituye por completo a los emojis)
   Trazo de línea art déco. Heredan color (currentColor) y tamaño de fuente.
   Sprite inline en templates/_iconos.html, inyectado por base.html.
   ════════════════════════════════════════════════════════════════════════════ */
.ico {
  width: 1.15em; height: 1.15em;
  display: inline-block;
  vertical-align: -0.19em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  /* Lenguaje de GRABADO, a juego con la anilla del logo: cortes rectos y
     esquinas afiladas. (El line-art redondeado se veía a app genérica.) */
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 6;
  /* Trazo constante aunque el icono se escale */
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
/* Tamaños — a mayor tamaño, trazo proporcionalmente más fino (grabado) */
.ico--sm  { width: 1em;    height: 1em;    stroke-width: 1.5; }
.ico--lg  { width: 1.5em;  height: 1.5em;  stroke-width: 1.25; }
.ico--xl  { width: 2em;    height: 2em;    stroke-width: 1.1; }
.ico--2xl { width: 2.6em;  height: 2.6em;  stroke-width: 1; }
/* Trazo más grueso para iconos pequeños sobre fondo oscuro */
.ico--bold { stroke-width: 1.9; }
/* Relleno (estados activos: corazón/estrella marcados) */
.ico--fill { fill: currentColor; }
/* Color de acento */
.ico--gold { color: var(--gold); }

/* En botones e items de navegación el icono se separa del texto */
.btn .ico, .btn-sm .ico { margin-right: .1em; }
.btn .ico:only-child, .btn-icon .ico, .qty-btn .ico { margin: 0; }

/* Estados "marcado" de los iconos: se rellenan en lugar de solo trazo */
.star--on .ico,
.cat-detail-wish-btn--active .ico,
.wish-active .ico,
.ico--fill { fill: currentColor; }

/* Las estrellas ahora son SVG: el tamaño lo marca font-size del contenedor */
.star .ico { width: 1em; height: 1em; vertical-align: -.12em; }

/* Iconos dentro de cabeceras/celdas donde antes había un emoji suelto */
.card-img--empty .ico,
.recent-thumb--empty .ico,
.cata-thumb--empty .ico,
.my-cigar-img--empty .ico,
.pair-result-thumb--empty .ico,
.pair-saved-thumb--empty .ico,
.gs-item-thumb--empty .ico,
.cstep-result-thumb--empty .ico,
.cstep-sel-img--empty .ico,
.suggestion-card-img--empty .ico,
.pair-sel-img--empty .ico { width: 1.4em; height: 1.4em; opacity: .55; }

/* Iconos de la navegación inferior y de la hoja "Más" */
.mobile-nav-icon .ico { width: 1.5em; height: 1.5em; }
.mobile-nav-item--sumiller .mobile-nav-icon .ico { width: 1.35em; height: 1.35em; color: #080401; }
.mas-item-ico .ico { width: 1.6em; height: 1.6em; }
.hero-tile-ico .ico { width: 1.7em; height: 1.7em; }
.hero-tile--featured .hero-tile-ico .ico { width: 2.1em; height: 2.1em; }
.alert-strip-ico .ico, .pwa-install-ico .ico { width: 1.4em; height: 1.4em; }
/* El aro mide 100 px y el icono se dimensionaba a 2.6em sobre un font-size de
   3rem: 125 px, se salía por los cuatro lados. */
.offline-icon .ico { width: 1.15em; height: 1.15em; }

/* ════════════════════════════════════════════════════════════════════════════
   CAPA 1 — TACTO: la app responde al dedo
   En móvil no hay :hover, así que sin esto tocar un control no producía NINGUNA
   señal. Todo con transform/opacity (compositable, 60fps) y a prueba de
   prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════════════ */

/* Pulsación: el control cede bajo el dedo y vuelve con un punto de muelle */
.qty-btn, .btn-icon, .photo-del, .modal-close, .pair-sheet-close,
.cigar-detail-close, .facet-pill, .letter-btn, .selection-cancel,
.selection-action, .mas-item, .msg-action-btn, .sumiller-foto-btn,
.sumiller-send, .export-menu-item, .selection-menu-item, .compare-add-btn {
  transition: transform var(--t-tacto) var(--ease-muelle),
              background var(--tr), color var(--tr), border-color var(--tr);
}
.qty-btn:active, .btn-icon:active, .photo-del:active, .modal-close:active,
.pair-sheet-close:active, .cigar-detail-close:active, .facet-pill:active,
.letter-btn:active, .selection-cancel:active, .selection-action:active,
.mas-item:active, .msg-action-btn:active, .sumiller-foto-btn:active,
.sumiller-send:active, .export-menu-item:active, .selection-menu-item:active,
.compare-add-btn:active { transform: scale(.88); }

/* La estrella CRECE al pulsarla: es un gesto de dar, no de apretar */
.star { transition: color var(--t-corta) var(--ease-salida),
                    transform var(--t-tacto) var(--ease-muelle); }
.star:active { transform: scale(1.38); }

/* Botones grandes: hunden menos, pesan más */
.btn:active, .btn-hero:active, .hero-tile:active { transform: scale(.965); }

/* Tarjetas: presión física suave */
.card--cigar:active, .card--drink:active, .brand-card:active,
.my-cigar-card:active { transform: scale(.975); }

/* iOS necesita un listener de toque para aplicar :active a elementos no
   interactivos; se registra en app.js. Aquí solo el contrato visual. */

/* ── RIPPLE DORADO desde el punto exacto del dedo ───────────────────────── */
.ripple-dorado {
  position: fixed;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,168,40,.55) 0%, rgba(200,146,26,.18) 45%, transparent 70%);
  pointer-events: none;
  z-index: 9999;
  opacity: .9;
  animation: rippleDorado .5s var(--ease-salida) forwards;
}
@keyframes rippleDorado {
  to { transform: scale(11); opacity: 0; }
}

/* ── ANILLO DE PROGRESO DEL LONG-PRESS ─────────────────────────────────────
   El long-press dura 480 ms y hasta ahora el usuario los aguantaba a ciegas. */
.card--cigar, .card--drink { position: relative; }
.press-anillo {
  position: absolute; inset: 0;
  border-radius: var(--r);
  pointer-events: none;
  z-index: 4;
  box-shadow: inset 0 0 0 2px var(--gold);
  clip-path: inset(0 100% 0 0);
  animation: pressProgreso var(--press-ms, 480ms) linear forwards;
}
@keyframes pressProgreso {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ripple-dorado, .press-anillo { display: none !important; }
  .qty-btn:active, .btn-icon:active, .star:active, .btn:active,
  .card--cigar:active, .card--drink:active, .hero-tile:active { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   CAPA 2 — LAS ACCIONES DEJAN RASTRO
   El stock, la valoración y los deseados responden al instante y se ve
   HACIA DÓNDE va cada cosa. Nada de esperar a que conteste el servidor.
   ════════════════════════════════════════════════════════════════════════ */

/* ── CONTADOR DE STOCK: el número entra desde el lado correcto ─────────── */
.qty-bump.qty-sube { animation: qtySube .3s var(--ease-salida); }
.qty-bump.qty-baja { animation: qtyBaja .3s var(--ease-salida); }
@keyframes qtySube {
  0%   { transform: translateY(60%) scale(.8); opacity: 0; }
  55%  { transform: translateY(0)   scale(1.18); opacity: 1; color: var(--gold); }
  100% { transform: translateY(0)   scale(1); }
}
@keyframes qtyBaja {
  0%   { transform: translateY(-60%) scale(.8); opacity: 0; }
  55%  { transform: translateY(0)    scale(1.12); opacity: 1; }
  100% { transform: translateY(0)    scale(1); }
}

/* ── ESTRELLAS: se encienden en ola, con una chispa dorada ─────────────── */
.star--chispa {
  animation: estrellaChispa .42s var(--ease-muelle) var(--retardo, 0ms) both;
}
@keyframes estrellaChispa {
  0%   { transform: scale(1)    rotate(0deg);   filter: none; }
  40%  { transform: scale(1.45) rotate(-9deg);  filter: drop-shadow(0 0 7px rgba(224,168,40,.85)); }
  100% { transform: scale(1)    rotate(0deg);   filter: none; }
}

/* ── CORAZÓN VOLADOR: de "añadir a deseados" hasta la pestaña Más ─────── */
.corazon-volador {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  color: var(--gold);
  margin: -12px 0 0 -12px;
  animation: corazonVuela .72s cubic-bezier(.45, .05, .35, 1) forwards;
}
@keyframes corazonVuela {
  0%   { transform: translate(0, 0) scale(1);      opacity: 1; }
  22%  { transform: translate(0, -26px) scale(1.5); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.35); opacity: 0; }
}

/* La pestaña acusa recibo del corazón */
.nav-recibe { animation: navRecibe .4s var(--ease-muelle); }
@keyframes navRecibe {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .qty-bump, .star--chispa, .corazon-volador, .nav-recibe { animation: none !important; }
  .corazon-volador { display: none !important; }
}

/* ── AVISOS (toast): marca que se estampa ─────────────────────────────────
   Antes eran texto pelado. Ahora traen su marca y la de "guardado" cae
   como un sello: gira, aterriza y se queda.                              */
.toast { display: inline-flex; align-items: center; gap: 9px; }
.toast-marca { display: inline-flex; flex-shrink: 0; }
.toast-marca .ico { width: 17px; height: 17px; }
.toast--ok .toast-marca { animation: selloCae .45s var(--ease-muelle) both; }
@keyframes selloCae {
  0%   { transform: scale(2.4) rotate(-24deg); opacity: 0; }
  60%  { transform: scale(.92) rotate(4deg);   opacity: 1; }
  100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .toast--ok .toast-marca { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   CAPA 3 — SUPERFICIES QUE OBEDECEN AL DEDO
   ════════════════════════════════════════════════════════════════════════ */

/* El bloque que se despliega no debe desbordar mientras crece */
.cata-body { overflow: hidden; }

/* El asa de la hoja invita a empujarla: se ensancha al tocarla */
@media (max-width: 700px) {
  .modal::before { transition: width var(--t-corta) var(--ease-salida),
                               background var(--t-corta) var(--ease-salida); }
  .modal-overlay.active .modal:active::before { width: 52px; background: var(--gold); }
}

/* El lightbox atenúa el fondo con el arrastre (lo pone el JS), aquí solo
   se evita que la transición pelee con el gesto */
.lightbox { transition: background .18s linear; }
.lightbox img { will-change: transform; }

/* El scroll del sheet no se encadena al body (y no pelea con el arrastre) */
.modal, .modal-overlay { overscroll-behavior: contain; }

/* ════════════════════════════════════════════════════════════════════════
   CAPA 5 — ATMÓSFERA
   Textura de papel, oro que reacciona a la luz y una brasa en el botón del
   Sumiller. Nada de esto retrasa la aparición del contenido (esa fue la
   queja con los fundidos de navegación): son capas decorativas sobre lo
   que ya está pintado.
   ════════════════════════════════════════════════════════════════════════ */

/* ── GRANO ────────────────────────────────────────────────────────────────
   RETIRADO (2026-08-11). Era una capa `position: fixed` con `mix-blend-mode`
   sobre toda la pantalla: obliga al navegador a recomponer la página entera
   en cada scroll y en el móvil se percibe como parpadeo. El efecto era casi
   invisible; el coste, no. Si algún día se recupera, que sea sin blend y sin
   position: fixed. */

/* ── LOS EPÍGRAFES LLEVAN SU FILETE ────────────────────────────────────────
   El mismo doble filete que llevan las anillas y los iconos: una línea
   gruesa y otra fina, para que la sección "vaya vestida".               */
.section-title { position: relative; padding-left: 14px; }
.section-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: .82em;
  border-left: 2px solid var(--gold);
  border-right: 1px solid var(--gold-dim);
}

/* ── EL ORO COGE LUZ AL PULSARLO ──────────────────────────────────────────
   Un destello diagonal recorre el botón cuando se toca. No hay ninguna
   animación en marcha en reposo: solo se dispara con el dedo.          */
/* OJO con el `position` aquí: el ::after necesita un ancestro posicionado,
   pero el FAB YA es `position: fixed` y ponerle `relative` lo devolvía al
   flujo normal — el botón «+» aparecía al final del todo de la página. */
.btn-hero, .btn-primary, .hero-tile { position: relative; overflow: hidden; }
.mobile-fab { overflow: hidden; }
.btn-hero::after, .btn-primary::after, .hero-tile::after, .mobile-fab::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%,
              rgba(242,226,196,.22) 48%, rgba(242,226,196,.05) 56%, transparent 64%);
  transform: translateX(-130%);
  opacity: 0;
}
.btn-hero:active::after, .btn-primary:active::after,
.hero-tile:active::after, .mobile-fab:active::after {
  animation: destelloOro .62s var(--ease-salida);
}
@keyframes destelloOro {
  from { transform: translateX(-130%); opacity: 1; }
  to   { transform: translateX(130%);  opacity: 0; }
}

/* ── LA BRASA DEL SUMILLER ────────────────────────────────────────────────
   El botón central es la pieza principal de la app: respira como una brasa,
   muy despacio y muy suave. Se apaga si la pestaña no está a la vista
   (lo hace el navegador solo) y con "reducir movimiento".              */
/* OJO: animar box-shadow repinta en cada fotograma. El halo es una capa
   aparte a la que solo se le mueve la opacidad, que va por GPU. */
.mobile-nav-item--sumiller .mobile-nav-icon { position: relative; }
.mobile-nav-item--sumiller .mobile-nav-icon::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 18px 3px rgba(224,168,40,.55);
  opacity: 0;
  animation: brasa 5.5s ease-in-out infinite;
}
@keyframes brasa {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
/* Cuando está en el Sumiller ya luce; no hace falta que además lata */
.mobile-nav-item--sumiller.mobile-nav-item--active .mobile-nav-icon::after { animation: none; }

/* ── LAS CARDS TIENEN PESO ────────────────────────────────────────────────
   Al pulsar, la sombra se recoge: parece que la ficha se apoya en la mesa. */
@media (pointer: coarse) {
  .card { transition: box-shadow var(--t-tacto) var(--ease-salida),
                      transform var(--t-tacto) var(--ease-salida); }
  .card:active { box-shadow: 0 1px 6px rgba(0,0,0,.55); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-item--sumiller .mobile-nav-icon::after { animation: none; }
  .btn-hero:active::after, .btn-primary:active::after,
  .hero-tile:active::after, .mobile-fab:active::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   CAPA 6 — LOS ESTADOS TAMBIÉN CUENTAN ALGO
   Los huecos (sin foto, sin puros, error) eran texto gris suelto. Ahora
   llevan una marca de agua con la figura que toca, para que un humidor
   vacío parezca un humidor vacío y no una página rota.
   ════════════════════════════════════════════════════════════════════════ */

/* ── FICHA SIN FOTO ───────────────────────────────────────────────────────
   Es el caso más frecuente: la mayoría de los puros del humidor no tienen
   imagen de catálogo. En vez de un "Sin imagen" desangelado, la silueta de
   un puro en filigrana con el mismo trazo que los iconos.              */
.card-img--empty {
  background:
    repeating-linear-gradient(135deg,
      rgba(200,146,26,.022) 0 9px, transparent 9px 18px),
    var(--bg-med);
}
.card-img--empty::before {
  content: '';
  position: absolute;
  inset: 0;
  background: no-repeat center / 42% auto
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A3010' stroke-width='1.1'><g transform='rotate(-38 12 12)'><rect x='2.2' y='9.4' width='19.6' height='5.2' rx='1.1'/><path d='M6.6 9.4v5.2M8.4 9.4v5.2'/></g></svg>");
  opacity: .5;
}
.card-img--empty span {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  margin-bottom: 12px;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-style: normal;
  /* --border-acc dejaba el rótulo en 1,77:1. Con --gold-dim sube a 3,06:1 y
     sigue leyéndose como filigrana, no como texto principal. */
  color: var(--gold-dim);
}

/* ── PÁGINA VACÍA ─────────────────────────────────────────────────────────
   Un filete arriba y otro abajo, como una tarjeta de visita. Aparece con
   un desplazamiento mínimo: no compite con nada, porque no hay nada.  */
.empty-page .empty-msg {
  position: relative;
  padding: 30px 8px;
  line-height: 1.9;
  animation: vacioEntra .4s var(--ease-salida) both;
}
.empty-page .empty-msg::before,
.empty-page .empty-msg::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 54px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-acc), transparent);
}
.empty-page .empty-msg::before { top: 0; }
.empty-page .empty-msg::after  { bottom: 0; }
@keyframes vacioEntra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── AVISO DE ERROR EN LISTAS ─────────────────────────────────────────────
   `.empty-msg--error` lo pinta el JS cuando una carga falla: se distingue
   de un "no hay nada", que no es lo mismo.                            */
.empty-msg--error {
  color: #d47a7a;
  border-left: 2px solid rgba(180,50,50,.5);
  padding-left: 12px;
  font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
  .empty-page .empty-msg { animation: none; }
}

/* Aviso de error compartido (lo pinta htmlError en app.js) */
.aviso-error {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 34px 20px;
  text-align: center;
  color: var(--cream-dim);
  font-size: .84rem;
  animation: vacioEntra .32s var(--ease-salida) both;
}
.aviso-error-ico { color: #d47a7a; opacity: .85; }
.aviso-error .btn { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .aviso-error { animation: none; } }

/* ════════════════════════════════════════════════════════════════════════
   DIARIO DE FUMADAS Y MODO CATA
   ════════════════════════════════════════════════════════════════════════ */

/* ── «ME LO HE FUMADO» ────────────────────────────────────────────────── */
.btn-fumar {
  width: 100%;
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(135deg, rgba(200,146,26,.2), rgba(160,60,10,.16));
  border: 1px solid rgba(200,146,26,.45);
  color: var(--cream);
  letter-spacing: .1em;
}
.btn-fumar .ico { color: var(--gold-bright); }
.btn-fumar:disabled { opacity: .38; }
.btn-cata { width: 100%; margin-top: 8px; }

/* La punta se enciende al anotar la fumada */
.brasa-viva {
  position: fixed;
  z-index: 9998;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #FFD27A 0%, #E0762A 40%, rgba(180,60,10,.4) 65%, transparent 75%);
  animation: brasaSube .9s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes brasaSube {
  0%   { transform: translateY(0)    scale(1);   opacity: 1; }
  35%  { transform: translateY(-26px) scale(2.6); opacity: .95; }
  100% { transform: translateY(-92px) scale(1.1); opacity: 0; }
}

.fumada-nota {
  font-size: .74rem; color: var(--cream-dim); line-height: 1.6;
  padding: 2px 0 10px 4px;
  border-left: 1px solid var(--border);
  margin-left: 4px; padding-left: 12px;
  white-space: pre-line;
}

/* ── MODO CATA ────────────────────────────────────────────────────────── */
.cata-puro {
  font-size: .8rem; color: var(--gold); letter-spacing: .06em;
  text-align: center; margin-top: -4px;
}
.cata-reloj {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.6rem; font-weight: 400;
  color: var(--cream);
  text-align: center;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  padding: 6px 0 2px;
}
.cata-tercios { display: flex; gap: 8px; }
.cata-tercio {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.02);
  transition: border-color var(--t-corta) var(--ease-salida),
              background var(--t-corta) var(--ease-salida);
}
.cata-tercio-num {
  font-size: .9rem; font-weight: 700; color: var(--muted);
  font-family: Georgia, serif;
}
.cata-tercio-min { font-size: .62rem; color: var(--gold-dim); min-height: .8em; }
.cata-tercio--hecho { border-color: var(--border-acc); background: rgba(200,146,26,.06); }
.cata-tercio--hecho .cata-tercio-num { color: var(--gold-dim); }
.cata-tercio--activo {
  border-color: var(--gold);
  background: rgba(200,146,26,.12);
}
.cata-tercio--activo .cata-tercio-num { color: var(--gold-bright); }
.modal-cata .stars { justify-content: flex-start; }

/* ════════════════════════════════════════════════════════════════════════
   EL PURO DE HOY
   ════════════════════════════════════════════════════════════════════════ */
.hoy-section { padding: 8px 32px 4px; }
@media (max-width: 480px) { .hoy-section { padding: 8px 16px 4px; } }

.hoy-card {
  display: flex; gap: 14px; align-items: stretch;
  background: linear-gradient(135deg, rgba(24,9,3,.96), rgba(40,16,4,.92));
  border: 1px solid rgba(200,146,26,.28);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  padding: 12px 14px 12px 12px;
  box-shadow: var(--shadow-card);
  transition: opacity var(--t-corta) var(--ease-salida);
}
.hoy-card--cambiando { opacity: 0; }

.hoy-img {
  flex-shrink: 0;
  /* La ALTURA es obligatoria: las fotos de puro son verticalísimas (152x964 es
     lo típico) y sin acotarla la miniatura estiraba la tarjeta hasta 500 px,
     dejando un pilar de tabaco y medio metro de hueco al lado. */
  height: 104px;
  align-self: flex-start;
  width: 78px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-med);
  display: flex; align-items: center; justify-content: center;
}
.hoy-img img { width: 100%; height: 100%; object-fit: cover; }
.hoy-img--empty { color: var(--border-acc); display: flex; }

.hoy-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hoy-brand { font-size: var(--tx-2xs); color: var(--gold); letter-spacing: .2em; font-weight: 700; }
.hoy-name {
  font-size: .96rem; font-weight: 600; color: var(--cream);
  text-decoration: none; line-height: 1.3;
}
.hoy-vitola { font-size: var(--tx-sm); color: var(--cream-dim); }
.hoy-motivo {
  font-size: var(--tx-xs); color: var(--muted);
  font-style: italic; margin-top: 3px;
}
.hoy-acciones {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.hoy-acciones .btn { flex: 0 0 auto; }
.btn-fumar-hoy {
  background: linear-gradient(135deg, rgba(200,146,26,.24), rgba(160,60,10,.18));
  border-color: rgba(200,146,26,.5);
  color: var(--cream);
}
.btn-fumar-hoy .ico { color: var(--gold-bright); }

@media (prefers-reduced-motion: reduce) { .hoy-card { transition: none; } }

/* La hoja que se está arrastrando no debe tener animación de entrada: si se
   reactiva al soltar, hace un amago de volver a abrirse. La clase se quita
   solo al cerrarla de verdad. */
.modal.hoja-arrastrando { animation: none !important; }

/* ── EL ARRASTRE DE LA HOJA NECESITA QUE EL NAVEGADOR NO SE LO QUITE ──────
   Con `touch-action: auto` el navegador reclama el gesto para hacer scroll
   del overlay y dispara `pointercancel` tras el primer movimiento: el
   arrastre moría al instante y lo que se movía era la página del fondo.
   En móvil el overlay NO se desplaza — la hoja gestiona su propio scroll. */
@media (max-width: 700px) {
  .modal-overlay { overflow: hidden; touch-action: none; }
  .modal { touch-action: pan-y; }
  /* Si la hoja no tiene nada que desplazar, el gesto es enteramente nuestro
     (lo marca el JS al abrirla). */
  .modal.hoja-sin-scroll { touch-action: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   FLUIDEZ — que todo hable el mismo idioma de movimiento
   ════════════════════════════════════════════════════════════════════════ */

/* ── LAS FOTOS VIENEN DESDE EL FONDO ──────────────────────────────────────
   Entra un poco atrás y se posa. Solo transform y opacity: ninguna de las
   dos obliga a recalcular el layout, así que puede ir varias a la vez sin
   que el scroll se resienta.
   El retardo lo pone el JS (--retardo-foto) y está acotado a 6 fotos en
   cascada: con cuarenta a la vez, una cascada larga marea.               */
@keyframes fotoLlega {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}
.foto-llega {
  animation: fotoLlega var(--t-media) var(--ease-salida) var(--retardo-foto, 0ms) both;
  will-change: transform, opacity;
}
/* En cuanto termina, se suelta la capa de composición */
.foto-llega { backface-visibility: hidden; }

/* El hueco de la foto no debe estar en blanco mientras llega: un fondo del
   mismo tono que la card evita el destello claro. */
.card-img, .brand-card-img, .detail-main-img, .recent-thumb {
  background-color: var(--bg-med);
}

@media (prefers-reduced-motion: reduce) {
  .foto-llega { animation: none !important; }
}

/* ── MIENTRAS LA BANDEJA DEL COMPARADOR ESTÁ PUESTA ───────────────────────
   Es una barra fija sobre la nav inferior. Sin apartar lo de debajo, el botón
   «+» quedaba ÍNTEGRAMENTE tapado (no se veía ni se podía pulsar) y la última
   fila de tarjetas se quedaba debajo sin scroll que la rescatara. */
@media (max-width: 700px) {
  body.con-bandeja .mobile-fab {
    bottom: calc(54px + env(safe-area-inset-bottom) + 95px);
  }
  body.con-bandeja main {
    padding-bottom: calc(54px + env(safe-area-inset-bottom) + 88px);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ZONAS TÁCTILES Y SEÑAL AL TOCAR (barrido de UI, 2026-08-12)
   La norma de la app es 44x44 px. Varios controles se quedaban por debajo, y
   algunos de los más usados. Donde el diseño manda un tamaño visual pequeño,
   se amplía SOLO la zona sensible con un ::after invisible: el aspecto no
   cambia y el dedo acierta.
   ════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* Los +/− de stock son la acción más usada de la app y median 32 px */
  .cards-grid--sm .qty-btn { position: relative; }
  .cards-grid--sm .qty-btn::after {
    content: ''; position: absolute; inset: -6px;
  }

  /* Editar y borrar humidor iban pegados: 38 px y 6 px de separación */
  .card-actions { gap: 12px; }
  .card-actions .btn-icon { position: relative; }
  .card-actions .btn-icon::after { content: ''; position: absolute; inset: -3px; }
  .card-actions .btn-icon--danger { margin-left: auto; }

  /* Cerrar un modal y los items del menú de exportar */
  .modal-close { width: 44px; height: 44px; }
  .export-menu-item { padding-top: 12px; padding-bottom: 12px; min-height: 44px; }

  /* Las estrellas: cinco de 44 px caben de sobra en 390 px de ancho */
  .stars .star { padding: 0 8px; }

  /* Borrar una conversación del Sumiller medía 23,6x24 px */
  .chat-item-del { position: relative; }
  .chat-item-del::after { content: ''; position: absolute; inset: -10px; }
}

/* Señal al tocar en los controles que no la tenían */
.chat-item:active      { background: rgba(200,146,26,.10); }
.pair-tab:active       { color: var(--gold); }
.hoy-card:active       { transform: scale(.985); }
.cata-header:active    { background: var(--card-hover); }
.recent-row:active     { background: rgba(200,146,26,.07); }
@media (prefers-reduced-motion: reduce) {
  .hoy-card:active { transform: none; }
}

/* Hueco del comparador cuya miniatura no se conoce: mejor la figura que el vacío */
.compare-tray-sinfoto { display: flex; color: var(--gold-dim); }
.compare-tray-sinfoto .ico { width: 22px; height: 22px; }

/* ── EL ASA DE LAS HOJAS ──────────────────────────────────────────────────
   Franja invisible en la parte de arriba del sheet con `touch-action: none`:
   el gesto que empieza aquí es del arrastre, siempre. Sin ella, las hojas con
   scroll propio (formulario de puro, editar…) no se podían cerrar arrastrando
   porque el navegador reclamaba el gesto y lo mataba con `pointercancel`. */
@media (max-width: 700px), (max-height: 560px) and (pointer: coarse) {
  .hoja-asa {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 44px;
    touch-action: none;
    z-index: 4;
    pointer-events: auto;
  }
  .modal { position: relative; }
  /* El asa no debe tapar la X de cerrar */
  .modal-header { position: relative; z-index: 5; }
}
@media (min-width: 701px) { .hoja-asa { display: none; } }

/* Puros que se quedaron a cero: se ven, pero se distinguen de los que tienes */
.card--archivado { opacity: .72; border-style: dashed; }
.card--archivado .qty-val { color: var(--muted); }
.archivados-toggle { margin-top: 4px; }

/* ── HOJA «¿TE LO ENCIENDES?» ─────────────────────────────────────────────
   Encender un puro es una decisión, no un clic. Antes se descontaba al
   instante y sin preguntar. */
.encender-puro {
  font-size: .86rem; color: var(--gold); letter-spacing: .04em;
  margin-top: -4px;
}
.encender-aviso {
  font-size: var(--tx-xs); color: var(--muted); font-style: italic;
}
.encender-opciones { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.encender-opciones .btn {
  width: 100%;
  flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 13px 16px; white-space: normal; text-align: left;
  line-height: 1.35;
}
.encender-opciones .btn span {
  font-size: var(--tx-xs); font-weight: 500; letter-spacing: .02em;
  opacity: .78; text-transform: none;
}
.encender-opciones .btn .ico { margin-right: 6px; vertical-align: -.15em; }

/* Aviso con deshacer: se queda más tiempo, hay que poder decidir */
.toast--deshacer { padding-right: 10px; }
.toast-deshacer {
  margin-left: 6px; flex-shrink: 0;
  background: rgba(200,146,26,.16);
  border: 1px solid rgba(200,146,26,.4);
  color: var(--gold-bright);
  border-radius: var(--r-pill);
  padding: 5px 12px; font: 700 .74rem 'Segoe UI', sans-serif;
  letter-spacing: .04em; cursor: pointer;
  pointer-events: auto;
}
.toast-container { pointer-events: none; }
.toast--deshacer { pointer-events: auto; }