/* Sistema visual Bagels & Bagels para la web (propuesta, web de ejemplo y sistema de gestión). Fuente única de tokens:
   las tres partes la cargan y suman sus propios componentes encima, sin redefinir estos valores.
   Paleta clara y familiar: crema, café, kraft y el verde oliva de la marca (tono a confirmar en el local) como único acento.
   Motivos del deck de venta: semillas, grano de papel de envoltorio, curvas de nivel kraft, sello que gira, bagel que se
   dibuja, ticket kraft con muesca y sello de tinta. Sin logo ni fotos de la marca. Detalle en docs/decisiones-visuales.md. */
:root {
  /* superficies */
  --paper: #F7F1E6; --paper-2: #EFE5D3; --card: #FFFDF8; --line: #E4D9C6; --line-strong: #CDBDA3;
  /* texto */
  --ink: #2B211A; --soft: #3B2A20; --muted: #6E5D50; --faint: #8F7E70;
  /* acento: verde oliva (5,96:1 sobre --card; blanco sobre él 6,37:1) */
  --olive: #56652F; --olive-2: #7D8B4E; --olive-soft: #E6E8D2; --olive-ink: #3F4A21;
  --accent: var(--olive); --accent-ink: var(--olive); --accent-soft: var(--olive-soft);
  /* material */
  --kraft: #D9BC93; --kraft-2: #C9A577; --kraft-soft: #F1E4CE;
  /* estados (siempre con texto o ícono, nunca solo color) */
  --ok: #2F5D3A; --ok-soft: #DCE8D6; --warn: #9A4A1E; --warn-soft: #F4E0D1; --bad: #A3322A; --bad-soft: #F6DCD8;
  --font: "Figtree", ui-sans-serif, system-ui, sans-serif; --display: "Anton", Impact, sans-serif; --hand: "Permanent Marker", "Segoe Print", cursive;
  --r-sm: 10px; --r: 18px; --r-lg: 28px;
  --shadow: 0 30px 60px -36px rgb(59 42 32 / .35); --shadow-sm: 0 14px 32px -22px rgb(59 42 32 / .35);
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 1rem/1.55 var(--font); overflow-x: hidden; }
/* semillas del deck en una capa fija (iOS ignora background-attachment: fixed) + grano de papel de envoltorio */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%22160%22%3E%3Cellipse%20cx%3D%2253.2%22%20cy%3D%2226.9%22%20rx%3D%223.6%22%20ry%3D%221.7%22%20transform%3D%22rotate%28117%2053.2%2026.9%29%22%20fill%3D%22%23442E23%22%20opacity%3D%22.16%22/%3E%3Cellipse%20cx%3D%2285.5%22%20cy%3D%2259.6%22%20rx%3D%223.6%22%20ry%3D%221.7%22%20transform%3D%22rotate%2810%2085.5%2059.6%29%22%20fill%3D%22%23442E23%22%20opacity%3D%22.16%22/%3E%3Cellipse%20cx%3D%229.7%22%20cy%3D%2269.9%22%20rx%3D%223.6%22%20ry%3D%221.7%22%20transform%3D%22rotate%2813%209.7%2069.9%29%22%20fill%3D%22%23442E23%22%20opacity%3D%22.16%22/%3E%3Cellipse%20cx%3D%2268.5%22%20cy%3D%22129.7%22%20rx%3D%223.6%22%20ry%3D%221.7%22%20transform%3D%22rotate%2822%2068.5%20129.7%29%22%20fill%3D%22%23442E23%22%20opacity%3D%22.16%22/%3E%3Cellipse%20cx%3D%2299.4%22%20cy%3D%22148.1%22%20rx%3D%223.6%22%20ry%3D%221.7%22%20transform%3D%22rotate%28104%2099.4%20148.1%29%22%20fill%3D%22%23442E23%22%20opacity%3D%22.16%22/%3E%3Cellipse%20cx%3D%22152.4%22%20cy%3D%2211.1%22%20rx%3D%223.6%22%20ry%3D%221.7%22%20transform%3D%22rotate%28155%20152.4%2011.1%29%22%20fill%3D%22%23442E23%22%20opacity%3D%22.16%22/%3E%3Ccircle%20cx%3D%2225.9%22%20cy%3D%2221.9%22%20r%3D%221.3%22%20fill%3D%22%231D1D1B%22%20opacity%3D%22.2%22/%3E%3Cellipse%20cx%3D%2231.5%22%20cy%3D%2292.4%22%20rx%3D%223.6%22%20ry%3D%221.7%22%20transform%3D%22rotate%28115%2031.5%2092.4%29%22%20fill%3D%22%23442E23%22%20opacity%3D%22.16%22/%3E%3Cellipse%20cx%3D%2287.3%22%20cy%3D%2213.5%22%20rx%3D%223.6%22%20ry%3D%221.7%22%20transform%3D%22rotate%2811%2087.3%2013.5%29%22%20fill%3D%22%23442E23%22%20opacity%3D%22.16%22/%3E%3Cellipse%20cx%3D%22107.4%22%20cy%3D%2269.0%22%20rx%3D%223.6%22%20ry%3D%221.7%22%20transform%3D%22rotate%2857%20107.4%2069.0%29%22%20fill%3D%22%23442E23%22%20opacity%3D%22.16%22/%3E%3Ccircle%20cx%3D%2272.9%22%20cy%3D%2249.6%22%20r%3D%221.3%22%20fill%3D%22%231D1D1B%22%20opacity%3D%22.2%22/%3E%3Ccircle%20cx%3D%2241.1%22%20cy%3D%2291.3%22%20r%3D%221.3%22%20fill%3D%22%231D1D1B%22%20opacity%3D%22.2%22/%3E%3Cellipse%20cx%3D%22114.9%22%20cy%3D%2247.8%22%20rx%3D%223.6%22%20ry%3D%221.7%22%20transform%3D%22rotate%28176%20114.9%2047.8%29%22%20fill%3D%22%23442E23%22%20opacity%3D%22.16%22/%3E%3Cellipse%20cx%3D%2267.6%22%20cy%3D%22119.1%22%20rx%3D%223.6%22%20ry%3D%221.7%22%20transform%3D%22rotate%2827%2067.6%20119.1%29%22%20fill%3D%22%23442E23%22%20opacity%3D%22.16%22/%3E%3Cellipse%20cx%3D%2210.0%22%20cy%3D%22105.6%22%20rx%3D%223.6%22%20ry%3D%221.7%22%20transform%3D%22rotate%28138%2010.0%20105.6%29%22%20fill%3D%22%23442E23%22%20opacity%3D%22.16%22/%3E%3Cellipse%20cx%3D%22137.1%22%20cy%3D%2251.7%22%20rx%3D%223.6%22%20ry%3D%221.7%22%20transform%3D%22rotate%28125%20137.1%2051.7%29%22%20fill%3D%22%23442E23%22%20opacity%3D%22.16%22/%3E%3C/svg%3E"); background-size: 160px 160px; opacity: .55; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .27 0 0 0 0 .18 0 0 0 0 .14 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); }
a { color: inherit; } button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.h1, .h2, h1, h2, .big, .ticket h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0; text-transform: uppercase; line-height: .98; margin: 0; }
.kicker { font: 700 .8rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 12px; }
.lead { font-size: 1.2rem; line-height: 1.45; color: var(--soft); }
.label { font: 700 .72rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.hand { font-family: var(--hand); color: var(--accent-ink); }
.accent { color: var(--accent); }
.mark { background: linear-gradient(var(--accent-soft), var(--accent-soft)) no-repeat 0 85% / 100% 40%; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-sm); }
.card.hot { border-color: var(--accent); }
.chip { display: inline-block; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; background: var(--card); border: 2px dashed var(--line); color: var(--muted); }
.chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font: 700 1rem var(--font); text-decoration: none; cursor: pointer; transition: transform .15s var(--ease); }
.btn:active { transform: scale(.97); }
.btn.dark { background: var(--soft); color: var(--paper); }
.btn.ghost { background: transparent; color: var(--soft); border: 1.5px solid var(--line-strong); }
.btn.quiet { background: var(--card); color: var(--soft); border: 2px solid var(--line); }

