/* Cardapio Quatinga — tema "Azul-noite clean" (direção A do redesign)
   Carregado por ÚLTIMO no index.html: sobrepõe o visual antigo sem mexer na lógica.
   As cores do Tailwind (blue/gray/slate/zinc) foram trocadas no tailwind.config do
   index.html; aqui ficam fontes, fundos, barras, áreas seguras e componentes. */

:root {
  --bg: #F4F6FB;
  --surface: #FFFFFF;
  --surface-2: #EEF2F8;
  --border: #E2E8F0;
  --text: #0F172A;
  --muted: #5B6478;
  --primary: #2F5BEA;
  --primary-soft: #E6ECFE;
  --primary-text: #2347C9;
  --accent: #F97316;
  --tab-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  /* Áreas seguras: o Capacitor injeta --safe-area-inset-*; navegadores usam env() */
  --sat: max(var(--safe-area-inset-top, 0px), env(safe-area-inset-top, 0px));
  --sab: max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --sal: max(var(--safe-area-inset-left, 0px), env(safe-area-inset-left, 0px));
  --sar: max(var(--safe-area-inset-right, 0px), env(safe-area-inset-right, 0px));
}
html.dark {
  --bg: #0B1220;
  --surface: #131C2E;
  --surface-2: #1B2740;
  --border: #22304A;
  --text: #E7ECF6;
  --muted: #9AA8C2;
  --primary: #3B63F0;
  --primary-soft: #1C2A50;
  --primary-text: #A9BCFF;
  --tab-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ===== Base ===== */
html, html.dark { background-color: var(--bg); color: var(--text); }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  background-color: var(--bg) !important;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  padding-left: var(--sal);
  padding-right: var(--sar);
}
.font-display { font-family: Fraunces, Georgia, serif; }
:focus-visible { outline: 3px solid rgba(47, 91, 234, 0.45); outline-offset: 2px; }

/* ===== Barra do topo (marca + tema + ADM) ===== */
#app-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: calc(var(--sat) + 10px) 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
}
#app-topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
#app-topbar .brand-name { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 19px; line-height: 1.1; letter-spacing: -0.2px; }
#app-topbar .brand-sub { font-size: 12px; font-weight: 600; color: var(--muted); }
#app-topbar .top-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover { border-color: var(--primary); }
.icon-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Offline: o subtítulo da marca vira um aviso pequeno em âmbar (sem faixa por cima da tela) */
#app-topbar .offline-pill { display: none; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #B45309; white-space: nowrap; }
.dark #app-topbar .offline-pill { color: #FBBF24; }
#app-topbar .offline-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
body.is-offline #app-topbar .brand-sub { display: none; }
body.is-offline #app-topbar .offline-pill { display: inline-flex; }

/* ===== Barras de abas inferiores (funcionário e ADM): pílula flutuante ===== */
#user-tabs, #admin-tabs {
  left: 12px !important;
  right: 12px !important;
  bottom: calc(10px + var(--sab)) !important;
  padding: 6px !important;
  gap: 4px;
  border-radius: 24px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: var(--tab-shadow) !important;
  max-width: 560px;
  margin: 0 auto !important;
}
.admin-tab-btn {
  min-height: 56px;
  border-radius: 18px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  gap: 4px !important;
}
.admin-tab-btn svg { width: 22px; height: 22px; }
.admin-tab-btn:hover { background-color: var(--surface-2) !important; color: var(--text) !important; }
.admin-tab-btn.active { background-color: var(--primary-soft) !important; color: var(--primary-text) !important; font-weight: 800 !important; }
#user-view:not(.hidden), #admin-view:not(.hidden) { padding-bottom: calc(7rem + var(--sab)) !important; }

/* ===== Cartões, campos e janelas ===== */
.modal-overlay { background-color: rgba(11, 18, 32, 0.6) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: var(--sat) 0 var(--sab); }
.modal-content { border-radius: 24px !important; }
html.dark .modal-content { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
html.dark input:read-only { background-color: var(--surface-2) !important; color: var(--muted); border-color: var(--border); }
.dark #cropper-container { background-color: var(--surface-2); }
input, select, textarea { font-family: inherit; }

/* Avisos rápidos (toast) acima da barra de abas */
#app-toast {
  bottom: calc(96px + var(--sab)) !important;
  border-radius: 16px !important;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
  max-width: calc(100vw - 32px);
}
#app-toast.success { background-color: #15803D !important; }
#app-toast.error { background-color: #B91C1C !important; }
#app-toast.info { background-color: var(--primary) !important; }

/* ===== Visualizador do cardápio em tela cheia ===== */
#menu-viewer-modal > div:first-child { padding-top: calc(var(--sat) + 12px) !important; }
#menu-viewer-buttons { padding-bottom: calc(16px + var(--sab)) !important; }
html.dark #menu-viewer-modal, html.dark #menu-viewer-stage, html.dark #menu-viewer-img { background: var(--bg) !important; }
html.dark #menu-viewer-buttons { background: var(--surface) !important; border-top-color: var(--border) !important; }
#menu-viewer-modal, #menu-viewer-stage { background: var(--bg) !important; }
#menu-viewer-buttons {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.14);
  max-height: 44vh !important;
  padding: 12px 14px calc(14px + var(--sab)) !important;
}
html.dark #menu-viewer-buttons { box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.45); }

/* ===== Pedido do funcionário (fase 2) ===== */
.order-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 14px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}
#order-wizard { display: flex; flex-direction: column; gap: 14px; }

/* Foto do cardápio: grande, com botão de tela cheia */
#menu-image-container {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 22px !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#menu-image { border-radius: 0 !important; max-height: 70vh !important; background: var(--surface) !important; }
.menu-fullscreen-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 20;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  cursor: pointer;
}
.menu-fullscreen-btn svg { width: 16px; height: 16px; }

