/* ============================================================
   PAN & ARTE — Panadería · Sistema de diseño
   Paleta "IN COLOR BALANCE" combinada (6 colores):
   terracota + ámbar/mostaza + crema + azul + azul marino + VINO
   ============================================================ */
:root {
  --brand: #be6e3f;        /* terracota (principal) */
  --brand-dark: #93512a;   /* terracota oscura */
  --brand-light: #d68f5e;  /* terracota clara */
  --accent: #e19b33;       /* ámbar / mostaza */
  --accent-dark: #c07f1e;
  --accent2: #296eb0;      /* azul medio (combinado) */
  --accent3: #192a43;      /* azul marino (combinado) */
  --wine: #722f44;         /* ✦ vino (nuevo acento premium) */
  --wine-dark: #521f30;    /* vino profundo */
  --wine-light: #9c4a63;   /* vino claro / rosado */
  --danger: #c0392b;
  --bg: #fbf3e4;           /* crema muy clara (derivada) */
  --surface: #ffffff;
  --surface-2: #f2d3aa;    /* crema de la paleta */
  --border: #ecd9b6;
  --text: #21344a;         /* azul marino texto */
  --text-soft: #7c6a52;
  --shadow: 0 4px 16px rgba(25,42,67,.10);
  --shadow-lg: 0 12px 40px rgba(25,42,67,.20);
  --radius: 18px;
}
[data-theme="dark"] {
  --bg: #131d2b;
  --surface: #1b2738;
  --surface-2: #243245;
  --border: #324560;
  --text: #f2e6d2;
  --text-soft: #b9a98c;
  --shadow: 0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.6);
}
.accent2-grad { background: linear-gradient(135deg, var(--accent2) 0%, #1d5688 100%); }
.accent3-grad { background: linear-gradient(135deg, var(--accent3) 0%, #0f1c30 100%); }
.wine-grad   { background: linear-gradient(135deg, var(--wine) 0%, var(--wine-dark) 100%); }
.wine-grad-warm { background: linear-gradient(120deg, var(--wine) 0%, var(--brand) 70%, var(--accent) 120%); }
.btn-glow-wine { box-shadow: 0 6px 22px rgba(114,47,68,.45); }
.text-wine { color: var(--wine); }
[data-theme="dark"] .text-wine { color: var(--wine-light); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background .3s, color .3s;
}
.brand-grad { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%); }
.accent-grad { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); }
.card-surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.text-soft { color: var(--text-soft); }

/* Botones táctiles */
.btn-touch { min-height: 52px; border-radius: 14px; font-weight: 700; transition: transform .12s, box-shadow .2s, background .2s; }
.btn-touch:active { transform: scale(.96); }

/* Product card */
.prod-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; display: flex; flex-direction: column; cursor: pointer; }
.prod-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.prod-card:active { transform: scale(.98); }
.prod-card .img-wrap { width: 100%; aspect-ratio: 1/1; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.prod-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* Cart item */
.cart-item { background: var(--surface-2); border-radius: 14px; }

/* Scrollbar */
.scroll-area::-webkit-scrollbar { width: 8px; }
.scroll-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

/* Animations */
@keyframes pop { 0%{transform:scale(.85);opacity:0} 100%{transform:scale(1);opacity:1} }
.pop { animation: pop .25s ease; }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.slide-up { animation: slideUp .3s ease; }
@keyframes flash { 0%{background:rgba(41,110,176,.22)} 100%{background:transparent} }
.flash-new { animation: flash 2s ease; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }

/* Pulse dot */
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 0 rgba(41,110,176,.6); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(41,110,176,.6)} 70%{box-shadow:0 0 0 10px rgba(41,110,176,0)} 100%{box-shadow:0 0 0 0 rgba(41,110,176,0)} }