/* ticket kraft con muesca arriba y abajo, como el pedido del deck */
.ticket { background: var(--kraft); color: var(--ink); border-radius: 14px; padding: 22px 22px 24px; box-shadow: var(--shadow-sm);
  -webkit-mask: radial-gradient(circle 11px at 50% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 50% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 11px at 50% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 50% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.ticket .label { color: var(--soft); }
.ticket h3 { font-size: 1.7rem; margin: 6px 0 8px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 2px dashed rgb(68 46 35 / .25); }
.row:last-child { border-bottom: 0; }
.row b { font-variant-numeric: tabular-nums; }
.gap { color: var(--accent); font-weight: 800; }
/* sello de tinta */
.sello { display: inline-block; border: 3px solid currentColor; border-radius: 8px; padding: 4px 12px; font-family: var(--display); font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: .04em; transform: rotate(-6deg); }
.sello.ok { color: var(--ok); } .sello.warn { color: var(--accent); }
.stamp { transform: scale(2.2) rotate(-14deg); opacity: 0; transition: transform 420ms var(--spring), opacity 200ms linear; }
.stamp.on { transform: scale(1) rotate(-6deg); opacity: 1; }

/* sello circular que gira y bagel que se dibuja (portada del deck) */
.seal { width: 220px; height: 220px; pointer-events: none; }
.seal .o { fill: none; stroke: var(--soft); stroke-width: 1.5; opacity: .5; }
.seal text { font-family: var(--display); font-size: 25px; letter-spacing: 3.2px; fill: var(--soft); animation: spin 40s linear infinite; transform-origin: 150px 150px; transform-box: view-box; }
.seal .mini circle { fill: var(--kraft); } .seal .mini .hole { fill: var(--paper); } .seal .mini ellipse { fill: var(--soft); opacity: .8; }
.bagel .dough { fill: none; stroke: var(--kraft); stroke-width: 150; }
.bagel .crust { fill: none; stroke: var(--kraft-2); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: draw 1600ms var(--ease) 200ms forwards; }
.bagel .seed { fill: var(--soft); opacity: 0; animation: fade 500ms var(--ease) 1000ms forwards; }
.bagel { animation: spin 80s linear infinite; }
.topo { position: absolute; pointer-events: none; background: url("topo.svg") center / contain no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: .8; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .seal text, .bagel { animation: none !important; }
}