/* Rei do Espetinho — identidade visual (cores e letra tiradas do logo, do banner e do Instagram
   @reidoespetinho.bji): amarelo-ouro da coroa, preto da camisa, letra pesada em caixa alta.
   Servido como /assets/tema.css; todas as telas da pasta reidoespetinho/ usam estes tokens. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&display=swap');

:root {
  --rei-amarelo: #ffbd00;
  --rei-amarelo-2: #ffcb33;
  --rei-amarelo-escuro: #d99f00;
  --rei-amarelo-suave: #fff3cc;
  --rei-preto: #111111;
  --rei-grafite: #1d1d1d;
  --rei-grafite-2: #2a2a2a;
  --rei-creme: #fffaf0;
  --rei-brasa: #e4572e;   /* alerta / atraso: cor de brasa */
  --rei-ok: #23a55a;

  /* tokens do Hermes (brand.css) remapeados para a marca */
  --charcoal: var(--rei-preto);
  --red: var(--rei-preto);
  --red-dark: #000;
  --red-soft: var(--rei-amarelo-suave);
  --off: var(--rei-creme);
  --warm: #f6ecd6;
  --warm-2: #eadcbc;
  --line: #ece2cc;
  --muted: #6b6457;
  --ok: var(--rei-ok);
  --warn: var(--rei-amarelo-escuro);
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* letreiro: caixa alta pesada, como "ESPETINHO BOM É AQUI." do banner */
.rei-titulo { font-family: var(--font); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95; }

/* faixa com "REI DO ESPETINHO" vazado repetido, o fundo do banner */
.rei-padrao { position: relative; overflow: hidden; isolation: isolate; }
.rei-padrao::before {
  content: 'REI DO ESPETINHO REI DO ESPETINHO REI DO ESPETINHO REI DO ESPETINHO REI DO ESPETINHO REI DO ESPETINHO REI DO ESPETINHO REI DO ESPETINHO REI DO ESPETINHO REI DO ESPETINHO REI DO ESPETINHO REI DO ESPETINHO';
  position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none;
  font: 900 34px/1.15 var(--font); letter-spacing: 0.02em; color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.38); transform: rotate(-4deg); word-spacing: 6px;
}

/* coroa do logo (SVG em linha, herda a cor) */
.coroa { display: inline-block; width: 1.4em; height: 1em; flex: none; }

/* botões da marca */
.btn { background: var(--rei-preto); color: var(--rei-amarelo); font-weight: 800; }
.btn:hover { background: #000; }
.btn.amarelo { background: var(--rei-amarelo); color: var(--rei-preto); }
.btn.amarelo:hover { background: var(--rei-amarelo-2); }
.btn.ghost { background: #fff; color: var(--rei-preto); border: 1.5px solid var(--line); }

.toast { font-family: var(--font); font-weight: 700; }

/* ───────── telas da chapa e da cozinha (celular do chapeiro e da cozinha, ex.: iPhone 15 Pro) ─────────
   Fundo escuro e letra grande: leitura de longe, com a mão ocupada e a tela suja. Tudo que se toca
   tem pelo menos 52 px; o botão principal fica embaixo de cada pedido, no alcance do polegar. */
body.estacao { background: #0b0b0b; color: #fff; min-height: 100vh; min-height: 100dvh; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.est-topo { position: sticky; top: 0; z-index: 20; background: var(--rei-preto); padding: calc(8px + env(safe-area-inset-top)) 12px 10px 16px; border-bottom: 3px solid var(--rei-amarelo); display: flex; align-items: center; gap: 8px; }
.est-topo .coroa { color: var(--rei-amarelo); width: 34px; height: 24px; }
.est-topo h1 { margin: 0; font: 900 24px/1 var(--font); text-transform: uppercase; flex: 1; min-width: 0; }
.est-topo h1 small { display: block; margin-top: 3px; font: 700 12px/1.2 var(--font); color: #bdb5a6; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-btn { width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--rei-grafite-2); color: #fff; display: grid; place-items: center; flex: none; }
.est-btn svg { width: 22px; height: 22px; }
.est-btn.on { background: var(--rei-amarelo); color: var(--rei-preto); }
.est-lista { padding: 12px 12px calc(28px + env(safe-area-inset-bottom)); display: grid; gap: 14px; }
@media (min-width: 720px) { .est-lista { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; } }
.est-card { background: var(--rei-grafite); border-radius: 22px; overflow: hidden; border: 2px solid transparent; }
.est-card.novo { animation: est-chega .5s ease-out; border-color: var(--rei-amarelo); }
.est-card.atraso { border-color: var(--rei-brasa); }
@keyframes est-chega { from { transform: translateY(-12px); opacity: 0; } }
.est-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; }
.est-head b { font: 900 30px/1 var(--font); letter-spacing: -.02em; }
.est-head .quem { flex: 1; min-width: 0; color: #bdb5a6; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-tempo { font: 900 15px/1 var(--font); padding: 8px 11px; border-radius: 999px; background: rgba(35,165,90,.18); color: #5fe39a; font-variant-numeric: tabular-nums; flex: none; }
.est-tempo.meio { background: rgba(255,189,0,.18); color: var(--rei-amarelo); }
.est-tempo.atraso { background: rgba(228,87,46,.24); color: #ff9a7a; }
.est-pronto { margin: 8px 12px 12px; width: calc(100% - 24px); min-height: 64px; border-radius: 18px; border: 0; background: var(--rei-amarelo); color: var(--rei-preto); font: 900 19px/1.1 var(--font); text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 14px; }
.est-pronto:active { transform: scale(.98); }
.est-pronto:disabled { opacity: .5; }
.est-pronto svg { width: 26px; height: 26px; stroke-width: 3; }
.est-obs { margin: 4px 16px 6px; display: flex; gap: 8px; align-items: flex-start; font: 800 15px/1.3 var(--font); color: #ffb59c; background: rgba(228,87,46,.16); border-radius: 12px; padding: 10px 12px; }
.est-vazio { text-align: center; padding: 90px 24px; color: #8f887b; font-weight: 600; }
.est-vazio .coroa { width: 96px; height: 64px; color: #2c2c2c; }
.est-vazio h2 { color: #fff; font: 900 26px/1.1 var(--font); text-transform: uppercase; margin: 16px 0 6px; }
.est-vazio p { margin: 0; }
.est-snack { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; background: #fff; color: var(--rei-preto); border-radius: 18px; padding: 10px 10px 10px 18px; display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 15px; box-shadow: 0 16px 40px rgba(0,0,0,.55); z-index: 50; animation: est-chega .2s ease-out; }
.est-snack span { flex: 1; }
.est-snack button { border: 0; background: var(--rei-preto); color: var(--rei-amarelo); font: 900 14px/1 var(--font); text-transform: uppercase; padding: 14px 14px; border-radius: 12px; }
.est-off { position: fixed; top: calc(70px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background: var(--rei-brasa); color: #fff; font-weight: 800; font-size: 13px; padding: 8px 14px; border-radius: 999px; z-index: 30; }
/* linha que se marca com o dedo (espetinho na chapa, item na cozinha) */
.marca-lista { list-style: none; margin: 0; padding: 2px 6px 4px; }
.marca-it { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 8px; border-radius: 16px; cursor: pointer; }
.marca-it:active { background: #262626; }
.marca-it .box { width: 52px; height: 52px; border-radius: 15px; border: 3px solid #4a4a4a; display: grid; place-items: center; transition: background .12s, border-color .12s; }
.marca-it .box svg { width: 32px; height: 32px; opacity: 0; stroke: #fff; stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.marca-it.feito .box { background: var(--rei-ok); border-color: var(--rei-ok); }
.marca-it.feito .box svg { opacity: 1; }
.marca-it .nm { font: 900 25px/1.05 var(--font); text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: anywhere; }
.marca-it .nm .q { color: var(--rei-amarelo); margin-right: 6px; }
.marca-it.feito .nm, .marca-it.feito .nm .q { color: #6f6a60; text-decoration: line-through; text-decoration-thickness: 3px; }
.marca-it .sub { display: block; margin-top: 4px; font: 700 14px/1.3 var(--font); color: #bdb5a6; text-transform: none; text-decoration: none; letter-spacing: 0; }
.marca-it .tag { display: inline-block; margin-top: 6px; font: 800 11px/1 var(--font); background: #333; color: #e8e0cf; padding: 6px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: .06em; }
.marca-it .obs { display: block; margin-top: 6px; font: 800 15px/1.25 var(--font); color: var(--rei-preto); background: var(--rei-amarelo); padding: 6px 10px; border-radius: 10px; width: fit-content; text-transform: none; letter-spacing: 0; }
.marca-it.feito .obs { background: #3a3a3a; color: #8f887b; }