@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inclusive+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* Little Amps */
  --espresso:#522c25; --burnt:#c03001; --amber:#c46500; --marigold:#febf6f;
  --dusty:#89b4ca; --cream:#fff9f2; --linen:#f6ede3; --taupe:#e6dad4;
  --sandstone:#cbbbb4; --dust:#977e77;
  /* Alias que usan las páginas */
  --bg:#fff9f2; --card:#fff9f2; --ink:#522c25; --mut:#977e77; --acc:#c03001; --acc2:#c46500;
  --gold:#febf6f; --line:#e6dad4; --dark:#522c25;
  --ok:#6f8f4f; --amb:#c46500; --blu:#89b4ca; --red:#c03001;
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'Inclusive Sans',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
*{box-shadow:none!important}
html,body{margin:0;height:100%}
body{font-family:var(--sans);color:var(--espresso);background:var(--cream);-webkit-text-size-adjust:100%;letter-spacing:.02em}
svg{display:block}a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

.brand{font-family:var(--serif);font-weight:500;display:flex;align-items:center;gap:10px;letter-spacing:-.02em;color:var(--espresso)}
.wordmark{font-family:var(--serif)!important;font-weight:500!important;letter-spacing:-.03em;color:var(--burnt)}
.bean{width:26px;height:26px;border-radius:50%;background:transparent;border:1.5px solid var(--espresso);position:relative;flex:0 0 auto}
.bean:after{content:"";position:absolute;inset:6px 12px;border-left:1.5px solid var(--espresso);transform:rotate(20deg)}

.topbar{display:flex;align-items:center;gap:14px;padding:14px 20px;background:var(--cream);border-bottom:1px solid var(--taupe);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.role{font-family:var(--mono);font-weight:400;color:var(--espresso);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.branch{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:var(--cream);border:1px solid var(--taupe);border-radius:3px;padding:7px 12px;font-family:var(--mono);font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:.05em}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dusty);flex:0 0 auto}

/* Botón: naranja quemado, radio 3px, mono mayúsculas (etiqueta impresa) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--burnt);color:var(--cream);border:1px solid var(--burnt);border-radius:3px;padding:11px 16px;font-family:var(--mono);font-weight:400;font-size:13px;cursor:pointer;text-transform:uppercase;letter-spacing:.05em}
.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45}
.btn.ghost{background:transparent;color:var(--espresso);border:1px solid var(--espresso)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--marigold);color:var(--espresso);border:0;border-radius:3px;padding:3px 9px;font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.05em}
.muted{color:var(--dust)}
.card{background:var(--cream);border:1px solid var(--taupe);border-radius:8px}
.fade{animation:fade .25s ease}@keyframes fade{from{opacity:0}to{opacity:1}}

/* Estrella sólida (marigold) */
.star{width:22px;height:22px;display:inline-block;background:var(--marigold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* Marquee inferior — banda espresso (no negro puro) */
.marquee{position:relative;background:var(--espresso);color:var(--cream);overflow:hidden;border-top:1px solid var(--taupe);padding:11px 0}
.marquee .track{display:inline-flex;white-space:nowrap;animation:mq 26s linear infinite;font-family:var(--mono);font-weight:400;font-size:13px;text-transform:uppercase;letter-spacing:.1em}
.marquee .track span{padding:0 20px;display:inline-flex;align-items:center;gap:14px}
.marquee .leaf{width:12px;height:12px;background:var(--burnt);clip-path:polygon(50% 0,90% 40%,50% 100%,10% 40%)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Animación de pago (círculo burnt que se expande + palomita) */
.payanim{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;pointer-events:none}
.payanim .pa-circle{width:70px;height:70px;border-radius:50%;background:var(--burnt);display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .6s cubic-bezier(.5,0,.3,1)}
.payanim.go .pa-circle{transform:scale(1)}
.payanim.done .pa-circle{transform:scale(70);transition:transform .5s ease-in}
.payanim .pa-check{opacity:0;transform:scale(.4);transition:.3s .15s}
.payanim.go .pa-check{opacity:1;transform:scale(1)}.payanim.done .pa-check{opacity:0}
.payanim .pa-txt{color:var(--espresso);font-family:var(--mono);font-weight:400;font-size:15px;text-transform:uppercase;letter-spacing:.05em;opacity:0;transition:.3s;position:relative;z-index:2}
.payanim.done .pa-txt{opacity:1;color:var(--cream)}

/* ============================================================
   CAPA LITTLE AMPS — re-skinea los componentes de las páginas
   Radios pequeños (3px controles / 8px cards), bordes hairline 1px,
   monospace en etiquetas, serif en títulos, sin sombras.
   ============================================================ */
/* etiquetas / controles -> mono + radio 3px */
.tab,.cat,.paysel,.opt,.pill,.tag,.rnum,.mode,.pos,.qty button,.line .q button,.acts button,.add,.tapbtn,.guest,.cancel,
input,select,.open,.role,.branch,.st,.tier,.k-mn,.delta,.d,.count,.frow,.legend,td,th,.p,.price{
  font-family:var(--mono)!important}
.tab,.cat,.paysel,.opt,.pill,.tag,.rnum,.mode,.qty button,.line .q button,.add,.tapbtn,.guest,.open,.acts button,
input,select{
  border-radius:3px!important;letter-spacing:.04em}
.tab,.cat,.paysel,.opt,.branch,.stat,.pill,.tag,input,select,.qty button,.line .q button,.add,.open,.acts button{
  border:1px solid var(--taupe)!important}
.tab.on,.cat.on{background:var(--burnt)!important;color:var(--cream)!important;border-color:var(--burnt)!important}
input,select{background:var(--cream)!important;color:var(--espresso)!important;padding:10px 14px!important}
/* superficies -> 8px + hairline, sin degradados */
.card,.card2,.kpi,.panel,.tick,.item,.prod,.hero,.trk,.reward,.qrbox,.stat,.ord,.leak,.ci,.sheet .box,.sevbox,.lk,.rec,.tablewrap,.thumb,.ico,.pic,.e{
  border-radius:8px!important}
.card,.card2,.kpi,.panel,.tick,.item,.prod,.reward,.qrbox,.stat,.ord,.tablewrap{
  border:1px solid var(--taupe)!important;background:var(--cream)}
.kpi.hl{background:var(--linen)!important;border-color:var(--taupe)!important}
/* títulos serif con tracking ceñido */
h1,h2,h3,.hi,.qh,.folio,.brand{font-family:var(--serif)!important;letter-spacing:-.02em;font-weight:500}
/* colores de estado -> paleta cálida */
.pos,.up,td.pos{color:var(--burnt)!important}