/* Chips dos dias */
.day-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.day-chip {
  min-height: 60px;
  border-radius: 16px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 0;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.chip-day { font-size: 11px; font-weight: 700; color: var(--muted); }
.chip-date { font-size: 16px; font-weight: 800; line-height: 1.1; }
.chip-mark { height: 14px; font-size: 10px; font-weight: 800; display: flex; align-items: center; }
.chip-mark svg { width: 14px; height: 14px; }
.day-chip.done { background: #DCFCE7; border-color: #BBF7D0; color: #166534; }
.day-chip.done .chip-day { color: #166534; }
.day-chip.holiday { background: #FFEDD5; border-color: #FED7AA; color: #9A3412; }
.day-chip.holiday .chip-day { color: #9A3412; }
.day-chip.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 91, 234, 0.18); }
html.dark .day-chip.done { background: #0F2E1F; border-color: #1F5136; color: #86EFAC; }
html.dark .day-chip.done .chip-day { color: #86EFAC; }
html.dark .day-chip.holiday { background: #3A2210; border-color: #6B3A16; color: #FDBA74; }
html.dark .day-chip.holiday .chip-day { color: #FDBA74; }
html.dark .day-chip.active { border-color: #6E8EFB; }

.wizard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
#wizard-day-title { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.4px; color: var(--text); }
#wizard-day-hint { font-size: 13px; font-weight: 600; color: var(--muted); }

.holiday-note {
  border-radius: 18px;
  padding: 16px;
  background: #FFEDD5;
  color: #7C2D12;
  display: flex;
  gap: 12px;
  align-items: center;
}
.holiday-note.hidden { display: none; }
.holiday-note svg { width: 26px; height: 26px; flex-shrink: 0; }
.holiday-note div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 600; }
.holiday-note strong { font-size: 15px; font-weight: 800; }
html.dark .holiday-note { background: #3A2210; color: #FED7AA; }

/* Cartões das opções */
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.option-card {
  position: relative;
  min-height: 108px;
  border-radius: 18px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
.option-card:hover { border-color: #93A9F6; }
.option-card:active { transform: scale(0.98); }
.option-card.selected { border-color: var(--primary); background: #F3F6FF; }
html.dark .option-card.selected { border-color: #6E8EFB; background: var(--primary-soft); }
.option-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.option-icon svg { width: 20px; height: 20px; }
.option-card.selected .option-icon { background: var(--primary); color: #FFFFFF; }
.option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option-name { font-size: 15px; font-weight: 800; line-height: 1.2; }
.option-desc { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.option-desc.dish { color: var(--text); font-weight: 700; font-size: 13px; }
.option-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.option-check svg { width: 14px; height: 14px; }

.notes-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.notes-field.hidden { display: none; }
#wizard-notes {
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0 14px;
  font-size: 15px;
  font-weight: 500;
}
#wizard-notes:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 91, 234, 0.18); }
#wizard-notes::placeholder { color: var(--muted); opacity: 0.8; }

/* Barra de progresso + Próximo dia / Revisar no fim do cartão */
.wizard-footer {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
}
.wizard-progress { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; min-width: 0; }
#wizard-progress-text { font-size: 13px; font-weight: 700; color: var(--muted); }
.progress-track { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
#wizard-progress-fill { height: 6px; border-radius: 999px; background: var(--primary); width: 0; transition: width 0.25s ease; }
.wizard-next {
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  background: var(--primary);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  cursor: pointer;
}
.wizard-next svg { width: 16px; height: 16px; }
.wizard-next.ready { background: #15803D; }

/* Pedido já feito e revisão: lista de dias */
.done-card { gap: 14px; }
.done-head { display: flex; align-items: center; gap: 12px; }
.done-head h3 { margin: 0; font-size: 20px; font-weight: 800; color: var(--text); }
.done-head p { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.done-icon, .success-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #DCFCE7;
  color: #15803D;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.done-icon svg { width: 26px; height: 26px; }
html.dark .done-icon, html.dark .success-icon { background: #0F2E1F; color: #86EFAC; }
.summary-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.summary-row:last-child { border-bottom: 0; }
.summary-day { font-size: 14px; font-weight: 700; color: var(--muted); }
.summary-choice { font-size: 15px; font-weight: 800; color: var(--text); text-align: right; display: flex; flex-direction: column; }
.summary-choice small { font-size: 12px; font-weight: 600; color: var(--muted); }
.summary-day { flex: none; }
.summary-choice { min-width: 0; line-height: 1.3; }
.summary-label { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--primary, #2563EB); }
.summary-choice small.summary-note { font-style: italic; }
.summary-row.holiday .summary-choice { color: #9A3412; }
html.dark .summary-row.holiday .summary-choice { color: #FDBA74; }

/* Revisão do pedido: bandeja que sobe de baixo */
.sheet-overlay { align-items: flex-end !important; padding-bottom: 0 !important; }
.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--text);
  border-radius: 28px 28px 0 0;
  padding: 12px 20px calc(20px + var(--sab));
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: sheetUp 0.25s ease-out;
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet-handle { width: 44px; height: 5px; border-radius: 999px; background: var(--border); align-self: center; }
.sheet-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.sheet-sub { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.sheet-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.btn-primary, .btn-secondary {
  min-height: 54px;
  padding: 0 20px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
}
.btn-primary { border: 0; background: var(--primary); color: #FFFFFF; }
.btn-primary:disabled { opacity: 0.7; }
.btn-secondary { border: 1px solid var(--border); background: var(--surface); color: var(--text); }

/* Pedido enviado */
.success-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px 24px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.success-card.hidden { display: none; }
.success-icon { width: 88px; height: 88px; }
.success-icon svg { width: 44px; height: 44px; }
.success-card h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); }
.success-card p { margin: 0; max-width: 320px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* Celular: botões do topo só com ícone, para o nome da marca caber em uma linha */
@media (max-width: 440px) {
  #app-topbar .icon-btn span { display: none; }
  #app-topbar .icon-btn { padding: 0; width: 44px; }
  #app-topbar .brand-name { font-size: 18px; white-space: nowrap; }
}

/* Os componentes acima definem display: o .hidden do Tailwind precisa continuar valendo */
.order-card.hidden, .option-grid.hidden, #wizard-day-hint.hidden { display: none; }

/* ===== Tela de início do funcionário ===== */
.home-greeting { display: flex; flex-direction: column; gap: 2px; margin: 8px 4px 16px; }
#home-date { font-size: 14px; font-weight: 600; color: var(--muted); }
#home-hello { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.6px; color: var(--text); }
.home-hero, .feature-card {
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 16px;
  background: var(--primary);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#hero-kicker, .feature-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; opacity: 0.88; }
.hero-chip, .feature-chip { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
.hero-chip.hidden { display: none; }
.hero-body { display: flex; flex-direction: column; gap: 4px; }
#hero-title, .feature-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.2; }
#hero-text, .feature-text { margin: 0; font-size: 14px; line-height: 1.45; opacity: 0.92; }
#hero-text.hidden { display: none; }
.feature-card { gap: 6px; text-align: left; }
.hero-btn {
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  background: #FFFFFF;
  color: #1E3FB8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
}
.hero-btn svg { width: 18px; height: 18px; }
.hero-btn.hidden, .hero-switch.hidden { display: none; }
.hero-switch {
  align-self: center;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.hero-switch svg { width: 16px; height: 16px; }

.recado-card, .push-card {
  border-radius: 20px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.recado-card.hidden, .push-card.hidden { display: none; }
.recado-card strong, .push-card strong { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
#recado-texto, #home-push-text { margin: 0; display: block; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.recado-card { border-color: #FED7AA; background: #FFF7ED; }
html.dark .recado-card { border-color: #6B3A16; background: #2A1A0E; }
.mini-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-icon svg { width: 20px; height: 20px; }
.mini-icon.accent { background: #FFEDD5; color: #C2410C; }
.mini-icon.primary { background: var(--primary-soft); color: var(--primary-text); }
.mini-icon.ok { background: #DCFCE7; color: #166534; }
html.dark .mini-icon.accent { background: #3A2312; color: #FDBA74; }
html.dark .mini-icon.ok { background: #11331F; color: #86EFAC; }
.push-card.off .mini-icon { background: var(--surface-2); color: var(--muted); }

.identity-card { gap: 10px; }
.identity-compact { display: flex; align-items: center; gap: 12px; }
.identity-compact.hidden, .identity-form.hidden { display: none; }
.identity-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.identity-info { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
#identity-name { font-size: 15px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#identity-rgf { font-size: 13px; font-weight: 600; color: var(--muted); }
.btn-ghost {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.identity-form { display: grid; gap: 8px; }
.identity-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.identity-input {
  min-height: 56px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0 16px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
}
.identity-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 91, 234, 0.18); }
.identity-name-input {
  min-height: 44px;
  border-radius: 14px;
  border: 0;
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
}

.home-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.mini-card {
  border-radius: 20px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  cursor: pointer;
}
.mini-card .mini-icon { margin-bottom: 8px; }
.mini-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.mini-title { font-size: 16px; font-weight: 800; line-height: 1.2; }
.mini-sub { font-size: 13px; font-weight: 600; color: var(--muted); }
.wizard-garnish { margin: -6px 0 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.wizard-garnish.hidden { display: none; }

/* Aviso "Por favor, insira o RGF" no estilo novo */
#guidanceSection {
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  background: var(--surface) !important;
  color: var(--muted) !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}
#guidanceText { font-weight: 700; }

/* ===== Todas as outras abas (funcionário e ADM): mesmo cartão, campos e botões ===== */
#app-container .bg-white.rounded-xl,
#app-container section.bg-white,
#admin-view section[data-admin-panel] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
}
#app-container section[data-user-panel] h2,
#admin-view h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px;
  color: var(--text) !important;
}
#app-container section[data-user-panel] h3,
#admin-view h3 { font-weight: 800 !important; letter-spacing: -0.2px; color: var(--text) !important; }
#app-container section[data-user-panel] p.text-xs,
#admin-view p.text-xs { font-size: 13px !important; color: var(--muted) !important; }

#app-container input[type="text"]:not(.identity-input):not(.identity-name-input):not(#wizard-notes),
#app-container input[type="tel"]:not(.identity-input),
#app-container input[type="password"],
#app-container input[type="email"],
#app-container input[type="number"],
#app-container input[type="date"],
#app-container select,
#app-container textarea,
.modal-content input[type="text"], .modal-content input[type="email"], .modal-content input[type="password"],
.modal-content input[type="number"], .modal-content input[type="date"], .modal-content select, .modal-content textarea {
  min-height: 48px;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background-color: var(--surface) !important;
  color: var(--text) !important;
  font-size: 15px;
}
#app-container textarea, .modal-content textarea { padding-top: 12px; padding-bottom: 12px; }
#app-container input:focus, #app-container select:focus, #app-container textarea:focus,
.modal-content input:focus, .modal-content select:focus, .modal-content textarea:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(47, 91, 234, 0.18) !important;
}
#app-container button.rounded-lg, #app-container a.rounded-lg, #app-container a.rounded-xl,
.modal-content button.rounded-lg { min-height: 44px; border-radius: 14px !important; font-weight: 800 !important; }

/* Listas geradas (feriados, pagamento, lançamentos, funcionários) */
#app-container .space-y-1\.5 > div.border,
#app-container .space-y-2 > div.border {
  border-radius: 14px !important;
  border-color: var(--border) !important;
  padding: 12px 14px !important;
  background: var(--surface);
}
#app-container .space-y-1\.5 > div.ring-2 { box-shadow: 0 0 0 2px var(--primary) !important; background: var(--primary-soft) !important; }
#user-next-payment.feature-card, #holidays-list .feature-card { margin-bottom: 14px; }

/* Folha de ponto */
#user-ponto-section { text-align: left !important; padding: 22px !important; }
#user-ponto-section a { width: 100%; justify-content: center; border-radius: 16px !important; min-height: 56px; }

/* Tabelas do ADM */
#admin-view table { border-collapse: separate; border-spacing: 0; width: 100%; }
#admin-view th { background: var(--surface-2) !important; color: var(--muted) !important; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; border-color: var(--border) !important; }
#admin-view td { border-color: var(--border) !important; color: var(--text); }
#admin-view .overflow-x-auto { border: 1px solid var(--border); border-radius: 16px; }
#admin-view .bg-gray-50, #admin-view .bg-blue-50\/40 { background: var(--surface-2) !important; }
#admin-view .border-2.border-blue-100 { border: 1px solid var(--border) !important; }
#admin-view .rounded-xl.p-5 { border-radius: 20px !important; }

/* ===== ADM: cardápio digitado ===== */
.menutext-card {
  margin-top: 20px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.menutext-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.menutext-head h3 { margin: 0; font-size: 18px; }
.menutext-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.seg { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); gap: 4px; }
.seg button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; }
.seg button.active { background: var(--primary-soft); color: var(--primary-text); font-weight: 800; }
.menutext-status { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.menutext-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-ai { display: inline-flex; align-items: center; gap: 8px; }
.btn-ai svg { width: 18px; height: 18px; }
.btn-ai:disabled { opacity: 0.5; cursor: not-allowed; }
.menutext-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.mt-day { margin: 0; padding: 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mt-day legend { padding: 0 4px; font-size: 14px; font-weight: 800; color: var(--text); }
.mt-day legend span { font-size: 11px; font-weight: 800; color: #9A3412; margin-left: 4px; }
.mt-day label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--muted); }
.mt-day input { min-height: 42px !important; font-size: 14px !important; padding: 0 12px; }
.mt-day.holiday { opacity: 0.7; }
.menutext-save { width: 100%; }

/* Ajustes do teste no emulador */
#holidays-list.hide-past .past-holiday { display: none !important; }
#app-container .space-y-1\.5 > div.border { padding: 10px 14px !important; }
.push-enable { min-height: 44px; padding: 0 16px; flex-shrink: 0; }
.push-enable.hidden { display: none; }
.push-card > div { flex-grow: 1; min-width: 0; }
#publicReportButtonContainer { margin-bottom: 16px; }

/* ===== Painel do ADM no estilo da tela do funcionário ===== */
.adm-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 4px 16px; }
.adm-top .home-greeting { margin: 0; }
#adm-hello { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.6px; color: var(--text); }
#adm-date { font-size: 14px; font-weight: 600; color: var(--muted); }
.adm-actions { display: flex; gap: 8px; }
.btn-ghost.danger { color: #B91C1C; }
html.dark .btn-ghost.danger { color: #FCA5A5; }
#adm-hero-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; opacity: 0.88; }
#adm-hero-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.2; color: #FFFFFF !important; }
#adm-hero-text { margin: 0; font-size: 14px; line-height: 1.45; opacity: 0.92; }
.adm-mini { margin-bottom: 0; }

/* A seção do cardápio deixa de ser uma caixa: resumo e mini cartões ficam soltos */
#admin-view #menu-management-section { background: transparent !important; border: 0 !important; padding: 0 !important; margin-bottom: 16px !important; }
#dev-panel-section .adm-mini { margin-bottom: 16px; }

/* Demais abas do ADM: caixas mais enxutas */
#admin-view section[data-admin-panel] { padding: 16px !important; margin-bottom: 16px !important; }
#admin-view section[data-admin-panel] > h2:first-child,
#admin-view section[data-admin-panel] > div:first-child > h2 { font-size: 20px !important; margin-bottom: 12px !important; }
#admin-view .mb-8 { margin-bottom: 16px !important; }
#admin-view .mb-6 { margin-bottom: 12px !important; }
#admin-view .p-6 { padding: 16px !important; }
#admin-view .text-2xl { font-size: 20px !important; }

/* Janela que recebe o bloco do mini cartão */
.adm-sheet { max-width: 720px; gap: 12px; }
.adm-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: -12px; background: var(--surface); padding: 4px 0 8px; z-index: 2; }
#adm-pop-body > * { border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; }
#adm-pop-body > * > h3:first-child, #adm-pop-body .menutext-head h3 { display: none; }
#adm-pop-body .menutext-head p { margin: 0 0 4px; }
#adm-pop-body img#admin-current-image { height: auto !important; max-height: 50vh; object-fit: contain !important; }
body.pop-open { overflow: hidden; }

/* ===== Rodada 3 (pedidos do usuário em 25/10) ===== */

/* Início: linha pequena da semana no lugar do cartão azul */
.week-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -6px 4px 14px; flex-wrap: wrap; }
.week-row.hidden { display: none; }
.week-label { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--primary-text); }
.week-range { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); }
.chip-btn {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.chip-btn svg { width: 15px; height: 15px; }
.chip-btn.hidden { display: none; }

/* PDF oficial no fim da página */
#publicReportButtonContainer { margin: 0 0 16px; }
#publicReportButtonContainer.hidden { display: none; }
.pdf-row {
  width: 100%;
  border-radius: 20px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}
.pdf-row:disabled { opacity: 0.6; }
.pdf-row-text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.pdf-row-text strong { font-size: 15px; font-weight: 800; }
.pdf-row-text span { font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.35; }
.pdf-row-arrow { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }

/* Pagamento: um cartão por mês */
.pay-months { display: flex; flex-direction: column; gap: 10px; }
.pay-months.hide-past .past-month { display: none; }
.pay-month { border: 1px solid var(--border); border-radius: 18px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.pay-month.past-month { opacity: 0.55; }
.pay-month.current { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(47, 91, 234, 0.15); }
.pay-month-name { font-size: 15px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; }
.pay-month-name span { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-text); }
.pay-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pay-item { border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; background: var(--surface-2); }
.pay-item span { font-size: 12px; font-weight: 700; color: var(--muted); }
.pay-item strong { font-size: 16px; font-weight: 800; color: var(--text); }
.pay-item.pay strong { color: #15803D; }
.pay-item.adv strong { color: var(--primary-text); }
.pay-item.bonus { background: #FEF3C7; }
.pay-item.bonus span, .pay-item.bonus strong { color: #92400E; }
html.dark .pay-item.pay strong { color: #86EFAC; }
html.dark .pay-item.bonus { background: #3A2A0E; }
html.dark .pay-item.bonus span, html.dark .pay-item.bonus strong { color: #FCD34D; }
.pay-item.done { opacity: 0.55; }

/* ADM Pedidos: quem já pediu */
.order-status { display: flex; flex-direction: column; gap: 12px; }
.status-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.status-pill { border-radius: 16px; padding: 12px 14px; display: flex; align-items: baseline; gap: 8px; }
.status-pill b { font-size: 26px; font-weight: 800; }
.status-pill span { font-size: 14px; font-weight: 700; }
.status-pill.ok { background: #DCFCE7; color: #166534; }
.status-pill.warn { background: #FFEDD5; color: #9A3412; }
html.dark .status-pill.ok { background: #0F2E1F; color: #86EFAC; }
html.dark .status-pill.warn { background: #3A2312; color: #FDBA74; }
.status-label { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.name-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.name-chip { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text); }
.name-chip.warn { background: #FFEDD5; color: #9A3412; }
html.dark .name-chip.warn { background: #3A2312; color: #FDBA74; }
.status-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--primary-text); margin-bottom: 8px; }

/* ADM Pedidos: semana, busca, PDF, resumo do dia e cartões */
#admin-view-current, #admin-view-next { min-height: 38px; border-radius: 10px !important; box-shadow: none !important; background: transparent !important; color: var(--muted) !important; font-weight: 700 !important; }
#admin-view-current.shadow-sm, #admin-view-next.shadow-sm { background: var(--primary-soft) !important; color: var(--primary-text) !important; font-weight: 800 !important; }
#orders-section > div:first-child > div { background: var(--surface) !important; border-color: var(--border) !important; border-radius: 14px !important; }
.pdf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.pdf-btn svg { width: 18px; height: 18px; }
@media (min-width: 640px) { .pdf-btn { width: auto; } }
.day-sums { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.day-sum { border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 3px; }
.day-sum strong { font-size: 13px; font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 0.4px; }
.day-sum span { font-size: 13px; font-weight: 600; color: var(--muted); }
.day-sum span b { color: var(--text); }
.day-sum.holiday { background: #FFF7ED; border-color: #FED7AA; }
.day-sum.holiday span { color: #9A3412; }
html.dark .day-sum.holiday { background: #2A1A0E; border-color: #6B3A16; }
html.dark .day-sum.holiday span { color: #FDBA74; }
.order-rows { display: flex; flex-direction: column; gap: 10px; }
.order-row { border: 1px solid var(--border); border-radius: 18px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.order-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.order-row-head > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.order-row-head strong { font-size: 15px; font-weight: 800; color: var(--text); }
.order-row-head span { font-size: 12px; font-weight: 600; color: var(--muted); }
.order-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.o-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.o-day { border-radius: 12px; padding: 6px 4px; background: var(--surface-2); font-size: 12px; font-weight: 800; color: var(--text); text-align: center; display: flex; flex-direction: column; gap: 1px; line-height: 1.15; overflow-wrap: anywhere; }
.o-day small { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.o-day i { font-style: normal; font-size: 10px; color: #C2410C; }
.o-day.holiday { background: #FFEDD5; color: #9A3412; }
.o-day.empty { color: var(--muted); }
html.dark .o-day.holiday { background: #3A2312; color: #FDBA74; }
.o-notes { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.empty-note { text-align: center; color: var(--muted); font-weight: 600; padding: 12px; }

/* ADM Dev: ferramentas */
.tools-title { margin: 4px 0 8px; font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tool-tile { border: 1px solid var(--border); border-radius: 18px; padding: 12px; background: var(--surface); color: var(--text); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; cursor: pointer; min-height: 0 !important; }
.tool-tile.hidden { display: none; }
.tool-text { display: flex; flex-direction: column; gap: 2px; }
.tool-text strong { font-size: 14px; font-weight: 800; }
.tool-text span { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.mini-icon.danger { background: #FEE2E2; color: #B91C1C; }
html.dark .mini-icon.danger { background: #3B1414; color: #FCA5A5; }

/* ADM Dev: inteligência artificial */
.ai-panel { display: flex; flex-direction: column; gap: 10px; }
.ai-status { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chip { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.ai-chip.on { background: #DCFCE7; color: #166534; }
html.dark .ai-chip.on { background: #0F2E1F; color: #86EFAC; }
.ai-section { margin: 6px 0 0; font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
.ai-help { margin: 0; font-size: 13px; color: var(--muted); }
.seg-wrap { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg-wrap button { min-height: 44px; white-space: normal; line-height: 1.2; }
.ai-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ai-models label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.ai-models select { padding: 0 12px; }
.ai-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-actions button { flex: 1 1 160px; }
.ai-test-result { border: 1px solid var(--border); border-radius: 14px; padding: 12px; font-size: 14px; color: var(--text); background: var(--surface-2); }
.ai-test-result.hidden { display: none; }
.ai-test-result ul { margin: 6px 0 0; padding-left: 18px; }
.ai-key-form { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-key-form input { flex: 1 1 200px; min-width: 0; padding: 0 14px; }

/* ADM Funcionários */
#employee-management-section .mb-4 > .flex { gap: 8px; }
.emp-search { flex: 1 1 auto; min-width: 0; padding: 0 14px; }
.emp-add { min-height: 48px; padding: 0 14px; flex-shrink: 0; }
.emp-count { margin: 4px 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.emp-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.emp-info { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
.emp-info strong { font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-info span { font-size: 12px; font-weight: 600; color: var(--muted); }
.emp-row .btn-ghost { min-height: 36px; padding: 0 10px; }
.emp-form { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-2); }
.emp-form.hidden { display: none; }
.emp-form input { padding: 0 14px; }

/* ADM RGF */
#rgf-consult-form input { padding: 0 14px; }
#rgf-consult-section > p { color: var(--muted) !important; }

/* Janela Próxima semana: dias de feriado grandes e fáceis de tocar */
#holidayCalendar { gap: 6px !important; }
#holidayCalendar > div { width: 100% !important; height: auto !important; min-height: 30px; border-radius: 10px !important; background: transparent !important; font-weight: 700 !important; }
#holidayCalendar > [data-day-id] { min-height: 52px; font-size: 17px; font-weight: 800 !important; border-radius: 14px !important; background: var(--surface-2) !important; color: var(--text) !important; cursor: pointer; }
#holidayCalendar > [data-day-id].bg-red-500 { background: #F97316 !important; color: #FFFFFF !important; }

#orders-section > div:first-child { align-items: flex-start !important; }

/* Campos dentro da janela do ADM (ela fica fora do #app-container) */
#adm-pop input[type="text"], #adm-pop input[type="password"], #adm-pop input[type="tel"], #adm-pop input[type="number"], #adm-pop select, #adm-pop textarea {
  min-height: 48px;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background-color: var(--surface) !important;
  color: var(--text) !important;
  font-size: 15px;
  padding: 0 14px;
}
#adm-pop textarea { padding: 12px 14px; }
#adm-pop select { appearance: auto; }
#adm-pop input:focus, #adm-pop select:focus, #adm-pop textarea:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(47, 91, 234, 0.18) !important; }
#adm-pop button.rounded-lg, #adm-pop button.rounded { min-height: 44px; border-radius: 14px !important; font-weight: 800 !important; }

.emp-info strong { white-space: normal; overflow: visible; line-height: 1.25; }
#holidayCalendar > * { width: 100% !important; }

/* ===== Almoço de hoje (Início) ===== */
.today-card {
  background: linear-gradient(135deg, var(--primary-soft), var(--surface) 70%);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.today-card.hidden { display: none; }
.today-head { display: flex; align-items: center; gap: 12px; }
.today-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.today-kicker { font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--primary-text); }
.today-dish { font-size: 21px; font-weight: 800; color: var(--text); margin-top: 2px; }
.today-sub { font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.today-sub:empty { display: none; }
.today-card.holiday { background: linear-gradient(135deg, #FFF7ED, var(--surface) 70%); }
html.dark .today-card.holiday { background: linear-gradient(135deg, #2A1A0E, var(--surface) 70%); }
.today-card.holiday .today-kicker { color: #C2410C; }
html.dark .today-card.holiday .today-kicker { color: #FDBA74; }
.today-photo { position: relative; padding: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.today-photo.hidden { display: none; }
.today-photo img { display: block; width: 100%; max-height: 260px; object-fit: cover; object-position: top; }
.today-photo span { position: absolute; right: 8px; bottom: 8px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(15, 23, 42, .7); padding: 4px 10px; border-radius: 999px; }

/* ===== Pedido compacto: foto grande e todos os dias sem rolar ===== */
#order-wizard { gap: 6px; }
#order-wizard-container { padding: 8px 10px; }
#order-wizard .day-chips { gap: 5px; }
#order-wizard .day-chip { min-height: 40px; border-radius: 12px; padding: 2px 0; gap: 0; }
#order-wizard .chip-day { font-size: 10px; line-height: 1.1; }
#order-wizard .chip-date { font-size: 15px; }
#order-wizard .chip-mark { height: 11px; font-size: 9px; }
#order-wizard .chip-mark svg { width: 11px; height: 11px; }
#order-wizard .chip-mark:empty { display: none; }
#order-wizard .wizard-head { align-items: center; }
#order-wizard #wizard-day-title { font-size: 15px; letter-spacing: 0; }
#order-wizard #wizard-day-hint { display: none; }
#order-wizard .wizard-head { flex-wrap: wrap; row-gap: 0; }
#order-wizard .wizard-garnish { margin: 0; font-size: 12.5px; text-align: right; flex: 1 1 auto; min-width: 0; }
#order-wizard .holiday-note { padding: 10px 12px; border-radius: 14px; }
#order-wizard .holiday-note svg { width: 22px; height: 22px; }
#order-wizard .option-grid { gap: 6px; }
#order-wizard .option-card {
  min-height: 46px;
  border-radius: 14px;
  padding: 5px 26px 5px 10px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}
#order-wizard .option-icon { display: none; }
#order-wizard .option-text { gap: 0; }
#order-wizard .option-name { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
#order-wizard .option-card .option-desc:not(.dish) { display: none; }
#order-wizard .option-desc.dish {
  font-size: 13.5px; font-weight: 800; color: var(--text); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Opção fixa (sem prato digitado): o nome vira o texto principal */
#order-wizard .option-card .option-text:not(:has(.dish)) .option-name { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--text); }
#order-wizard .option-card.selected .option-name { color: var(--primary-text); }
#order-wizard .option-check { top: 50%; right: 6px; transform: translateY(-50%); width: 18px; height: 18px; }
#order-wizard .option-check svg { width: 11px; height: 11px; }
/* Observação só quando pedir */
#order-wizard #wizard-notes-label { display: none; }
#order-wizard.notes-open #wizard-notes-label:not(.hidden) { display: flex; }
#order-wizard #wizard-notes { min-height: 40px; font-size: 14px; }
.notes-toggle {
  flex-shrink: 0; min-height: 40px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font-size: 13px; font-weight: 800; cursor: pointer;
}
.notes-toggle.has-note { color: var(--primary-text); border-color: var(--primary); background: var(--primary-soft); }
.notes-toggle.hidden { display: none; }
#order-wizard .wizard-footer { padding-top: 6px; gap: 10px; }
#order-wizard #wizard-progress-text { font-size: 12px; }
#order-wizard .wizard-next { min-height: 44px; padding: 0 16px; border-radius: 14px; font-size: 15px; }

/* Tela normal: a foto ocupa o que sobra da tela acima do pedido */
#menu-image-container { margin-bottom: 8px !important; }
#order-section #menu-image { max-height: max(260px, calc(100dvh - 425px)) !important; }

/* Tela cheia: foto com ~70% da altura; zoom e fechar flutuam sobre a foto */
#menu-viewer-modal > div:first-child {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  background: transparent !important; pointer-events: none;
}
#menu-viewer-buttons { padding: 10px 12px calc(10px + var(--sab)) !important; border-radius: 20px 20px 0 0; }
#menu-viewer-buttons #order-wizard-container { padding: 0; border: 0; background: transparent; margin: 0; }
#order-section { scroll-margin-top: calc(var(--sat) + 74px); }
#order-wizard #wizard-progress-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Celular pequeno: na tela cheia some a linha do dia (o chip ativo já mostra) */
@media (max-height: 680px) {
  #menu-viewer-buttons #order-wizard .wizard-head { display: none; }
  #menu-viewer-buttons { max-height: 52vh !important; padding-top: 8px !important; }
}

/* Barra de cima da tela de pedido/foto: voltar, título e zoom */
#menu-viewer-modal .viewer-top {
  display: flex; align-items: center; gap: 8px;
  padding: calc(var(--sat) + 10px) 12px 0 !important;
}
#menu-viewer-modal .viewer-top button { pointer-events: auto; }
#menu-viewer-modal #viewer-close-btn.viewer-back {
  width: auto !important; height: 40px !important; padding: 0 14px 0 8px; gap: 4px;
  display: inline-flex; align-items: center; border: 0; border-radius: 999px;
  background: var(--surface) !important; color: var(--text) !important;
  font-size: 15px; font-weight: 800; box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
}
#menu-viewer-modal .viewer-back svg { width: 22px; height: 22px; }
.viewer-title {
  flex: 0 1 auto; min-width: 0; margin: 0 auto; padding: 7px 12px; border-radius: 999px;
  background: var(--surface); box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
  font-size: 13px; font-weight: 800; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.viewer-title:empty { visibility: hidden; }
.viewer-zoom {
  display: inline-flex; align-items: center; height: 40px; padding: 0 2px; border-radius: 999px;
  background: var(--surface); box-shadow: 0 4px 14px rgba(15, 23, 42, .18); pointer-events: auto;
}
#menu-viewer-modal .viewer-zoom button, #menu-viewer-modal #viewer-zoom-out, #menu-viewer-modal #viewer-zoom-in {
  width: 38px !important; height: 36px !important; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important; color: var(--text) !important;
}
#menu-viewer-modal .viewer-zoom button + button:not(.hidden) { border-left: 1px solid var(--border); border-radius: 0 999px 999px 0; }
#menu-viewer-modal .viewer-zoom button svg { width: 18px; height: 18px; }
#menu-viewer-modal .viewer-zoom .hidden { display: none; }
html.dark #menu-viewer-modal #viewer-close-btn.viewer-back, html.dark .viewer-zoom { box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
#menu-viewer-buttons:not(:has(*)) { display: none; }

/* ===== Visor de PDF dentro do app (igual ao do FR): páginas na tela, botões embaixo ===== */
#pdf-visor { position: fixed; inset: 0; z-index: 1600; display: flex; flex-direction: column; background: var(--bg); }
#pdf-visor.hidden { display: none; }
.pdfv-top { display: flex; align-items: center; gap: 10px; padding: calc(var(--sat) + 10px) 12px 10px; background: var(--surface); border-bottom: 1px solid var(--border); }
.pdfv-top strong { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdfv-pages { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; -webkit-overflow-scrolling: touch; }
.pdfv-pages canvas { width: 100%; max-width: 900px; height: auto; flex: none; background: #fff; border-radius: 8px; box-shadow: 0 2px 14px rgba(15, 23, 42, 0.2); }
.pdfv-wait { margin: auto; text-align: center; color: var(--muted); font-weight: 600; }
.pdfv-wait .pdfv-spin { width: 34px; height: 34px; margin: 0 auto 12px; border-radius: 50%; border: 4px solid var(--border); border-top-color: var(--primary); animation: pdfv-gira 0.8s linear infinite; }
@keyframes pdfv-gira { to { transform: rotate(360deg); } }
.pdfv-actions { display: flex; gap: 8px; padding: 10px 12px calc(10px + var(--sab)); background: var(--surface); border-top: 1px solid var(--border); }
.pdfv-actions button { flex: 1; min-height: 46px; }
body.pdf-open { overflow: hidden; }

/* ===== Botões do topo: instalar e notificações (site) ===== */
.icon-btn.hidden { display: none; }
#notifyBtn.is-on { color: #15803D; border-color: #86EFAC; }
html.dark #notifyBtn.is-on { color: #86EFAC; border-color: #166534; }
#notifyBtn.is-off { color: #B45309; }
html.dark #notifyBtn.is-off { color: #FBBF24; }
#app-topbar .brand > div { overflow: hidden; }
#app-topbar .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  #app-topbar .top-actions { gap: 6px; }
}

/* ===== Tela de pedido (reclamações de funcionários) ===== */
/* Foto: o palco começa abaixo da barra flutuante (voltar/título/zoom) e a imagem fica
   centrada no espaço livre, sem subir para debaixo dos botões */
#menu-viewer-stage { padding-top: calc(var(--sat) + 62px); padding-bottom: 6px; box-sizing: border-box; }
/* Instrução do dia visível e cartões maiores para tocar */
#order-wizard #wizard-day-hint { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); }
#order-wizard #wizard-day-hint.hidden { display: none; }
#order-wizard .option-grid { gap: 8px; }
#order-wizard .option-card { min-height: 56px; }
#order-wizard .option-card .option-text:not(:has(.dish)) .option-name { font-size: 15px; }
/* Feriado na fileira de dias: só informa (botão desativado, o pedido pula esse dia) */
#order-wizard .day-chip:disabled { cursor: default; opacity: 1; }

/* Botão ADM do topo: quando o painel está aberto o botão fica destacado (toque de novo para voltar) */
#switchToAdmin[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-text); }

/* ===== Cores das opções de almoço (sempre as mesmas, na tela de pedido e nos resumos) =====
   0 Prato Principal = azul · 1 Opção = violeta · 2 Omelete = âmbar · 3 Filé de frango = verde */
[data-opt="0"] { --o: #2F5BEA; --o-soft: #EAF0FF; --o-bd: #BFD0FB; --o-ink: #1D3FB8; }
[data-opt="1"] { --o: #7C3AED; --o-soft: #F2ECFF; --o-bd: #D8C8FA; --o-ink: #5B21B6; }
[data-opt="2"] { --o: #D97706; --o-soft: #FFF3DA; --o-bd: #F5D89B; --o-ink: #8A4A05; }
[data-opt="3"] { --o: #16A34A; --o-soft: #E6F7EC; --o-bd: #B7E3C7; --o-ink: #146C34; }
html.dark [data-opt="0"] { --o: #5B7FF5; --o-soft: #1A2650; --o-bd: #2D3F7E; --o-ink: #B9CAFF; }
html.dark [data-opt="1"] { --o: #9B6BF2; --o-soft: #2A1E4D; --o-bd: #45337E; --o-ink: #D9C6FF; }
html.dark [data-opt="2"] { --o: #E8921B; --o-soft: #3A2A0E; --o-bd: #6B4A14; --o-ink: #FFD591; }
html.dark [data-opt="3"] { --o: #2DBE63; --o-soft: #12301F; --o-bd: #1F5A38; --o-ink: #9BE9B8; }

/* Botões de escolha: emoji em cima, nome centralizado, cor da opção; selecionado vira cor cheia */
#order-wizard .option-card {
  flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 74px; padding: 8px 8px; text-align: center;
  background: var(--o-soft); border: 2px solid var(--o-bd); color: var(--o-ink);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease;
}
#order-wizard .option-card:hover { border-color: var(--o); }
#order-wizard .option-card:active { transform: scale(.96); }
#order-wizard .option-emoji { font-size: 26px; line-height: 1; }
#order-wizard .option-text { align-items: center; }
#order-wizard .option-card .option-text:not(:has(.dish)) .option-name { font-size: 15px; font-weight: 800; color: var(--o-ink); text-align: center; }
#order-wizard .option-card.selected {
  background: var(--o); border-color: var(--o); color: #fff;
  box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--o) 70%, transparent);
  animation: opt-pop .28s cubic-bezier(.34, 1.56, .64, 1);
}
#order-wizard .option-card.selected .option-name { color: #fff !important; }
#order-wizard .option-card.selected .option-emoji { animation: opt-emoji .42s ease; }
/* "✓" no canto: não depende só da cor para mostrar o que foi escolhido */
#order-wizard .option-check {
  top: 6px; right: 6px; transform: none; width: 20px; height: 20px;
  background: #fff; color: var(--o); box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
  animation: opt-check .3s cubic-bezier(.34, 1.56, .64, 1) .04s both;
}
#order-wizard .option-check svg { width: 12px; height: 12px; }
@keyframes opt-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes opt-emoji { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.25) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes opt-check { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  #order-wizard .option-card, #order-wizard .option-card.selected, #order-wizard .option-emoji,
  #order-wizard .option-check { animation: none !important; transition: none !important; }
}

/* Chip colorido da opção nos resumos (pedido feito, revisão e tela de sucesso) */
.summary-label[data-opt] {
  display: inline-block; align-self: flex-end; padding: 2px 9px; border-radius: 999px;
  background: var(--o-soft); color: var(--o-ink); border: 1px solid var(--o-bd);
  font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: none;
}
.summary-dish { margin-top: 3px; }

/* Tela de sucesso: lista da semana com os pratos */
.success-week { width: 100%; text-align: left; margin: 4px 0 6px; }
.success-week h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }