/* =========================================================
   NÓMOS — estilos
   Paleta: navy profundo + teal da logo + âmbar (único acento quente)
   Tipografia: Space Grotesk (títulos) + Inter (corpo)
   ========================================================= */

:root{
  --navy-900: #071527;
  --navy-800: #0B1F3A;
  --navy-700: #123655;
  --navy-600: #1B4A70;
  --teal-500: #14B8A6;
  --teal-400: #2DD4BF;
  --teal-300: #5EEAD4;
  --amber-500: #E2A73E;
  --paper: #F7FAF9;
  --paper-dim: #EDF3F1;
  --ink: #0B1F3A;
  --ink-soft: #46586E;

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;

  --wrap: 1180px;
  --radius-s: 10px;
  --radius-m: 18px;
  --shadow-card: 0 12px 30px -16px rgba(7, 21, 39, 0.35);
}

*, *::before, *::after{ box-sizing: border-box; }

/* garante que [hidden] sempre vença, mesmo quando a classe do elemento define display próprio */
[hidden]{ display: none !important; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-family: var(--font-display);
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

p{ margin: 0 0 1em; color: var(--ink-soft); }
ul, ol{ padding: 0; margin: 0; list-style: none; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal-500);
  color: var(--navy-900);
  padding: 12px 18px;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

:focus-visible{
  outline: 3px solid var(--teal-400);
  outline-offset: 2px;
}

.eyebrow{
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--teal-300);
  margin: 0 0 0.9em;
}
.eyebrow-dark{ color: var(--teal-500); }

/* ---------- botões ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-lg{ padding: 15px 30px; font-size: 1.02rem; }

.btn-primary{
  background: var(--amber-500);
  color: var(--navy-900);
}
.btn-primary:hover{ filter: brightness(0.97); }

.btn-outline{
  border-color: rgba(247, 250, 249, 0.55);
  color: var(--paper);
}
.btn-outline:hover{ border-color: var(--paper); background: rgba(247,250,249,0.08); }

.btn-ghost{
  color: var(--navy-800);
  padding-left: 10px;
  padding-right: 10px;
}
.btn-ghost:hover{ color: var(--teal-500); }

/* ---------- header ---------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(11, 31, 58, 0);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled{
  background: rgba(11, 31, 58, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -16px rgba(0,0,0,0.5);
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.brand{ display: flex; align-items: center; gap: 10px; }
.brand-mark{ width: 40px; height: 40px; object-fit: contain; }
.brand-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--paper);
  letter-spacing: 0.01em;
}

.main-nav{ display: flex; gap: 30px; }
.main-nav a{
  color: rgba(247,250,249,0.85);
  font-size: 0.95rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.main-nav a:hover{ color: var(--teal-300); border-color: var(--teal-300); }

.header-actions{ display: flex; align-items: center; gap: 10px; }
.header-actions .btn-ghost{ color: var(--paper); }
.header-actions .btn-ghost:hover{ color: var(--teal-300); }

.nav-toggle{
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span{
  width: 22px; height: 2px;
  background: var(--paper);
  display: block;
}

/* ---------- hero ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  isolation: isolate;
}

.hero-bg{ position: absolute; inset: 0; z-index: 0; }

.hero-layer.circuit{
  position: absolute; inset: -10% -10%;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(94, 234, 212, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 234, 212, 0.16) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 30% 30%, black, transparent 75%);
}

.hero-layer.glow{
  position: absolute;
  width: 55vw; height: 55vw;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
}
.glow-a{ background: var(--teal-500); top: -12%; right: -10%; }
.glow-b{ background: var(--amber-500); bottom: -20%; left: -10%; opacity: 0.16; }

.floater{
  position: absolute;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.35));
  will-change: transform;
}
.floater-pizza{ width: 190px; top: 16%; left: 6%; }
.floater-tomato{ width: 110px; top: 66%; left: 12%; }
.floater-meatballs{ width: 130px; top: 20%; right: 8%; }
.floater-robot{ width: 190px; bottom: 6%; right: 6%; }

.hero-inner{
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding-top: 90px;
}

.hero-title{
  font-size: clamp(2.3rem, 5vw, 3.4rem);
  color: var(--paper);
}
.hero-sub{
  color: rgba(247, 250, 249, 0.78);
  font-size: 1.08rem;
  max-width: 46ch;
}
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.6em; }

.hero-dish{
  position: absolute;
  z-index: 1;
  width: min(34vw, 460px);
  right: 2%;
  bottom: -6%;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.45));
  will-change: transform;
}

.scroll-cue{
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid rgba(247,250,249,0.5);
  border-radius: 20px;
  z-index: 2;
}
.scroll-cue span{
  position: absolute;
  top: 6px; left: 50%;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--teal-300);
  animation: scrollDown 1.8s ease infinite;
}
@keyframes scrollDown{
  0%{ transform: translateY(0); opacity: 1; }
  70%{ transform: translateY(14px); opacity: 0; }
  100%{ opacity: 0; }
}

/* ---------- seções genéricas ---------- */
.section{ padding: 110px 0; }
.section-head{ max-width: 620px; margin-bottom: 50px; }
.section-head h2{ font-size: clamp(1.8rem, 3.4vw, 2.4rem); color: var(--navy-800); }
.section-lede{ font-size: 1.05rem; }
.section-head-light h2{ color: var(--paper); }
.section-head-light .section-lede{ color: rgba(247,250,249,0.75); }

/* ---------- conceito ---------- */
.conceito{ background: var(--paper); }
.conceito-grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.conceito-media{
  background: radial-gradient(circle at 50% 40%, var(--paper-dim), transparent 70%);
  border-radius: var(--radius-m);
  padding: 30px;
}
.conceito-text h2{ color: var(--navy-800); font-size: clamp(1.7rem, 3vw, 2.2rem); }
.conceito-list{ margin-top: 1.4em; display: flex; flex-direction: column; gap: 18px; }
.conceito-list li{
  padding-left: 22px;
  border-left: 2px solid var(--teal-400);
  color: var(--ink-soft);
}
.conceito-list strong{ color: var(--navy-800); display: block; font-family: var(--font-display); font-weight: 600; margin-bottom: 2px; }

/* ---------- cardápio ---------- */
.cardapio{ background: var(--paper-dim); }

.menu-tabs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.tab{
  font-family: var(--font-display);
  background: var(--paper);
  border: 1px solid rgba(11,31,58,0.12);
  color: var(--ink-soft);
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.92rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tab:hover{ border-color: var(--teal-500); color: var(--navy-800); }
.tab.is-active{
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--paper);
}

.menu-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.dish-card{
  background: var(--paper);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dish-card img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: radial-gradient(circle at 50% 40%, var(--paper-dim), var(--paper) 75%);
  padding: 18px;
}
.dish-body{
  padding: 18px 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dish-title-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.dish-title-row h3{
  font-size: 1.08rem;
  color: var(--navy-800);
  margin: 0;
}
.dish-price{
  font-family: var(--font-display);
  color: var(--teal-500);
  font-weight: 600;
  white-space: nowrap;
}
.dish-body p{ font-size: 0.92rem; margin: 0 0 16px; }

.dish-card[hidden]{ display: none; }

.menu-status{
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
  padding: 40px 20px;
}
.menu-status--error{
  color: #B3261E;
  background: rgba(179, 38, 30, 0.08);
  border: 1px solid rgba(179, 38, 30, 0.25);
  border-radius: var(--radius-s);
}

/* ---------- como funciona ---------- */
.como-funciona{
  position: relative;
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  overflow: hidden;
}
.circuit-dark{
  position: absolute; inset: -10%;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(94, 234, 212, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 234, 212, 0.18) 1px, transparent 1px);
  background-size: 58px 58px;
}

.flow{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  counter-reset: step;
}
.flow-step{
  background: rgba(247, 250, 249, 0.04);
  border: 1px solid rgba(247, 250, 249, 0.12);
  border-radius: var(--radius-m);
  padding: 26px 22px;
}
.flow-index{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--teal-500);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 16px;
}
.flow-step h3{ color: var(--paper); font-size: 1.08rem; }
.flow-step p{ color: rgba(247,250,249,0.7); font-size: 0.94rem; margin: 0; }

.flow-cta{
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 56px;
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.25);
  border-radius: var(--radius-m);
  padding: 26px 30px;
}
.flow-robot{ width: 78px; flex-shrink: 0; }
.flow-cta h3{ color: var(--paper); margin-bottom: 4px; font-size: 1.1rem; }
.flow-cta p{ color: rgba(247,250,249,0.72); margin: 0; font-size: 0.95rem; }
.flow-cta-link{ margin-top: 16px; }

/* ---------- contato ---------- */
.contato{ background: var(--paper); }
.contato-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.contato h2{ color: var(--navy-800); font-size: clamp(1.7rem, 3vw, 2.2rem); }
.contato-info{
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 24px;
  margin: 1.6em 0;
}
.contato-info dt{
  font-family: var(--font-display);
  color: var(--teal-500);
  font-size: 0.82rem;
  margin-bottom: 4px;
}
.contato-info dd{ margin: 0; color: var(--navy-800); font-weight: 500; }

.contato-map{
  height: 320px;
  border-radius: var(--radius-m);
  background:
    radial-gradient(circle at 30% 30%, rgba(20,184,166,0.18), transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--navy-700));
  position: relative;
}
.contato-map::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius-m);
  background-image:
    linear-gradient(rgba(94, 234, 212, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 234, 212, 0.18) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 75%);
}

/* ---------- footer ---------- */
.site-footer{ background: var(--navy-900); padding: 34px 0; }
.footer-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-inner .brand-name{ font-size: 1.05rem; }
.footer-inner p{ color: rgba(247,250,249,0.55); font-size: 0.85rem; margin: 0; }

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 980px){
  .conceito-grid,
  .contato-grid{ grid-template-columns: 1fr; }
  .conceito-media{ order: -1; max-width: 420px; margin: 0 auto; }
  .flow{ grid-template-columns: repeat(2, 1fr); }
  .hero-dish{ width: min(50vw, 340px); }
}

/* =========================================================
   Página de pedido (pedido.html)
   ========================================================= */

/* deixa os cards do cardápio da home clicáveis, sem tirar o estilo existente */
a.dish-card{ cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; }
a.dish-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 34px -16px rgba(7,21,39,0.4); }

/* ---------------------------------------------------------
   Grafite + prata (em vez de navy/teal/âmbar) — só nesta
   página, via CSS custom properties. Como todo o resto do
   arquivo já lê var(--navy-900), var(--teal-500) etc., redefinir
   os TOKENS aqui dentro de .order-page recolore automaticamente
   cabeçalho, botões, cards e formulário desta página, sem duplicar
   nenhuma regra — e sem afetar admin/caixa/cozinha, que continuam
   com os valores originais até serem migrados também.
   O verde (--teal-500 aqui) fica reservado só pro sinal "ao vivo"
   (a bolinha pulsante, etapas concluídas, "pago") — é a ÚNICA cor
   fora da escala grafite/prata na página inteira, de propósito.
   --------------------------------------------------------- */
.order-page{
  --navy-900: #11151b;
  --navy-800: #1c2128;
  --navy-700: #2a3038;
  --navy-600: #454d57;
  --teal-500: #16a34a;
  --teal-400: #6b7684;
  --teal-300: #c7cfd6;
  --amber-500: #eef1f4;
  --paper: #fbfcfd;
  --paper-dim: #e9edf1;
  --ink: #1c2128;
  --ink-soft: #5b6470;
  --live-500: #22c55e;
  --live-glow: rgba(34,197,94,.55);

  position: relative;
  background: var(--paper-dim);
  isolation: isolate;
}
/* material atrás do vidro — sem isso, o desfoque do .glass não tem o que
   desfocar (uma cor chapada borrada continua sendo a mesma cor chapada).
   Precisa ser BEM mais forte que um fundo "quase liso": três clarões
   grandes e saturados, fixos (não rolam com a página, então o vidro
   sempre tem algo por trás pra refratar), mais um retículo de circuito
   — a mesma ideia do site institucional, só que numa página clara. */
.order-page::before{
  content:"";
  position: fixed; inset: -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 4% 2%, rgba(28,33,40,.5), transparent 58%),
    radial-gradient(42vw 42vw at 98% 10%, rgba(22,163,74,.42), transparent 55%),
    radial-gradient(48vw 48vw at 52% 104%, rgba(69,77,87,.5), transparent 58%),
    radial-gradient(26vw 26vw at 74% 46%, rgba(28,33,40,.3), transparent 58%),
    radial-gradient(22vw 22vw at 16% 62%, rgba(22,163,74,.22), transparent 55%);
}
/* Retículo de pontos (não linhas cruzadas — fica mais refinado, tipo
   Notion/Linear) com alguns "nós" verdes acesos espalhados, ecoando o
   circuito do próprio emblema da Nómos. Dá contraste suficiente pro
   vidro refratar de verdade, sem parecer papel milimetrado. */
.order-page::after{
  content:"";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(7px 7px at 34px 30px, rgba(34,197,94,.28) 0, transparent 70%),
    radial-gradient(3.4px 3.4px at 34px 30px, rgba(34,197,94,.95) 0, transparent 3.4px),
    radial-gradient(7px 7px at 210px 130px, rgba(34,197,94,.25) 0, transparent 70%),
    radial-gradient(3.4px 3.4px at 210px 130px, rgba(34,197,94,.9) 0, transparent 3.4px),
    radial-gradient(7px 7px at 440px 60px, rgba(34,197,94,.22) 0, transparent 70%),
    radial-gradient(3.4px 3.4px at 440px 60px, rgba(34,197,94,.85) 0, transparent 3.4px),
    radial-gradient(7px 7px at 130px 260px, rgba(34,197,94,.25) 0, transparent 70%),
    radial-gradient(3.4px 3.4px at 130px 260px, rgba(34,197,94,.9) 0, transparent 3.4px),
    radial-gradient(7px 7px at 520px 300px, rgba(34,197,94,.22) 0, transparent 70%),
    radial-gradient(3.4px 3.4px at 520px 300px, rgba(34,197,94,.85) 0, transparent 3.4px),
    radial-gradient(rgba(28,33,40,.55) 1.3px, transparent 1.3px);
  background-size: 600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 26px 26px;
}

/* cabeçalho: vidro de verdade, com o brilho que escorre */
.order-page .site-header.is-scrolled{
  background: rgba(28,33,40,.62);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08), 0 20px 40px -24px rgba(7,21,39,.5);
}

/* pílulas (aba ativa, badge da mesa, tag "no carrinho") herdam o mesmo
   verde reservado ao "ao vivo" — nada de âmbar/teal antigo aqui */
.order-page .order-tabs{
  background: linear-gradient(135deg, rgba(255,255,255,.68) 0%, rgba(255,255,255,.32) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 20px 40px -22px rgba(17,21,27,.3);
}
.order-page .order-tabs button.is-active{ background: var(--navy-800); }
.order-page .tab.is-active{ background: var(--navy-800); border-color: var(--navy-800); }

/* .mesa-badge, .radio-pagamento (marcado) e .confirmacao-mesa usam um
   teal escrito direto em rgba() no resto do arquivo (não var(--teal-500)) —
   por isso o token swap acima não alcança eles sozinho; corrigidos aqui. */
.order-page .mesa-badge{
  background: rgba(255,255,255,.14);
  color: var(--paper);
  border-color: rgba(255,255,255,.28);
}
.order-page .radio-pagamento:has(input:checked){
  border-color: var(--navy-700); background: rgba(28,33,40,.05);
}
.order-page .confirmacao-mesa{ background: rgba(28,33,40,.08); color: var(--navy-700); }

/* preço e subtotal são informação neutra, não um sinal de "sucesso" —
   ficam no grafite do texto, não no verde reservado ao "ao vivo" */
.order-page .dish-price,
.order-page .order-row-subtotal{ color: var(--navy-800); }

/* botões primários viram vidro claro — o mesmo "btn-glass" do site
   institucional, em vez do preenchido sólido em âmbar */
.order-page .btn-primary{
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(233,237,241,.85) 55%, rgba(255,255,255,.95) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid #fff;
  color: var(--navy-800);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(28,33,40,.08), 0 16px 32px -16px rgba(28,33,40,.45);
}
.order-page .btn-primary::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120px 40px at 26% 0%, rgba(255,255,255,.95), transparent 70%);
}
.order-page .btn-primary:hover{
  background: linear-gradient(180deg, #fff 0%, rgba(240,242,245,.9) 55%, #fff 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 4px rgba(91,100,112,.18), 0 22px 44px -16px rgba(28,33,40,.5);
}

/* cards que ganham o vidro de verdade: cardápio, resumo do pedido,
   formulário e a tela de confirmação */
.order-page .dish-card,
.order-page .order-form,
.order-page .confirmacao-card,
.order-page .order-row,
.order-page .order-empty{
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.22) 45%, rgba(255,255,255,.46) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  backdrop-filter: blur(30px) saturate(165%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,255,255,.4),
    inset 1px 0 0 rgba(255,255,255,.6),
    inset -1px 0 0 rgba(255,255,255,.3),
    0 30px 60px -26px rgba(17,21,27,.45),
    0 3px 10px rgba(17,21,27,.08);
}
.order-page .dish-card::before,
.order-page .order-form::before,
.order-page .confirmacao-card::before{
  content:""; position: absolute; inset: -35%; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.85) 20%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.4) 80%);
  animation: sheen-order 16s ease-in-out infinite alternate;
  opacity: .9;
}
@keyframes sheen-order{ from{ transform: translate3d(-10%,-10%,0); } to{ transform: translate3d(10%,10%,0); } }
.order-page .dish-card img{ background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.5), transparent 75%); }

/* ---------- avisos de status: neutro por padrão, verde só quando é
   confirmação de verdade (pagamento confirmado) — "conta solicitada"
   e "pedido cancelado" usam a MESMA classe base, e cancelamento não
   deveria parecer uma coisa boa só por herdar a cor de destaque */
.order-page .conta-aviso{ color: var(--navy-700); }
.order-page .conta-aviso--sucesso{
  color: var(--navy-800);
  background: linear-gradient(135deg, rgba(34,197,94,.16) 0%, rgba(255,255,255,.5) 100%);
  border: 1px solid rgba(34,197,94,.3);
}
.admin-page .mesa-badge{
  background: rgba(255,255,255,.14);
  color: var(--paper);
  border-color: rgba(255,255,255,.28);
}
.order-page .comanda-aviso,
.admin-page .comanda-aviso{
  background: rgba(28,33,40,.06); border-color: rgba(28,33,40,.18); color: var(--navy-700);
}

/* ---------- peças específicas do garçom: form de mesa, cards de mesas
   abertas e o painel de ações — mesmo vidro dos outros cards ---------- */
.order-page .admin-mesas-form,
.order-page .garcom-itens-existentes,
.order-page .garcom-acoes-mesa,
.order-page .caixa-card,
.admin-page .caixa-card{
  background: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.24) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 24px 50px -24px rgba(17,21,27,.35);
}
/* status da mesa (recebido/preparando/pronto...) é informação, não uma
   confirmação — fica neutro; só "já pago" continua marcado (mais escuro) */
.order-page .caixa-card-status,
.admin-page .caixa-card-status{ background: rgba(28,33,40,.08); color: var(--navy-700); }
.order-page .caixa-card-pago-badge,
.admin-page .caixa-card-pago-badge{ background: rgba(34,197,94,.9); color: #06210f; }

/* escolha de forma de pagamento e box do Pix — vidro igual aos cards.
   O QR Code em si (pagamento-pix-qr) fica de propósito FORA do vidro:
   translucência prejudicaria a leitura do código pela câmera. */
.order-page .pagamento-escolha,
.order-page .pagamento-pix,
.order-page .chat-caixa{
  background: linear-gradient(135deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.24) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 40px -22px rgba(17,21,27,.3);
}
.order-page .pagamento-pix-qr{ background: #fff; }

/* código de confirmação de entrega — já era escuro no design original,
   vira "vidro escuro" (mesma ideia do cabeçalho) em vez de opaco */
.order-page .delivery-codigo-box{
  background: linear-gradient(160deg, rgba(28,33,40,.92) 0%, rgba(42,48,56,.86) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,.12);
}
.live-badge{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  font-family: var(--font-display); font-size: .82rem; font-weight: 500;
  color: var(--ink-soft);
  background: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.35) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px -16px rgba(28,33,40,.3);
}
.section-head .live-badge{ margin-bottom: 16px; }
.live-badge i{
  width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block;
  background: var(--live-500, #22c55e);
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 10px var(--live-glow, rgba(34,197,94,.55)), 0 0 0 0 var(--live-glow, rgba(34,197,94,.55));
  animation: live-blink 1.6s ease-in-out infinite;
}
@keyframes live-blink{
  0%,100%{ opacity: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 12px var(--live-glow, rgba(34,197,94,.6)), 0 0 0 0 var(--live-glow, rgba(34,197,94,.55)); }
  50%{ opacity: .35; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 4px rgba(34,197,94,.35), 0 0 0 8px rgba(34,197,94,0); }
}

/* ---------- marca do cliente no cabeçalho (nome da empresa dona do site) ---------- */
.brand-client{ display: flex; align-items: center; gap: 10px; }
.brand-client .brand-mark{
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: rgba(255,255,255,.12); padding: 4px;
}
.brand-client-fallback{
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.85); font-family: var(--font-display); font-weight: 600; font-size: .85rem;
}
.brand-client-name{
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  color: var(--paper); letter-spacing: .01em;
}

/* ---------- rodapé "desenvolvido pela Nómos Analytics" ---------- */
.dev-credit{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px 0 28px;
  font-size: .78rem; color: var(--ink-soft);
}
.dev-credit img{ width: 16px; height: 16px; object-fit: contain; opacity: .8; }
.dev-credit span{ font-family: var(--font-display); font-weight: 500; letter-spacing: .01em; }
.dev-credit.on-dark{ color: rgba(255,255,255,.55); }
.dev-credit.on-dark img{ opacity: .7; }

.order-header{ position: sticky; }
.mesa-badge{
  font-family: var(--font-display);
  background: rgba(94, 234, 212, 0.14);
  color: var(--teal-300);
  border: 1px solid rgba(94, 234, 212, 0.3);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
}

.order-main{ padding: 100px 0 80px; }

.order-tabs{
  display: flex;
  gap: 6px;
  background: var(--paper);
  border-radius: 999px;
  padding: 6px;
  width: fit-content;
  margin: 0 auto 44px;
  box-shadow: var(--shadow-card);
}
.order-tabs button{
  font-family: var(--font-display);
  border: none;
  background: transparent;
  color: var(--ink-soft);
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}
.order-tabs button.is-active{ background: var(--navy-800); color: var(--paper); }

.cart-badge{
  background: var(--amber-500);
  color: var(--navy-900);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* cards do cardápio de pedido (com stepper) */
.dish-card--order .dish-body{ padding-bottom: 18px; }
.dish-card--order .dish-body p{ flex: 1; }
.dish-card--order.is-selected{ outline: 2px solid var(--teal-400); }

.stepper{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.stepper-btn{
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(11,31,58,0.18);
  background: var(--paper);
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--navy-800);
}
.stepper-btn:hover{ border-color: var(--teal-500); color: var(--teal-500); }
.stepper-qty{
  font-family: var(--font-display);
  font-weight: 600;
  min-width: 1.4em;
  text-align: center;
}
.stepper--sm .stepper-btn{ width: 28px; height: 28px; font-size: 0.95rem; }

.add-to-cart-btn{ margin-top: 14px; }

.in-cart-tag{
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--teal-500);
  margin-left: auto;
}

/* aba "meu pedido" */
.order-empty{
  text-align: center;
  color: var(--ink-soft);
  background: var(--paper);
  border-radius: var(--radius-m);
  padding: 40px 20px;
}

.order-panel{ max-width: 640px; margin: 0 auto; }

.order-list{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.order-row{
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  border-radius: var(--radius-s);
  padding: 12px 16px;
  box-shadow: var(--shadow-card);
}
.order-row img{
  width: 56px; height: 56px;
  object-fit: contain;
  background: var(--paper-dim);
  border-radius: 10px;
  padding: 6px;
}
.order-row-info{ display: flex; flex-direction: column; }
.order-row-info strong{ font-family: var(--font-display); color: var(--navy-800); font-size: 0.95rem; }
.order-row-info span{ font-size: 0.8rem; color: var(--ink-soft); }
.order-row-subtotal{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--teal-500);
  white-space: nowrap;
}

.order-form{
  background: var(--paper);
  border-radius: var(--radius-m);
  padding: 26px;
  box-shadow: var(--shadow-card);
}
.order-total-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--navy-800);
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(11,31,58,0.1);
}
.field-row{ margin-bottom: 16px; }
.field-row label{
  display: block;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--navy-800);
  margin-bottom: 6px;
}
.field-row input,
.field-row textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(11,31,58,0.18);
  font-family: var(--font-body);
  font-size: 0.98rem;
  resize: vertical;
}
.field-hint{ font-size: 0.8rem; color: var(--ink-soft); margin: 6px 0 0; }

/* ---------- delivery: campos em grupo, forma de pagamento por rádio, trilha ---------- */
.field-row-grupo{ display: flex; gap: 12px; }
.field-row-grupo .field-row{ margin-bottom: 16px; }
.field-row--grande{ flex: 3; }
.field-row--pequena{ flex: 1; min-width: 90px; }
.field-row-label-solta{
  display: block;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--navy-800);
  margin-bottom: 8px;
}
.order-total-row--final{ font-weight: 700; font-size: 1.05rem; border-top: 1px dashed rgba(11,31,58,0.15); padding-top: 8px; margin-top: 4px; }

.pagamento-escolha-botoes--form{ display: flex; gap: 10px; flex-wrap: wrap; }
.radio-pagamento{
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(11,31,58,0.18);
  border-radius: var(--radius-s);
  cursor: pointer;
  font-size: 0.92rem;
}
.radio-pagamento:has(input:checked){ border-color: var(--teal-500); background: rgba(20,184,166,0.08); }
.radio-pagamento input{ accent-color: var(--teal-500); }

.delivery-trilha{
  display: flex;
  justify-content: space-between;
  margin: 24px 0;
  position: relative;
}
.delivery-trilha::before{
  content: "";
  position: absolute;
  top: 7px; left: 20px; right: 20px;
  height: 2px;
  background: rgba(11,31,58,0.12);
  z-index: 0;
}
.delivery-etapa{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: var(--ink-soft);
  text-align: center;
  flex: 1;
  position: relative;
  z-index: 1;
}
.delivery-etapa-ponto{
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid rgba(11,31,58,0.2);
}
.delivery-etapa.is-concluida .delivery-etapa-ponto{ background: var(--teal-500); border-color: var(--teal-500); }
.delivery-etapa.is-ativa .delivery-etapa-ponto{ background: var(--paper); border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(20,184,166,0.2); }
.delivery-etapa.is-ativa{ color: var(--navy-800); font-weight: 600; }
.delivery-etapa.is-concluida{ color: var(--navy-800); }

.delivery-codigo-box{
  text-align: center;
  background: var(--navy-900);
  color: var(--paper);
  border-radius: var(--radius-m);
  padding: 18px;
  margin: 0 0 20px;
}
.delivery-codigo-label{ font-size: 0.78rem; color: rgba(255,255,255,0.7); margin: 0 0 4px; }
.delivery-codigo-numero{
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--teal-300);
  margin: 0;
}
.delivery-codigo-hint{ font-size: 0.76rem; color: rgba(255,255,255,0.6); margin: 4px 0 0; }

.comanda-aviso{
  background: rgba(226, 167, 62, 0.12);
  border: 1px solid rgba(226, 167, 62, 0.3);
  color: #8A6116;
  border-radius: var(--radius-s);
  padding: 10px 14px;
  font-size: 0.85rem;
  margin-bottom: 18px;
}
.confirmacao-subtitulo{
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: -8px 0 12px;
}
.confirmacao-mesa{
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  background: rgba(20,184,166,0.12);
  color: var(--teal-500);
  padding: 3px 12px;
  border-radius: 999px;
  margin: -6px 0 14px;
}
.btn-block{ width: 100%; margin-top: 6px; }
.form-error{
  color: #B3261E;
  background: rgba(179, 38, 30, 0.08);
  border: 1px solid rgba(179, 38, 30, 0.25);
  border-radius: var(--radius-s);
  padding: 10px 14px;
  font-size: 0.85rem;
  margin-top: 14px;
  text-align: center;
}

/* confirmação */
.view-confirmacao{ display: flex; justify-content: center; }
.confirmacao-card{
  background: var(--paper);
  border-radius: var(--radius-m);
  padding: 40px 34px;
  max-width: 520px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.confirmacao-card h2{ color: var(--navy-800); font-size: 1.5rem; }
.confirmacao-itens{
  text-align: left;
  margin: 20px 0;
  padding: 16px 18px;
  background: var(--paper-dim);
  border-radius: var(--radius-s);
  color: var(--navy-800);
  font-size: 0.94rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.confirmacao-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}
.btn-outline-dark{
  border: 1px solid rgba(11,31,58,0.25);
  color: var(--navy-800);
}
.btn-outline-dark:hover{ border-color: var(--teal-500); color: var(--teal-500); }
.btn-danger-fill{
  background: #B3261E;
  color: var(--paper);
  border: none;
}
.btn-danger-fill:hover{ background: #93201a; }
.confirmacao-status-hint{
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 14px;
}
.conta-aviso{
  margin-top: 18px;
  color: var(--teal-500);
  font-weight: 500;
  font-size: 0.92rem;
}
.conta-aviso--sucesso{
  font-size: 1.05rem;
  background: rgba(20,184,166,0.1);
  border-radius: var(--radius-s);
  padding: 14px;
}

/* ---------- escolha de pagamento / Pix ---------- */
.pagamento-escolha{
  margin-top: 18px;
  padding: 18px;
  background: var(--paper-dim);
  border-radius: var(--radius-m);
  text-align: center;
}
.pagamento-escolha p{ margin: 0 0 12px; color: var(--navy-800); font-family: var(--font-display); }
.pagamento-escolha-botoes{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.pagamento-pix{
  margin-top: 18px;
  padding: 22px;
  background: var(--paper-dim);
  border-radius: var(--radius-m);
  text-align: center;
}
.pagamento-pix-hint{ margin: 0 0 14px; color: var(--navy-800); }
.pagamento-pix-qr{
  width: 200px;
  height: 200px;
  margin: 0 auto 14px;
  border-radius: var(--radius-s);
  background: var(--paper);
  padding: 8px;
}
.pagamento-pix .confirmacao-status-hint{ margin-top: 14px; }

/* =========================================================
   Monitor da cozinha (cozinha.html)
   ========================================================= */
.kitchen-page{
  --navy-900: #0b0e13;
  --navy-800: #151a21;
  --navy-700: #1f252e;
  --navy-600: #333b46;
  --teal-500: #cfd5dc;
  --teal-400: #aab3bf;
  --teal-300: #e5e9ed;
  --amber-500: #cfd5dc;
  --paper: #f7f9fb;
  --live-500: #22c55e;
  --danger-500: #ef5350;

  background: var(--navy-900);
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}
/* fundo discreito — só dois clarões suaves, sem retículo. Isso é uma TV
   de cozinha lida de longe e rápido; o vidro precisa de ALGO atrás pra
   refratar, mas nada que compita com a leitura do status dos pedidos. */
.kitchen-page::before{
  content:"";
  position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46vw 46vw at 90% -10%, rgba(34,197,94,.10), transparent 60%),
    radial-gradient(50vw 50vw at 6% 108%, rgba(207,213,220,.06), transparent 60%);
}

.kitchen-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: rgba(21,26,33,.72);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.kitchen-header-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  color: var(--paper);
  font-size: 1.15rem;
}
.kitchen-header-right{
  display: flex;
  align-items: center;
  gap: 20px;
}
.kitchen-conn{
  font-size: 0.85rem;
  color: rgba(247,250,249,0.6);
}
.kitchen-clock{
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--teal-300);
  font-variant-numeric: tabular-nums;
}

.kitchen-offline-banner{
  margin: 0;
  padding: 12px 28px;
  background: rgba(239,83,80,.14);
  color: #ffb4ab;
  border-bottom: 1px solid rgba(239,83,80,.3);
  text-align: center;
  font-size: 0.92rem;
}
.kitchen-sound-hint{
  margin: 0;
  padding: 10px 28px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.75);
  border-bottom: 1px solid rgba(255,255,255,.12);
  text-align: center;
  font-size: 0.88rem;
}

.kitchen-board{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 24px;
  align-items: start;
}

.kitchen-column h2{
  font-family: var(--font-display);
  color: var(--paper);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255,255,255,.14);
}
.kitchen-count{
  background: rgba(255,255,255,.14);
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.kitchen-cards{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 60px;
}

.kitchen-card{
  background: linear-gradient(160deg, rgba(31,37,46,.82) 0%, rgba(21,26,33,.7) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-m);
  padding: 16px 18px;
  color: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 40px -22px rgba(0,0,0,.5);
}
.kitchen-card-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.kitchen-card-cliente{
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.kitchen-card-tempo{
  font-size: 0.8rem;
  color: var(--teal-300);
  white-space: nowrap;
}
.kitchen-card-tags{ margin-bottom: 4px; }
.kitchen-card-pago{
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #06210f;
  background: rgba(34,197,94,.9);
  padding: 2px 10px;
  border-radius: 999px;
}
.kitchen-card-delivery{
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--paper);
  background: rgba(255,255,255,.16);
  padding: 2px 10px;
  border-radius: 999px;
}
.kitchen-card-endereco{
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  margin: 2px 0 6px;
}
.kitchen-card-codigo{
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: rgba(247,250,249,0.55);
}
.kitchen-card-itens{
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  font-size: 0.94rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kitchen-card-obs{
  font-size: 0.85rem;
  color: var(--paper);
  background: rgba(255,255,255,.08);
  border-left: 3px solid rgba(255,255,255,.35);
  border-radius: 4px 8px 8px 4px;
  padding: 6px 10px;
  margin: 0 0 12px;
}
.kitchen-card-pix-pendente{
  font-size: 0.82rem;
  font-weight: 600;
  color: #ffb4ab;
  text-align: center;
  padding: 8px;
  border: 1px dashed rgba(239,83,80,.45);
  background: rgba(239,83,80,.08);
  border-radius: 8px;
  margin: 0;
}
.kitchen-card-btn{
  width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(225,229,237,.86) 100%);
  color: var(--navy-800);
  font-family: var(--font-display);
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.9);
  padding: 10px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, 0 10px 22px -12px rgba(0,0,0,.5);
}
.kitchen-card-btn:hover{ background: #fff; }
.kitchen-card-btn:disabled{ opacity: 0.6; cursor: default; }

/* Modo exibição — Smart TV sem toque: mostra status, sem nenhum botão de ação. */
body.modo-exibicao .kitchen-card-btn{ display: none; }

@media (max-width: 1100px){
  .kitchen-board{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .kitchen-board{ grid-template-columns: 1fr; padding: 16px; }
  .kitchen-header{ padding: 14px 16px; flex-wrap: wrap; gap: 10px; }
}

/* =========================================================
   Painel de administração (admin.html)
   ========================================================= */
.admin-page{
  --navy-900: #11151b;
  --navy-800: #1c2128;
  --navy-700: #2a3038;
  --navy-600: #454d57;
  --teal-500: #16a34a;
  --teal-400: #6b7684;
  --teal-300: #c7cfd6;
  --amber-500: #eef1f4;
  --paper: #fbfcfd;
  --paper-dim: #e9edf1;
  --ink: #1c2128;
  --ink-soft: #5b6470;
  --live-500: #22c55e;
  --live-glow: rgba(34,197,94,.55);

  background: var(--paper-dim);
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}
.admin-page::before{
  content:"";
  position: fixed; inset: -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 4% 2%, rgba(28,33,40,.5), transparent 58%),
    radial-gradient(42vw 42vw at 98% 10%, rgba(22,163,74,.42), transparent 55%),
    radial-gradient(48vw 48vw at 52% 104%, rgba(69,77,87,.5), transparent 58%),
    radial-gradient(26vw 26vw at 74% 46%, rgba(28,33,40,.3), transparent 58%),
    radial-gradient(22vw 22vw at 16% 62%, rgba(22,163,74,.22), transparent 55%);
}
.admin-page::after{
  content:"";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(7px 7px at 34px 30px, rgba(34,197,94,.28) 0, transparent 70%),
    radial-gradient(3.4px 3.4px at 34px 30px, rgba(34,197,94,.95) 0, transparent 3.4px),
    radial-gradient(7px 7px at 210px 130px, rgba(34,197,94,.25) 0, transparent 70%),
    radial-gradient(3.4px 3.4px at 210px 130px, rgba(34,197,94,.9) 0, transparent 3.4px),
    radial-gradient(7px 7px at 440px 60px, rgba(34,197,94,.22) 0, transparent 70%),
    radial-gradient(3.4px 3.4px at 440px 60px, rgba(34,197,94,.85) 0, transparent 3.4px),
    radial-gradient(7px 7px at 130px 260px, rgba(34,197,94,.25) 0, transparent 70%),
    radial-gradient(3.4px 3.4px at 130px 260px, rgba(34,197,94,.9) 0, transparent 3.4px),
    radial-gradient(7px 7px at 520px 300px, rgba(34,197,94,.22) 0, transparent 70%),
    radial-gradient(3.4px 3.4px at 520px 300px, rgba(34,197,94,.85) 0, transparent 3.4px),
    radial-gradient(rgba(28,33,40,.55) 1.3px, transparent 1.3px);
  background-size: 600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 600px 600px, 26px 26px;
}

.admin-login{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--navy-900), var(--navy-700));
  padding: 24px;
}
.admin-login-form{
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-m);
  padding: 40px 34px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 30px 60px -24px rgba(0,0,0,.5);
}
.admin-login-form h1{ font-size: 1.3rem; color: var(--paper); margin: 14px 0 6px; }
.admin-login-form p{ font-size: 0.9rem; margin-bottom: 20px; color: rgba(255,255,255,.65); }
.admin-login-form input{
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  margin-bottom: 14px;
}
.admin-login-form input::placeholder{ color: rgba(255,255,255,.45); }

.admin-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: rgba(28,33,40,.62);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08), 0 20px 40px -24px rgba(7,21,39,.5);
}