/* Status badges */
.badge { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-nuevo { background: #dbeafe; color: #1d4ed8; }
.badge-preparando { background: #fdeacc; color: #b45309; }
.badge-listo { background: #f4dbe3; color: var(--wine); }
.badge-entregado { background: #dcfce7; color: #15803d; }
.badge-cancelado { background: #fee2e2; color: #b91c1c; }
[data-theme="dark"] .badge-nuevo { background: #1e3a8a; color: #bfdbfe; }
[data-theme="dark"] .badge-preparando { background: #78350f; color: #fde68a; }
[data-theme="dark"] .badge-listo { background: var(--wine-dark); color: #f0c6d3; }
[data-theme="dark"] .badge-entregado { background: #14532d; color: #bbf7d0; }
[data-theme="dark"] .badge-cancelado { background: #7f1d1d; color: #fecaca; }

/* Folio display */
.folio-big { font-size: clamp(48px, 12vw, 110px); font-weight: 900; letter-spacing: -2px; line-height: 1; }

/* Ticket — vista previa en pantalla */
.ticket-paper {
  width: 280px;
  font-family: 'Courier New', 'Courier', monospace;
  color: #111;
  background: #fff;
  border-radius: 8px;
  text-align: left;
  position: relative;
}
.ticket-paper .tk-edge-top,
.ticket-paper .tk-edge-bot {
  height: 10px;
  background:
    radial-gradient(circle at 6px -2px, transparent 6px, #fff 6px) repeat-x;
  background-size: 12px 10px;
}
.ticket-paper .tk-edge-bot { transform: rotate(180deg); }

/* Ticket — al imprimir: solo el ticket, tamaño 80mm térmica */
@media print {
  body * { visibility: hidden !important; }
  #ticket, #ticket * { visibility: visible !important; }
  #ticket {
    position: absolute; left: 0; top: 0;
    width: 80mm; box-shadow: none !important; border-radius: 0 !important;
    background: #fff; color: #000;
  }
  #ticket .tk-edge-top, #ticket .tk-edge-bot { display: none !important; }
  @page { margin: 0; size: 80mm auto; }
}

/* Inputs */
.inp { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 12px 14px; width: 100%; outline: none; transition: border .2s; }
.inp:focus { border-color: var(--brand); }

/* Hide scrollbar utility */
.no-sb::-webkit-scrollbar { display: none; }
.no-sb { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   ✦ PAN & ARTE — DESIGN SYSTEM 2.0 "Artisan Premium"
   Glassmorphism · sombras multicapa · micro-interacciones ·
   tipografía display Fraunces · shine/glow · noise sutil
   ============================================================ */
:root {
  --font-display: 'Fraunces', 'Plus Jakarta Sans', serif;
  --shadow-xs: 0 1px 2px rgba(25,42,67,.06), 0 1px 1px rgba(25,42,67,.04);
  --shadow: 0 1px 2px rgba(25,42,67,.05), 0 4px 10px rgba(25,42,67,.07), 0 12px 28px rgba(25,42,67,.08);
  --shadow-lg: 0 2px 4px rgba(25,42,67,.06), 0 10px 24px rgba(25,42,67,.10), 0 28px 64px rgba(25,42,67,.16);
  --glow-brand: 0 0 0 1px rgba(190,110,63,.14), 0 8px 28px rgba(190,110,63,.28);
  --glow-accent: 0 0 0 1px rgba(225,155,51,.16), 0 8px 28px rgba(225,155,51,.30);
  --glow-blue: 0 0 0 1px rgba(41,110,176,.14), 0 8px 28px rgba(41,110,176,.26);
  --glow-wine: 0 0 0 1px rgba(114,47,68,.16), 0 8px 28px rgba(114,47,68,.32);
  --glass-bg: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.55);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"] {
  --glass-bg: rgba(27,39,56,.68);
  --glass-border: rgba(255,255,255,.08);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.5), 0 34px 80px rgba(0,0,0,.55);
}

/* Tipografía display para titulares */
.font-display { font-family: var(--font-display); font-optical-sizing: auto; }
h1, h2, .folio-big { letter-spacing: -.02em; }

/* Fondo con textura de grano sutil (ruido SVG inline) */
.bg-grain::before {
  content:""; position:fixed; inset:0; z-index:-5; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.028 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Glass surfaces */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--glass-border);
}
.glass-header {
  background: linear-gradient(135deg, rgba(190,110,63,.92), rgba(214,143,94,.88)) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

/* Card 2.0 — borde luminoso al pasar + elevación suave */
.card-surface { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(190,110,63,.35); }

/* Shine: destello diagonal al hover (cards de producto/módulo) */
.shine { position: relative; overflow: hidden; }
.shine::after {
  content:""; position:absolute; top:0; left:-80%; width:55%; height:100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transform: skewX(-22deg); transition: left .6s var(--ease-out); pointer-events:none;
}
.shine:hover::after { left: 130%; }

/* Botones premium: brillo superior + spring press */
.btn-touch { transition: transform .15s var(--ease-spring), box-shadow .25s, filter .2s; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--shadow-xs); }
.btn-touch:hover { filter: brightness(1.06); }
.btn-touch:active { transform: scale(.95); }
.btn-glow:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--glow-brand); }
.btn-glow-blue:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--glow-blue); }
.btn-glow-accent:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--glow-accent); }
.btn-glow-wine:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--glow-wine); }

/* Focus ring accesible y de marca */
:is(button,a,input,select,textarea):focus-visible {
  outline: 3px solid rgba(225,155,51,.55); outline-offset: 2px; border-radius: 10px;
}

/* Prod card 2.0 */
.prod-card { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s; }
.prod-card:hover { transform: translateY(-5px) scale(1.012); box-shadow: var(--shadow-lg); border-color: rgba(190,110,63,.4); }
.prod-card .img-wrap img { transition: transform .5s var(--ease-out); }
.prod-card:hover .img-wrap img { transform: scale(1.06); }

/* Cat tab premium */
.cat-tab { border-radius: 999px !important; }

/* Gradiente animado (hero / textos) */
@keyframes gradShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.text-grad-animated {
  background: linear-gradient(90deg, #be6e3f, #e19b33, #722f44, #296eb0, #be6e3f);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 8s ease infinite;
}

/* ✦ Cinta premium vino (encabezados de sección / hero) */
.wine-ribbon {
  background: linear-gradient(120deg, var(--wine-dark) 0%, var(--wine) 55%, var(--wine-light) 100%);
  color: #fff;
}
.glass-header-wine {
  background: linear-gradient(135deg, rgba(82,31,48,.94), rgba(114,47,68,.90)) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

/* Blobs decorativos animados */
@keyframes blobFloat { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-24px) scale(1.08)} 66%{transform:translate(-22px,18px) scale(.94)} }
.blob { position:absolute; border-radius:50%; filter:blur(70px); opacity:.35; pointer-events:none; animation: blobFloat 14s ease-in-out infinite; z-index:-1; }

/* Entradas escalonadas (reveal) */
@keyframes riseIn { from{opacity:0; transform:translateY(26px) scale(.97)} to{opacity:1; transform:none} }
.rise { opacity:0; animation: riseIn .7s var(--ease-out) forwards; }
.rise-1{animation-delay:.05s}.rise-2{animation-delay:.15s}.rise-3{animation-delay:.25s}.rise-4{animation-delay:.35s}.rise-5{animation-delay:.45s}.rise-6{animation-delay:.55s}

/* Flotación suave (iconos hero) */
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.float-y { animation: floatY 3.6s ease-in-out infinite; }

/* Ticker de marquesina */
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-track { display:inline-flex; gap:2.5rem; white-space:nowrap; animation: marquee 26s linear infinite; will-change:transform; }

/* Skeleton loaders */
@keyframes shimmer { from{background-position:-400px 0} to{background-position:400px 0} }
.skeleton {
  border-radius: 12px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 800px 100%; animation: shimmer 1.3s infinite linear;
}

/* KPI cards premium */
.kpi-card { position:relative; overflow:hidden; }
.kpi-card::before { content:""; position:absolute; top:-40px; right:-40px; width:130px; height:130px; border-radius:50%; opacity:.10; background: currentColor; }

/* Contador tabular para números en vivo */
.tabular { font-variant-numeric: tabular-nums; }

/* Divisores suaves */
.soft-divider { height:1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }

/* Scrollbar refinado */
.scroll-area::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll-area::-webkit-scrollbar-thumb { background: linear-gradient(var(--brand-light), var(--wine)); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }

/* Selección de texto de marca */
::selection { background: rgba(225,155,51,.35); }

/* Chip / pill 2.0 */
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.02em; }

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}