.admin-status-msg{
  background: rgba(28,33,40,.06);
  color: var(--navy-800);
  border: 1px solid rgba(28,33,40,.14);
}
.admin-status-msg--erro{
  background: rgba(179,38,30,0.08);
  border-color: rgba(179,38,30,0.25);
  color: #B3261E;
}
.admin-badge--ativo{ background: rgba(34,197,94,.14); color: #16a34a; }
.admin-badge--inativo{ background: rgba(28,33,40,.08); color: var(--ink-soft); }
.entrega-card-pago{ background: rgba(34,197,94,.9); color: #06210f; }

/* Caixa: resumo do topo, busca e comandas — vidro igual ao resto */
.caixa-busca,
.admin-link-card,
.admin-table-wrap,
.admin-modal,
.super-resumo-card,
.super-tabela-wrap,
.super-modal{
  background: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.24) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 24px 50px -24px rgba(17,21,27,.35);
}
.caixa-resumo{
  background: linear-gradient(160deg, rgba(28,33,40,.92) 0%, rgba(42,48,56,.86) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 40px -22px rgba(0,0,0,.4);
}
.caixa-resumo-num{ color: var(--paper); }
.admin-header-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.admin-header-actions{ display: flex; gap: 10px; }
.btn-ghost-dark{
  color: var(--paper);
  border: 1px solid rgba(247,250,249,0.3);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  background: transparent;
  cursor: pointer;
}
.btn-ghost-dark:hover{ border-color: var(--teal-400); color: var(--teal-300); }

.admin-main{ max-width: 1100px; margin: 0 auto; padding: 32px 24px 60px; }
.admin-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.admin-toolbar h2{ color: var(--navy-800); font-size: 1.4rem; margin: 0; }

/* Links da equipe (Cozinha/Garçom) */
.admin-links-intro{ color: var(--ink-soft); font-size: 0.92rem; max-width: 640px; margin-bottom: 22px; line-height: 1.5; }
.admin-link-card{
  background: var(--paper);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.admin-link-card h3{ font-size: 0.95rem; color: var(--navy-800); margin: 0 0 10px; }
.admin-modo-descricao{ font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; margin-bottom: 12px; }
.admin-modo-botoes{ display: flex; gap: 8px; flex-wrap: wrap; }
.admin-modo-botoes button.is-active{ background: var(--teal-500); color: var(--navy-900); border-color: var(--teal-500); }
.admin-taxa-servico-linha{ display: flex; align-items: center; gap: 8px; }
.admin-taxa-servico-linha input{
  width: 90px;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(11,31,58,0.18);
  font-size: 0.95rem;
}
.admin-link-linha{ display: flex; gap: 8px; }
.admin-link-linha input{
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(11,31,58,0.18);
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--paper-dim);
}

.admin-status-msg{
  background: rgba(94,234,212,0.15);
  color: var(--navy-800);
  border: 1px solid rgba(20,184,166,0.3);
  border-radius: var(--radius-s);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.admin-status-msg--erro{
  background: rgba(179,38,30,0.08);
  border-color: rgba(179,38,30,0.25);
  color: #B3261E;
}

.admin-table-wrap{
  background: var(--paper);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}
.admin-table{ width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin-table th{
  text-align: left;
  font-family: var(--font-display);
  color: var(--ink-soft);
  font-size: 0.8rem;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(11,31,58,0.08);
}
.admin-table td{
  padding: 12px 16px;
  border-bottom: 1px solid rgba(11,31,58,0.06);
  vertical-align: middle;
  color: var(--navy-800);
}
.admin-table tr.is-inativo{ opacity: 0.55; }
.admin-thumb{
  width: 42px; height: 42px;
  object-fit: contain;
  background: var(--paper-dim);
  border-radius: 8px;
  padding: 4px;
}
.admin-badge{
  font-size: 0.76rem;
  font-family: var(--font-display);
  padding: 3px 10px;
  border-radius: 999px;
}
.admin-badge--ativo{ background: rgba(20,184,166,0.15); color: var(--teal-500); }
.admin-badge--inativo{ background: rgba(11,31,58,0.08); color: var(--ink-soft); }

.admin-row-actions{ display: flex; gap: 6px; flex-wrap: wrap; }
.btn-sm{ padding: 6px 12px; font-size: 0.82rem; border-color: rgba(11,31,58,0.18); color: var(--navy-800); }
.btn-sm:hover{ border-color: var(--teal-500); color: var(--teal-500); }
.btn-danger:hover{ border-color: #B3261E; color: #B3261E; }

/* modal do formulário */
.admin-modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(7,21,39,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 300;
}
.admin-modal{
  background: var(--paper);
  border-radius: var(--radius-m);
  padding: 30px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.admin-modal h3{ color: var(--navy-800); margin-bottom: 18px; }
.admin-modal input[type="text"],
.admin-modal input[type="number"],
.admin-modal textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(11,31,58,0.18);
  font-family: var(--font-body);
  font-size: 0.95rem;
  resize: vertical;
}
.admin-checkbox-row{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--navy-800);
  margin: 4px 0 16px;
}
.admin-modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

/* abas do admin */
.admin-tabs{
  display: flex;
  gap: 6px;
  background: linear-gradient(135deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.3) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 999px;
  padding: 6px;
  width: fit-content;
  margin-bottom: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 20px 40px -22px rgba(17,21,27,.3);
}
.admin-tabs button{
  font-family: var(--font-display);
  border: none;
  background: transparent;
  color: var(--ink-soft);
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.92rem;
}
.admin-tabs button.is-active{ background: var(--navy-800); color: var(--paper); }

/* mesas e QR codes */
.admin-hint{ color: var(--ink-soft); font-size: 0.92rem; max-width: 640px; margin-bottom: 20px; }
.admin-hint--small{ font-size: 0.82rem; background: rgba(28,33,40,.06); border: 1px solid rgba(28,33,40,.16); padding: 10px 14px; border-radius: var(--radius-s); color: var(--ink-soft); }

.admin-mesas-form{
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--paper);
  padding: 20px;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
.admin-mesas-form .field-row{ margin-bottom: 0; }
.admin-mesas-form input{
  width: 100px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(11,31,58,0.18);
  font-family: var(--font-body);
}

.mesas-actions{ margin-bottom: 20px; }

.mesas-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}
.mesa-card{
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.32) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--radius-m);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 20px 40px -22px rgba(17,21,27,.3);
  padding: 18px;
  text-align: center;
}
.mesa-card-titulo{
  font-family: var(--font-display);
  color: var(--navy-800);
  font-size: 1rem;
  margin: 0 0 12px;
}
.mesa-card-qr{ width: 100%; max-width: 180px; height: auto; margin: 0 auto 10px; display: block; }
.mesa-card-link{ font-size: 0.72rem; color: var(--ink-soft); word-break: break-all; margin: 0; }

@media print{
  .site-header, .admin-header, .admin-tabs, .admin-hint, .admin-mesas-form,
  .mesas-actions, .admin-status-msg, .dev-credit { display: none !important; }
  .admin-page{ background: #fff; }
  .admin-page::before, .admin-page::after{ display: none !important; }
  .mesas-grid{ grid-template-columns: repeat(3, 1fr); }
  .mesa-card{
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none; border: 1px solid #ccc; break-inside: avoid;
  }
}

/* =========================================================
   Caixa (caixa.html)
   ========================================================= */
.caixa-resumo{
  display: flex;
  gap: 32px;
  background: var(--navy-800);
  color: var(--paper);
  border-radius: var(--radius-m);
  padding: 20px 26px;
  margin-bottom: 22px;
}
.caixa-resumo > div{ display: flex; flex-direction: column; }
.caixa-resumo-num{
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--teal-300);
}
.caixa-resumo span:last-child{ font-size: 0.82rem; color: rgba(247,250,249,0.7); }

.caixa-busca{
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(28,33,40,.18);
  font-family: var(--font-body);
  font-size: 0.9rem;
  width: 240px;
}

.caixa-vazio{ text-align: center; color: var(--ink-soft); padding: 50px 0; }

.caixa-lista{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.caixa-card{
  background: var(--paper);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}
.caixa-card-topo{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.caixa-card-badges{ display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.caixa-card-pago-badge{ background: var(--teal-300); color: var(--navy-900); }
.caixa-card-titulo{
  display: block;
  font-family: var(--font-display);
  color: var(--navy-800);
  font-size: 1.02rem;
}
.caixa-card-codigo{ display: block; font-size: 0.78rem; color: var(--ink-soft); }
.caixa-card-status{ background: rgba(20,184,166,0.12); color: var(--teal-500); white-space: nowrap; }
.caixa-card-itens{
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.caixa-card-rodape{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(11,31,58,0.08);
  flex-wrap: wrap;
}
.caixa-card-botoes{ display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.caixa-card-rodape-botoes{ display: flex; align-items: center; gap: 8px; }
.caixa-card-metodo{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(11,31,58,0.15);
  text-align: right;
}
.caixa-card-metodo span{ display: block; font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 8px; }
.caixa-card-metodo-botoes{ display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.entrega-codigo-form{ align-items: center; }
.entrega-codigo-input{
  width: 90px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  padding: 6px 8px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(11,31,58,0.25);
}
.caixa-card-total{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy-800);
  font-size: 1.05rem;
}

/* ---------- abas do Caixa (Comandas / Dashboard) ---------- */
.caixa-tabs{
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(11,31,58,0.1);
}
.caixa-tabs button{
  border: none;
  background: none;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink-soft);
  padding: 10px 4px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.caixa-tabs button.is-active{ color: var(--navy-800); border-bottom-color: var(--teal-500); font-weight: 600; }

/* ---------- dashboard ---------- */
.dash-periodo{ display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.dash-vazio{ color: var(--ink-soft); padding: 30px 0; text-align: center; }

.dash-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.dash-stat-card{
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.3) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--radius-m);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 20px 40px -22px rgba(17,21,27,.3);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-stat-valor{ font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--navy-800); }
.dash-stat-label{ font-size: 0.85rem; color: var(--ink-soft); }
.dash-stat-card--info{ background: rgba(28,33,40,.04); box-shadow: none; border: 1px dashed rgba(28,33,40,.18); backdrop-filter: none; -webkit-backdrop-filter: none; }
.dash-stat-card--info .dash-stat-valor{ color: var(--ink-soft); font-size: 1.4rem; }

.dash-secao{ margin-bottom: 28px; }
.dash-secao h3{ font-family: var(--font-display); font-size: 1rem; color: var(--navy-800); margin: 0 0 14px; }
.dash-secao-dupla{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
@media (max-width: 720px){ .dash-secao-dupla{ grid-template-columns: 1fr; } }

.dash-bar-row{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dash-bar-label{
  width: 120px;
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--navy-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-bar-track{ flex: 1; height: 18px; background: var(--paper-dim); border-radius: 999px; overflow: hidden; }
.dash-bar-fill{ height: 100%; background: linear-gradient(90deg, var(--teal-500), var(--teal-300)); border-radius: 999px; }
.dash-bar-valor{ width: 90px; flex-shrink: 0; text-align: right; font-size: 0.85rem; font-weight: 600; color: var(--navy-800); }

.dash-horas-chart{
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.dash-hora-col{ flex: 1; display: flex; flex-direction: column; align-items: center; }
.dash-hora-bar{ width: 100%; background: linear-gradient(180deg, var(--teal-300), var(--teal-500)); border-radius: 3px 3px 0 0; min-height: 2px; }
.dash-hora-label{ font-size: 0.55rem; color: var(--ink-soft); margin-top: 4px; }

/* ---------- interface do entregador ---------- */
.entrega-card-endereco{
  font-size: 0.88rem;
  color: var(--navy-800);
  margin: 4px 0 10px;
}
.entrega-card-referencia{ color: var(--ink-soft); font-size: 0.82rem; margin-top: -6px; }

/* =========================================================
   Atendimento do garçom (garcom.html)
   ========================================================= */
.garcom-subtitulo{
  font-family: var(--font-display);
  color: var(--navy-800);
  font-size: 1.05rem;
  margin: 30px 0 16px;
}
.garcom-mesa-card{ cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.garcom-mesa-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 34px -16px rgba(7,21,39,0.4); }
.garcom-mesa-card .caixa-card-rodape{ border-top: none; padding-top: 8px; }

.garcom-cabecalho-mesa{ margin-top: 20px; }

.garcom-itens-existentes{
  background: var(--paper-dim);
  border-radius: var(--radius-m);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.garcom-itens-existentes h3{
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--navy-800);
  margin: 0 0 10px;
}

.garcom-acoes-mesa{
  background: var(--paper);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  margin-bottom: 20px;
  text-align: center;
}
.garcom-acoes-mesa .confirmacao-actions{ margin-top: 4px; }

/* ---------- recibo de impressão ---------- */
.recibo{ display: none; }

@media (max-width: 560px){
  .order-row{ grid-template-columns: 44px 1fr; grid-template-areas: "img info" "img stepper" "img subtotal"; row-gap: 6px; }
  .order-row img{ grid-area: img; width: 44px; height: 44px; }
  .order-row-info{ grid-area: info; }
  .order-row .stepper{ grid-area: stepper; margin-top: 0; }
  .order-row-subtotal{ grid-area: subtotal; }
}

@media (max-width: 760px){
  .main-nav{
    position: absolute;
    top: 76px; left: 0; right: 0;
    flex-direction: column;
    background: rgba(11,31,58,0.97);
    padding: 20px 24px;
    gap: 18px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .main-nav.is-open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-toggle{ display: flex; }
  .header-actions .btn-ghost{ display: none; }
  .header-actions .btn-primary{ display: none; }

  .hero{ min-height: auto; padding: 130px 0 90px; }
  .hero-dish{ position: relative; width: 78%; margin: 40px auto 0; right: auto; bottom: auto; }
  .floater-robot, .floater-meatballs{ display: none; }

  .flow{ grid-template-columns: 1fr; }
  .flow-cta{ flex-direction: column; text-align: center; }

  .contato-info{ grid-template-columns: 1fr; gap: 14px; }
}

/* =========================================================
   Painel do Super Admin (super-admin.html)
   ========================================================= */
.super-resumo{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.super-resumo-card{
  background: var(--paper);
  border: 1px solid rgba(11,31,58,0.1);
  border-radius: var(--radius-m);
  padding: 16px;
  text-align: center;
}
.super-resumo-card strong{ display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--navy-900); }
.super-resumo-card span{ font-size: 0.78rem; color: var(--ink-soft); }
.super-resumo-card--ativa strong{ color: #147d5f; }
.super-resumo-card--trial strong{ color: #8A6116; }
.super-resumo-card--inadimplente strong{ color: #b3401f; }
.super-resumo-card--cancelada strong{ color: var(--ink-soft); }

.super-tabela-wrap{ overflow-x: auto; border: 1px solid rgba(11,31,58,0.1); border-radius: var(--radius-m); }
.super-tabela{ width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.super-tabela th{
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  padding: 12px 14px;
  border-bottom: 1px solid rgba(11,31,58,0.1);
  white-space: nowrap;
}
.super-tabela td{ padding: 12px 14px; border-bottom: 1px solid rgba(11,31,58,0.06); vertical-align: middle; }
.super-tabela tr:last-child td{ border-bottom: none; }
.super-tabela-nome{ font-weight: 600; color: var(--navy-900); }
.super-tabela-email{ font-size: 0.8rem; color: var(--ink-soft); display: block; }

.super-status-select{
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-family: var(--font-display);
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
}
.super-status-select[data-status="ativa"]{ background: rgba(20,125,95,0.12); color: #147d5f; }
.super-status-select[data-status="trial"]{ background: rgba(226,167,62,0.15); color: #8A6116; }
.super-status-select[data-status="inadimplente"]{ background: rgba(179,64,31,0.12); color: #b3401f; }
.super-status-select[data-status="cancelada"]{ background: rgba(11,31,58,0.08); color: var(--ink-soft); }

.super-modal-fundo{
  position: fixed; inset: 0;
  background: rgba(11,31,58,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 200;
}
.super-modal{
  background: var(--paper);
  border-radius: var(--radius-m);
  padding: 28px;
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.super-modal h3{ margin: 0 0 18px; font-family: var(--font-display); }
.super-modal-secao{
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin: 18px 0 10px;
  border-top: 1px dashed rgba(11,31,58,0.12);
  padding-top: 14px;
}
.super-modal-secao:first-of-type{ border-top: none; padding-top: 0; margin-top: 0; }
.super-modal-botoes{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

@media (max-width: 720px) {
  .super-resumo{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   Chat vinculado ao pedido (delivery.html, entregador.html, caixa.html)
   ========================================================= */
.chat-caixa{
  border: 1px solid rgba(11,31,58,0.12);
  border-radius: var(--radius-m);
  padding: 14px;
  margin: 16px 0;
}
.chat-titulo{
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.chat-mensagens{
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding-right: 4px;
}
.chat-mensagens:empty::after{
  content: "Nenhuma mensagem ainda.";
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
}
.chat-bolha{
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.35;
  word-wrap: break-word;
}
.chat-bolha-hora{ display: block; font-size: 0.68rem; opacity: 0.65; margin-top: 2px; }
.chat-bolha--minha{
  align-self: flex-end;
  background: var(--teal-500);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}
.chat-bolha--outra{
  align-self: flex-start;
  background: rgba(11,31,58,0.06);
  color: var(--navy-900);
  border-bottom-left-radius: 4px;
}
.chat-bolha-remetente{
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
  opacity: 0.75;
}
.chat-form{ display: flex; gap: 8px; }
.chat-form input{
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(11,31,58,0.18);
  font-size: 0.88rem;
}
.chat-toggle-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #b3401f;
  color: var(--paper);
  font-size: 0.68rem;
  font-weight: 700;
  margin-left: 6px;
}

/* =========================================================
   [23/09 g] Contas da equipe (admin.html › Usuários), link do delivery
   e responsivo do admin.html / super-admin.html.
   Bloco ADITIVO: só acrescenta regras no fim — nada acima foi editado.
   ========================================================= */

/* ---------- formulário do usuário (campos que o modal ainda não estilizava) ---------- */
.admin-modal input[type="email"],
.admin-modal input[type="password"],
.admin-modal select{
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(11,31,58,0.18);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--navy-800);
  background: #fff;
}
/* .field-row input{ width:100% } também pegaria o checkbox — aqui ele volta ao normal */
.admin-checkbox-row input[type="checkbox"]{ width: auto; padding: 0; margin: 0; flex: none; }
.admin-checkbox-row--compacto{ margin: 8px 0 0; font-size: 0.85rem; }
.admin-senha-linha{ display: flex; gap: 8px; align-items: stretch; }
.admin-senha-linha input{ flex: 1; min-width: 0; width: auto; }
.admin-senha-linha .btn{ white-space: nowrap; }
.admin-acesso-texto{
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(11,31,58,0.18);
  background: var(--paper-dim);
  color: var(--navy-800);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  resize: none;
  margin-bottom: 16px;
}

/* ---------- tabela de usuários ---------- */
.admin-td-email{ color: var(--ink-soft); word-break: break-all; }
.admin-voce-tag{
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-display); font-size: 0.7rem;
  background: rgba(28,33,40,.08); color: var(--ink-soft);
}
.admin-nota-fraca{ font-size: 0.8rem; color: var(--ink-soft); }
/* a célula de botões era um flex solto dentro da tabela e desalinhava o filete entre linhas */
.admin-table td.admin-row-actions{ display: table-cell; white-space: nowrap; }
.admin-table td.admin-row-actions > *{ margin: 2px 6px 2px 0; }
.admin-table td.admin-row-actions > *:last-child{ margin-right: 0; }
/* bloqueio de verdade (5 tentativas erradas) — o único vermelho aqui, de propósito */
.admin-badge--bloqueado{ background: rgba(179,38,30,.1); color: #B3261E; }

/* ---------- link do delivery ---------- */
.admin-link-linha .btn{ white-space: nowrap; align-self: center; }
.admin-link-linha a.btn[aria-disabled="true"]{ opacity: .45; pointer-events: none; }

.admin-delivery-bloco{ margin-bottom: 28px; }
/* o bloco do delivery não deve sair na impressão dos QR Codes das mesas */
@media print{ .admin-delivery-bloco{ display: none !important; } }

/* =========================================================
   Responsivo — admin.html e super-admin.html
   (limitação que já existia antes do redesenho)
   ========================================================= */
@media (max-width: 900px){
  .admin-header{ padding: 14px 18px; gap: 12px; flex-wrap: wrap; }
  .admin-header-brand{ min-width: 0; }
  #brandClientName{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
  /* super-admin: o .wrap interno herdava altura fixa e 24px de recuo laterais */
  .admin-header .header-inner{ height: auto; padding: 0; gap: 12px; flex-wrap: wrap; }
}

@media (max-width: 720px){
  .admin-main{ padding: 20px 14px 48px; }

  /* abas: uma linha só, rolando de lado (em vez de estourar a largura da tela) */
  .admin-tabs{
    width: 100%; max-width: 100%;
    overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .admin-tabs::-webkit-scrollbar{ display: none; }
  .admin-tabs button{ flex: none; white-space: nowrap; padding: 9px 16px; }

  .admin-toolbar{ flex-wrap: wrap; gap: 12px; }
  .admin-toolbar h2{ font-size: 1.2rem; }

  .admin-link-linha{ flex-wrap: wrap; }
  .admin-link-linha input{ flex: 1 1 100%; }

  .field-row-grupo{ flex-direction: column; gap: 0; }
  .admin-modal-backdrop, .super-modal-fundo{ padding: 14px; }
  .admin-modal, .super-modal{ padding: 22px 18px; }

  /* cartões de resumo do super-admin: 5 itens em 2 colunas — o 1º ocupa as duas */
  .super-resumo{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .super-resumo-card:first-child{ grid-column: 1 / -1; }

  /* ----- tabelas viram cartões (uma linha = um cartão, com o rótulo de cada campo) ----- */
  .admin-table-wrap:has(.admin-table--cartoes),
  .super-tabela-wrap:has(.super-tabela--cartoes){
    background: none; border: none; box-shadow: none; border-radius: 0; overflow: visible;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .admin-table--cartoes, .admin-table--cartoes tbody,
  .super-tabela--cartoes, .super-tabela--cartoes tbody{ display: block; }
  .admin-table--cartoes thead, .super-tabela--cartoes thead{ display: none; }
  .admin-table--cartoes tbody, .super-tabela--cartoes tbody{ display: flex; flex-direction: column; gap: 12px; }

  .admin-table--cartoes tr, .super-tabela--cartoes tr{
    display: block; padding: 8px 16px;
    background: linear-gradient(135deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.3) 100%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(255,255,255,.85);
    border-radius: var(--radius-m);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 20px 40px -22px rgba(17,21,27,.3);
  }
  .admin-table--cartoes td, .super-tabela--cartoes td{
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 8px 0; border: none; text-align: right; min-width: 0;
  }
  .admin-table--cartoes td::before, .super-tabela--cartoes td::before{
    content: var(--rotulo, none);
    flex: none; text-align: left;
    font-family: var(--font-display); font-size: 0.76rem; letter-spacing: .02em;
    color: var(--ink-soft);
  }
  .admin-table--cartoes td > *, .super-tabela--cartoes td > *{ min-width: 0; }
  /* linha de botões: ocupa o cartão todo, separada por um filete */
  .admin-table--cartoes td.admin-row-actions{
    display: flex; flex-wrap: wrap; white-space: normal; gap: 8px;
    justify-content: flex-end; border-top: 1px solid rgba(28,33,40,.08);
    margin-top: 4px; padding-top: 12px;
  }
  .admin-table--cartoes td.admin-row-actions > *{ margin: 0; }
  .admin-table--cartoes td.admin-row-actions::before{ content: none; }

  /* --- Produtos --- */
  #adminTableBody td:nth-child(2){ --rotulo: "Nome"; }
  #adminTableBody td:nth-child(3){ --rotulo: "Categoria"; }
  #adminTableBody td:nth-child(4){ --rotulo: "Preço"; }
  #adminTableBody td:nth-child(5){ --rotulo: "Status"; }
  #adminTableBody td:nth-child(1){ justify-content: flex-start; padding-bottom: 0; }
  #adminTableBody td:nth-child(1)::before{ content: none; }

  /* --- Usuários --- */
  #usuariosTabelaCorpo td:nth-child(1){ --rotulo: "Nome"; display: block; overflow: hidden; }
  #usuariosTabelaCorpo td:nth-child(1)::before{ float: left; }
  #usuariosTabelaCorpo td:nth-child(2){ --rotulo: "E-mail"; }
  #usuariosTabelaCorpo td:nth-child(3){ --rotulo: "Função"; }
  #usuariosTabelaCorpo td:nth-child(4){ --rotulo: "Situação"; }

  /* --- Super admin › Empresas: o nome vira o título do cartão --- */
  #empresasTabelaCorpo td:nth-child(1), #faturasTabelaCorpo td:nth-child(1){
    justify-content: flex-start; text-align: left; font-size: 1.02rem;
    border-bottom: 1px solid rgba(28,33,40,.08); padding-bottom: 10px; margin-bottom: 4px;
  }
  #empresasTabelaCorpo td:nth-child(1)::before, #faturasTabelaCorpo td:nth-child(1)::before{ content: none; }
  #empresasTabelaCorpo td:nth-child(2){ --rotulo: "Contato"; }
  #empresasTabelaCorpo td:nth-child(3){ --rotulo: "Status"; }
  #empresasTabelaCorpo td:nth-child(4){ --rotulo: "Usuários"; }
  #empresasTabelaCorpo td:nth-child(5){ --rotulo: "Pedidos"; }
  #empresasTabelaCorpo td:nth-child(6){ --rotulo: "Cliente desde"; }
  .super-tabela-email{ display: block; text-align: right; }
  /* nome + plano empilhados (título do cartão) e contato com o rótulo à esquerda */
  #empresasTabelaCorpo td:nth-child(1){ flex-direction: column; align-items: flex-start; gap: 2px; }
  #empresasTabelaCorpo td:nth-child(1) .super-tabela-email{ text-align: left; }
  #empresasTabelaCorpo td:nth-child(2){ display: block; overflow: hidden; }
  #empresasTabelaCorpo td:nth-child(2)::before{ float: left; }

  /* --- Super admin › Faturas --- */
  #faturasTabelaCorpo td:nth-child(2){ --rotulo: "Referência"; }
  #faturasTabelaCorpo td:nth-child(3){ --rotulo: "Mensalidade"; }
  #faturasTabelaCorpo td:nth-child(4){ --rotulo: "Taxas"; }
  #faturasTabelaCorpo td:nth-child(5){ --rotulo: "Total"; }
  #faturasTabelaCorpo td:nth-child(6){ --rotulo: "Vencimento"; }
  #faturasTabelaCorpo td:nth-child(7){ --rotulo: "Status"; }
  #faturasTabelaCorpo td:nth-child(8){ --rotulo: "Cobrança"; }
  #faturasTabelaCorpo td:nth-child(9){ --rotulo: "Ação"; }
}

@media (max-width: 560px){
  .admin-header{ padding: 12px 14px; }
  .admin-header-brand > span:last-child{ display: none; }          /* "— Administração" */
  .admin-header-actions{ gap: 6px; }
  .admin-header-actions .btn-ghost-dark{ padding: 7px 12px; font-size: 0.82rem; }
  .admin-header .brand-name{ font-size: 0.95rem; line-height: 1.15; white-space: normal; }
  .admin-header .brand-sub{ display: none; }
  .admin-header .mesa-badge{ display: none; }                      /* "Administrador Central" */
  .admin-senha-linha{ flex-wrap: wrap; }
  .admin-senha-linha input{ flex: 1 1 100%; }
  .admin-modal-actions, .super-modal-botoes{ flex-wrap: wrap; }
  .admin-modal-actions .btn, .super-modal-botoes .btn{ flex: 1 1 auto; }
}

/* =========================================================
   [24/09] Telas de login (Admin, Super Admin, Caixa, Entregador)
   Antes: fundo grafite escuro chapado, que escondia o fundo claro do resto do sistema.
   Agora: o mesmo fundo claro da landing e do pedido (o .admin-page já o desenha,
   fixo, atrás de tudo) e o mesmo vidro claro nos cartões. Só acrescenta regras.
   ========================================================= */
.admin-login{ background: transparent; }

.admin-login-form{
  background: linear-gradient(135deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.26) 48%, rgba(255,255,255,.5) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  backdrop-filter: blur(30px) saturate(165%);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 26px;
  padding: 42px 34px 34px;
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 0 -1px 0 rgba(255,255,255,.4),
    inset 1px 0 0 rgba(255,255,255,.6),
    0 30px 60px -26px rgba(17,21,27,.45),
    0 3px 10px rgba(17,21,27,.08);
}
.admin-login-form::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, rgba(255,255,255,.34) 100%);
}
.admin-login-form img{ display: block; margin: 0 auto; filter: drop-shadow(0 8px 12px rgba(17,21,27,.25)); }
.admin-login-form h1{ color: var(--ink); }
.admin-login-form p{ color: var(--ink-soft); }
.admin-login-form input{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(28,33,40,.14);
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(28,33,40,.06);
}
.admin-login-form input::placeholder{ color: rgba(91,100,112,.75); }
.admin-login-form input:focus{
  outline: none;
  border-color: var(--navy-600);
  box-shadow: 0 0 0 4px rgba(91,100,112,.18);
}
/* botão principal: vidro grafite (o claro sumiria em cima do cartão claro) */
.admin-login-form .btn-primary{
  color: #fff;
  background: linear-gradient(180deg, #3a414a 0%, #1c2128 55%, #11151b 100%);
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.35), 0 18px 34px -14px rgba(17,21,27,.65);
}
.admin-login-form .btn-primary:hover{ filter: brightness(1.12); }
/* a regra ".admin-login-form p" acima pintaria a mensagem de erro de cinza */
.admin-login-form .form-error{ color: #B3261E; margin: 14px 0 0; }

/* =========================================================
   [24/09 b] Segurança da conta: verificação em duas etapas, códigos de recuperação
   e troca de senha (janelas montadas por js/seguranca.js). Só acrescenta regras.
   ========================================================= */
.seg-backdrop{ z-index: 1200; }
.seg-modal{ max-height: calc(100vh - 32px); overflow-y: auto; }
.seg-modal--larga{ max-width: 520px; }
.seg-modal .admin-modo-descricao{ margin: 0 0 16px; }
.seg-passos{ margin: 0 0 14px; padding-left: 20px; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }
.seg-passos{ list-style: decimal; }
.seg-passos li{ margin-bottom: 6px; }
/* botão principal das janelas de segurança: vidro grafite, como no login */
.seg-modal .btn-primary{
  color: #fff;
  background: linear-gradient(180deg, #3a414a 0%, #1c2128 55%, #11151b 100%);
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.35), 0 18px 34px -14px rgba(17,21,27,.65);
}
.seg-modal .btn-primary:hover{ filter: brightness(1.12); }
.seg-modal .btn-primary:disabled{ opacity: .45; filter: none; cursor: not-allowed; }
.seg-qr{
  width: 220px; max-width: 100%; margin: 6px auto 12px;
  padding: 10px; border-radius: 18px; background: #fff;
  border: 1px solid rgba(28,33,40,.12);
  box-shadow: 0 14px 28px -16px rgba(17,21,27,.35);
}
.seg-qr svg{ display: block; width: 100%; height: auto; }
.seg-segredo{
  display: block; margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-s);
  background: var(--paper-dim); color: var(--navy-800); text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; letter-spacing: .08em;
  word-break: break-all; user-select: all;
}
.seg-codigos{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 14px;
}
.seg-codigos code{
  padding: 9px 10px; border-radius: var(--radius-s); text-align: center;
  background: var(--paper-dim); color: var(--navy-800); user-select: all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; letter-spacing: .05em;
}
.seg-linha-botoes{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.seg-modal .admin-checkbox-row{ margin: 4px 0 6px; }
.seg-estado{ margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; color: var(--live-600, #16a34a); }
.seg-menu{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.seg-menu .btn{ width: 100%; justify-content: center; }
@media (max-width: 560px){
  .seg-codigos{ grid-template-columns: 1fr; }
  .seg-btn-conta{ padding: 7px 12px; font-size: 0.82rem; }
}

/* =========================================================
   [24/09 c] Selo "Sistema online" no topo do cartão de login: a bolinha verde piscante
   da Nómos (o mesmo .live-badge da landing). Verde e piscando só quando o servidor
   respondeu; cinza enquanto conecta ou se não houver conexão.
   ========================================================= */
.login-selo{ display: flex; width: fit-content; margin: 0 auto 18px; }
.login-selo[data-state="loading"] i,
.login-selo[data-state="offline"] i{
  background: var(--silver-500, #9aa3ad);
  box-shadow: 0 0 0 2px rgba(255,255,255,.9);
  animation: none;
}
@media (prefers-reduced-motion: reduce){
  .login-selo i{ animation: none !important; }
}

/* =========================================================
   [24/09 d] Entregas em rota: área do Caixa ("Em rota de entrega") e etiquetas/botão
   "Vou levar" na tela do Entregador. Só acrescenta regras.
   ========================================================= */
.rota-secao{ margin-top: 28px; }
.rota-titulo{
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink);
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.rota-contador{
  min-width: 24px; padding: 2px 8px; border-radius: 999px; text-align: center;
  background: rgba(28,33,40,.1); color: var(--navy-800); font-size: .8rem;
}
.rota-lista{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.rota-card{ padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.rota-topo{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rota-cliente{ margin: 0; font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); }
.rota-codigo{ font-size: .78rem; color: var(--ink-soft); }
.rota-chip{
  align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  background: rgba(28,33,40,.08); color: var(--navy-700);
}
.rota-chip--entregue{ background: rgba(217,119,6,.16); color: #92400e; }
.rota-linha{ margin: 0; font-size: .88rem; color: var(--ink); line-height: 1.4; }
.rota-linha--suave{ color: var(--ink-soft); }
.rota-motoboy{ font-weight: 600; }
.rota-motoboy--livre{ color: #92400e; }
.rota-alerta{
  margin: 0; padding: 8px 10px; border-radius: var(--radius-s); font-size: .82rem; line-height: 1.4;
  color: #B3261E; background: rgba(179,38,30,.08); border: 1px solid rgba(179,38,30,.25);
}
.rota-acoes{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rota-select{
  flex: 1 1 160px; min-width: 0; padding: 9px 10px; border-radius: var(--radius-s); font: inherit; font-size: .88rem;
  background: rgba(255,255,255,.8); border: 1px solid rgba(28,33,40,.14); color: var(--ink);
}
.rota-select:focus{ outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 4px rgba(91,100,112,.18); }
.rota-cancelar, .rota-pagar{ flex: 0 0 auto; }
/* entregador */
.rota-tag{ margin: 0 0 6px; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.entrega-card--livre .rota-tag{ color: #92400e; }
.rota-pegar{
  width: 100%; margin-top: 12px; color: #fff;
  background: linear-gradient(180deg, #3a414a 0%, #1c2128 55%, #11151b 100%);
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.35), 0 18px 34px -14px rgba(17,21,27,.65);
}
.rota-pegar:hover{ filter: brightness(1.12); }
.rota-pegar:disabled{ opacity: .5; filter: none; }
.rota-pagar{ color: #fff; background: linear-gradient(180deg, #3a414a 0%, #1c2128 55%, #11151b 100%); }

/* =========================================================
   [24/09 d] Taxa de serviço por empresa (Super Admin): coluna na tabela de empresas.
   ========================================================= */
.super-taxa{ display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
@media (max-width: 720px){
  #empresasTabelaCorpo td:nth-child(7){ --rotulo: "Taxa de serviço"; }
}

/* =========================================================
   [24/09 f] Planos e mesas cadastradas: cartão do plano e "chips" das mesas (Admin) e coluna Plano (Super Admin).
   ========================================================= */
.admin-plano-card{
  margin: 0 0 18px; padding: 14px 18px; border-radius: var(--radius-m);
  background: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.24) 100%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 40px -24px rgba(17,21,27,.3);
}
.admin-plano-titulo{ margin: 0 0 4px; font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.mesas-cadastradas{ margin: 22px 0 6px; }
.mesas-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.mesa-chip{
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 999px;
  font-size: .85rem; color: var(--ink); background: rgba(28,33,40,.07); border: 1px solid rgba(28,33,40,.1);
}
.mesa-chip--uso{ background: rgba(217,119,6,.14); color: #92400e; border-color: rgba(217,119,6,.3); }
.mesa-chip-x{
  width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; line-height: 1; font-size: 1rem;
  background: rgba(28,33,40,.12); color: var(--ink);
}
.mesa-chip-x:hover:not(:disabled){ background: rgba(179,38,30,.85); color: #fff; }
.mesa-chip-x:disabled{ opacity: .35; cursor: not-allowed; }
.super-plano{ display: inline-flex; align-items: center; gap: 12px; }
.super-plano .super-tabela-email{ text-align: left; }
@media (max-width: 720px){
  #empresasTabelaCorpo td:nth-child(8){ --rotulo: "Plano"; }
  .super-plano .super-tabela-email{ text-align: right; }
}
.admin-plano-card .admin-hint{ background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }

/* =========================================================
   [24/09 g] Logomarca da empresa (cabeçalho e cartão de envio no Admin) e foto do prato
   (substitui o antigo campo de caminho digitado à mão).
   ========================================================= */
.brand-mark{
  width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover;
  background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.28);
}
.admin-logo-card{ margin-bottom: 18px; }
.admin-logo-linha{ display: flex; align-items: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.admin-logo-preview{
  width: 64px; height: 64px; border-radius: 50%; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28,33,40,.08); border: 1px solid rgba(28,33,40,.12);
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--ink-soft);
}
.admin-logo-preview img{ width: 100%; height: 100%; object-fit: cover; }
.admin-logo-acoes{ display: flex; gap: 8px; flex-wrap: wrap; }
.admin-logo-botao-arquivo{ cursor: pointer; }
.admin-status-msg--erro{ color: #B3261E; }
.admin-foto-preview{ display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.admin-foto-preview img{
  width: 76px; height: 76px; border-radius: var(--radius-s); object-fit: cover;
  border: 1px solid rgba(28,33,40,.12); background: #fff;
}

/* =========================================================
   [24/09 h] Relatórios (dashboard e histórico de delivery): botões de exportação e a área de
   impressão (preto no branco, escondida na tela — só aparece durante o print, como o recibo
   do Caixa). Cabeçalho e rodapé repetem em toda página impressa via position:fixed.
   ========================================================= */
.relatorio-acoes{ display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.relatorio-impressao{ display: none; }
.relatorio-impressao--ativa{ display: block; }
@media screen{
  .relatorio-impressao{ display: none !important; }   /* nunca aparece fora da impressão, mesmo que a classe --ativa esteja marcada */
}
@media print{
  /* só durante a impressão de verdade (não na tela) escondemos o resto do painel atrás do relatório */
  body.imprimindo-relatorio > *:not(.relatorio-impressao){ display: none !important; }
  body.imprimindo-relatorio{ background: #fff; }
  /* Margem da página zerada de propósito: o espaço pro cabeçalho/rodapé vem do padding do próprio
     .relatorio-impressao (técnica mais confiável no gerador de PDF do Chrome do que usar a margem
     da página com posição negativa — testado e ajustado depois de ver o cabeçalho ficar fora do lugar). */
  @page{ margin: 0; size: A4; }
  .relatorio-impressao{
    display: block !important; background: #fff; color: #111; font-family: Arial, Helvetica, sans-serif;
    padding: 24mm 12mm 16mm; box-sizing: border-box;
    /* sem isso, o Chrome só aplica o padding de cima/baixo na 1ª/última página — com isso, ele
       "clona" o respiro em toda página nova, então o conteúdo nunca nasce colado no cabeçalho fixo */
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .relatorio-cabecalho{
    position: fixed; top: 8mm; left: 12mm; right: 12mm; display: flex; align-items: center; gap: 10px;
    padding-bottom: 6px; border-bottom: 1px solid #ccc;
  }
  .relatorio-logo-empresa{ width: 32px; height: 32px; object-fit: cover; border-radius: 50%; }
  .relatorio-cabecalho-texto{ display: flex; flex-direction: column; line-height: 1.35; }
  .relatorio-cabecalho-texto strong{ font-size: 13px; }
  .relatorio-cabecalho-texto span{ font-size: 10px; color: #555; }
  .relatorio-rodape{
    position: fixed; bottom: 6mm; left: 12mm; right: 12mm; display: flex; align-items: center; gap: 6px;
    padding-top: 4px; border-top: 1px solid #ccc; font-size: 9px; color: #777; background: #fff;
  }
  .relatorio-rodape img{ width: 14px; height: 14px; border-radius: 50%; }
  .relatorio-corpo h3{ font-size: 12px; margin: 14px 0 6px; break-after: avoid; }
  .relatorio-corpo table{ width: 100%; border-collapse: collapse; margin-bottom: 4px; }
  .relatorio-corpo th, .relatorio-corpo td{ border: 1px solid #ccc; padding: 3px 6px; font-size: 10px; text-align: left; }
  .relatorio-corpo th{ background: #eee; }
  .relatorio-corpo td.num, .relatorio-corpo th.num{ text-align: right; white-space: nowrap; }
  .relatorio-corpo tr{ break-inside: avoid; }
}

/* =========================================================
   [25/09] Olho 3D pequeno de transição pós-login (Admin, Super Admin, Caixa) — js/login-eye.js.
   Fica DENTRO do próprio cartão de login (substitui os campos por instantes), com a barra
   verde luminosa abaixo dele — não é mais um overlay de tela cheia.
   ========================================================= */
.olho-mini{
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 10px 0 4px;
}
.olho-canvas-mini{
  width: 116px; height: 116px; border-radius: 50%; display: block;
  box-shadow: 0 14px 30px -14px rgba(17,21,27,.35);
}
.olho-barra{
  position: relative; width: 140px; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(28,33,40,.12); box-shadow: inset 0 1px 2px rgba(28,33,40,.18);
}
.olho-barra-luz{
  position: absolute; inset: 0; width: 46%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,197,94,0) 0%, var(--live-500, #22c55e) 50%, rgba(34,197,94,0) 100%);
  box-shadow: 0 0 12px var(--live-glow, rgba(34,197,94,.65));
  animation: olho-varrer 1.3s ease-in-out infinite;
}
@keyframes olho-varrer{
  0%{ transform: translateX(-120%); } 100%{ transform: translateX(320%); }
}
/* versão sem WebGL: sem o canvas do olho — um anel em CSS, do mesmo tamanho, faz as vezes dele */
.olho-anel-simples{
  width: 116px; height: 116px; border-radius: 50%;
  background: conic-gradient(from 0deg, #dfe4ea, #7f8a97, #2a3038, #7f8a97, #dfe4ea);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  animation: olho-girar 1.6s linear infinite;
  box-shadow: 0 10px 30px -14px rgba(28,33,40,.4);
}
@keyframes olho-girar{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .olho-barra-luz, .olho-anel-simples{ animation: none; }
}

/* =========================================================
   [25/09 b] Telefone do cliente no delivery: botão pequeno (ícone de telefone) nos cards do
   Caixa e do Entregador, que abre um menu com WhatsApp/Ligar.
   ========================================================= */
.tel-botao-wrap{ position: relative; display: inline-block; margin-left: 6px; vertical-align: middle; }
.tel-botao{
  width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(34,197,94,.35); background: rgba(34,197,94,.14); color: #147d5f;
  cursor: pointer; padding: 0; line-height: 0;
}
.tel-botao:hover{ background: rgba(34,197,94,.24); }
.tel-menu{
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 190px;
  display: flex; flex-direction: column; overflow: hidden; padding: 6px;
  background: #fff; border: 1px solid rgba(28,33,40,.12); border-radius: var(--radius-s);
  box-shadow: 0 18px 34px -16px rgba(17,21,27,.35);
}
.tel-menu a{
  padding: 8px 10px; border-radius: 8px; font-size: .86rem; color: var(--ink); text-decoration: none;
}
.tel-menu a:hover{ background: rgba(28,33,40,.06); }
.rota-topo .tel-botao-wrap{ margin-left: 8px; }

/* =========================================================
   [25/09 c] Categorias do cardápio (Admin): cartão com chips (reaproveita .mesa-chip das
   mesas cadastradas), botão de renomear e o campo do produto virando lista suspensa.
   ========================================================= */
.admin-categoria-form{ display: flex; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }
.admin-categoria-form input{
  flex: 1 1 220px; padding: 9px 12px; border-radius: var(--radius-s); font: inherit;
  background: rgba(255,255,255,.8); border: 1px solid rgba(28,33,40,.14); color: var(--ink);
}
.categoria-chip{ padding-right: 6px; }
.categoria-chip-editar{
  width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer; font-size: .8rem; line-height: 1;
  background: rgba(28,33,40,.08); color: var(--ink-soft);
}
.categoria-chip-editar:hover{ background: rgba(28,33,40,.16); color: var(--ink); }
.categoria-chip-input{
  border: 1px solid var(--navy-600); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: .85rem;
  width: 140px;
}
#produtoCategoriaSelect{
  width: 100%; padding: 10px 12px; border-radius: var(--radius-s); font: inherit;
  background: rgba(255,255,255,.8); border: 1px solid rgba(28,33,40,.14); color: var(--ink);
}

/* =========================================================
   [25/09 d] "Confirmar entrega" no card Em rota do Caixa: campo inline pro código do cliente.
   ========================================================= */
.rota-confirmar-linha{ display: flex; gap: 8px; align-items: center; flex: 1 1 100%; flex-wrap: wrap; }
.rota-confirmar-input{
  width: 90px; padding: 9px 10px; border-radius: var(--radius-s); font: inherit; letter-spacing: .1em;
  text-align: center; background: rgba(255,255,255,.8); border: 1px solid rgba(28,33,40,.14); color: var(--ink);
}
.rota-confirmar-input:focus{ outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 4px rgba(91,100,112,.18); }
.rota-confirmar-erro{ flex: 1 1 100%; margin: 4px 0 0; }

/* =========================================================
   [25/09 e] Entrega x Retirada no balcão (delivery.html).
   ========================================================= */
.entrega-modo-opcoes{ display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.entrega-modo-opcao{
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-s);
  border: 1px solid rgba(28,33,40,.14); background: rgba(255,255,255,.6); cursor: pointer;
}
.entrega-modo-opcao:has(input:checked){ border-color: var(--navy-600); background: rgba(91,100,112,.1); }
.entrega-modo-opcao input{ accent-color: var(--navy-600); }
.entrega-modo-opcao em{ font-style: normal; color: var(--ink-soft); font-size: .85em; }

/* =========================================================
   [25/09 f] "Novo pedido no balcão" (Caixa) — modal com busca de produtos e carrinho simples.
   ========================================================= */
.caixa-toolbar-acoes{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.balcao-modal{ max-width: 480px; max-height: 86vh; overflow-y: auto; }
.balcao-produtos{
  max-height: 220px; overflow-y: auto; border: 1px solid rgba(28,33,40,.1); border-radius: var(--radius-s);
  margin-bottom: 12px;
}
.balcao-produto-item{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid rgba(28,33,40,.08);
}
.balcao-produto-item:last-child{ border-bottom: none; }
.balcao-produto-nome{ font-size: .9rem; }
.balcao-produto-preco{ color: var(--ink-soft); font-size: .82rem; margin-left: 6px; }
.balcao-produto-add{
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--navy-600); background: #fff;
  color: var(--navy-600); font-size: 1.1rem; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.balcao-produto-add:hover{ background: var(--navy-600); color: #fff; }
.balcao-carrinho{ margin-bottom: 12px; }
.balcao-carrinho h4{ font-size: .88rem; margin: 0 0 6px; }
.balcao-carrinho-lista{ list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.balcao-carrinho-item{ display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .88rem; }
.balcao-carrinho-item-qtd{ display: flex; align-items: center; gap: 6px; }
.balcao-carrinho-item-qtd button{
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(28,33,40,.2); background: #fff; cursor: pointer; line-height: 1;
}
.balcao-carrinho-total{ font-size: .92rem; margin: 0; text-align: right; }

/* =========================================================
   Contrato de uso (LGPD) — tela de aceite obrigatório, em vidro líquido,
   sobre o mesmo fundo pontilhado/retículo que a .admin-page já desenha.
   ========================================================= */
.contrato-backdrop{
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 20px;
  background: rgba(7,10,14,.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.contrato-modal{
  position: relative; isolation: isolate;
  width: 100%; max-width: 980px;
  display: flex; flex-direction: column;
  background: linear-gradient(135deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.26) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--radius-m);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 34px 70px -24px rgba(7,21,39,.55);
  overflow: hidden;
}
.contrato-header{ padding: 26px 30px 14px; border-bottom: 1px solid rgba(28,33,40,.1); }
.contrato-header h2{ font-family: var(--font-display); color: var(--navy-800); margin: 6px 0 6px; font-size: 1.35rem; }
.contrato-header .admin-hint{ margin: 0; }
.contrato-versao-badge{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Space Grotesk", monospace, var(--font-body);
  font-size: .72rem; letter-spacing: .05em;
  color: var(--ink-soft);
  background: rgba(28,33,40,.06);
  border: 1px solid rgba(28,33,40,.14);
  padding: 4px 11px; border-radius: 999px;
}
.contrato-versao-badge i{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live-500); box-shadow: 0 0 6px var(--live-glow, rgba(34,197,94,.55));
  display: inline-block;
}

.contrato-partes{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 30px 4px; }
.contrato-parte-card{
  background: linear-gradient(160deg, rgba(28,33,40,.92) 0%, rgba(42,48,56,.86) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-s);
  padding: 14px 16px;
  box-shadow: 0 18px 36px -22px rgba(0,0,0,.45);
}
.contrato-parte-card h3{
  font-family: var(--font-display); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-400); margin: 0 0 8px;
}
.contrato-parte-card p{ font-size: .86rem; line-height: 1.5; margin: 0 0 4px; color: rgba(255,255,255,.88); }
.contrato-parte-card .contrato-doc{ font-family: monospace; color: var(--teal-300); font-size: .82rem; }

.contrato-corpo{ flex: 1; overflow-y: auto; padding: 18px 30px; max-height: 46vh; }
.contrato-clausula{ margin-bottom: 18px; }
.contrato-clausula h4{ font-family: var(--font-display); color: var(--navy-800); font-size: .98rem; margin: 0 0 6px; }
.contrato-clausula p{ font-size: .87rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 8px; }
.contrato-copyright{ font-weight: 700; color: var(--navy-800) !important; }

.contrato-tabela-planos{ width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: .85rem; }
.contrato-tabela-planos th, .contrato-tabela-planos td{ padding: 7px 10px; border-bottom: 1px solid rgba(28,33,40,.12); text-align: left; }
.contrato-tabela-planos th{ color: var(--ink-soft); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.contrato-plano-atual{ background: rgba(34,197,94,.1); }
.contrato-plano-atual td:first-child{ font-weight: 700; color: var(--teal-500); }

.contrato-rodape{ padding: 16px 30px 24px; border-top: 1px solid rgba(28,33,40,.1); background: rgba(255,255,255,.4); }
.contrato-aceite-linha{ display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.contrato-aceite-linha input[type="checkbox"]{ width: auto; margin-top: 3px; }
.contrato-aceite-linha label{ font-size: .86rem; color: var(--ink); line-height: 1.45; }
.contrato-rodape-acoes{ display: flex; justify-content: flex-end; gap: 10px; }
.contrato-erro{ margin: 0 0 10px; }

@media (max-width: 720px){
  .contrato-partes{ grid-template-columns: 1fr; }
  .contrato-header, .contrato-partes, .contrato-corpo, .contrato-rodape{ padding-left: 18px; padding-right: 18px; }
  .contrato-corpo{ max-height: 50vh; }
}

/* Link discreto na tela de login (ex.: "Esqueci minha senha") — texto simples, sem fundo. */
.btn-link-esqueci{
  background: none; border: none; padding: 6px 0; margin-top: 4px;
  font-family: var(--font-body); font-size: .82rem; color: var(--teal-400, #6b7684);
  text-decoration: underline; cursor: pointer; align-self: center;
}
.btn-link-esqueci:hover{ color: var(--paper, #fbfcfd); }