/* ==========================================================================
   MS Hotels · Revenue — aspeto "Liquid Glass" (manual de design)
   Carregado no fim do <head> de todas as páginas, depois do <style> de cada uma:
   só muda o aspeto (cores, letra, espaços, sombras, cantos, movimento), nunca o comportamento.
   As variáveis antigas das páginas (--bg, --panel, --fg, --muted, --brand…) passam a apontar
   para os tokens do manual, por isso os estilos de cada página herdam a nova paleta.
   ========================================================================== */

/* :root:not(#_) ganha aos :root das páginas (incluindo o modo escuro, que o manual não prevê) */
:root:not(#_) {
  /* texto */
  --text: #10393f; --text2: #6f675b; --text3: #a79e8e;
  /* marca */
  --escuro: #10393f; --escuro-2: #0c2b30;
  --accent: #a8794f; --accent-hover: #916545; --accent-soft: #f4ece1;
  /* superfícies e linhas */
  --creme: #f6f2ea; --quente: #f1ebdf; --quente-2: #e6dcc9; --tabela: #ede6d7;
  --line: #e8e0d2; --linha-forte: #d8cdb9;
  /* estados */
  --green: #2c7a5c; --green-soft: #e6f0ea;
  --amber: #b1740f; --amber-soft: #faefdd;
  --blue: #14606b; --blue-soft: #e4eef0;
  --red: #b2453c; --red-soft: #f9e8e4;
  /* forma */
  --radius: 24px; --radius-s: 14px;
  /* vidro */
  --vidro: linear-gradient(150deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.64) 52%, rgba(246,239,227,.70) 100%);
  --vidro-borda: rgba(255,255,255,.80);
  --vidro-luz: inset 0 1px 0 rgba(255,255,255,.95);
  --vidro-sombra: 0 1px 2px rgba(16,57,63,.04), 0 12px 34px rgba(16,57,63,.08);
  --desfoque: blur(22px) saturate(170%);
  /* movimento */
  --mola: cubic-bezier(.22,1,.36,1);
  /* fundo */
  --fundo:
    radial-gradient(62vw 58vh at 4% 0%, rgba(120,175,164,.30), transparent 70%),
    radial-gradient(58vw 62vh at 100% 100%, rgba(214,184,146,.30), transparent 70%),
    radial-gradient(42vw 42vh at 72% 18%, rgba(255,255,255,.85), transparent 72%),
    linear-gradient(180deg, #f5f7f4, #f8f5ef);
  --gill: "Gill Sans", "Gill Sans MT", "Gill Sans Nova", GillSans, Calibri, Optima, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* variáveis antigas das páginas → tokens */
  --bg: var(--creme); --panel: #ffffff; --fg: var(--text); --muted: var(--text2); --input: rgba(255,255,255,.80);
  --brand: var(--escuro); --ink: var(--escuro); --shadow: var(--vidro-sombra);
  --pos: var(--green); --neg: var(--red); --warn: var(--amber); --otb: var(--blue); --ev: var(--blue);
  --b26: var(--linha-forte); --edit: var(--amber-soft); --edit-line: var(--amber); --heat: var(--blue);
  --ch-b26: var(--linha-forte); --ch-otb: var(--blue); --ch-b27: var(--accent);
  --w-yellow: var(--amber); --w-orange: var(--accent); --w-red: var(--red);
  --font-body: var(--gill); --font-display: var(--gill);
  --r: var(--radius);
  color-scheme: light;
}

/* ---------- fundo e tipografia */
html body {
  background: var(--fundo); background-attachment: fixed; color: var(--text);
  font-family: var(--gill); font-size: 14.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html body h1 { font-family: var(--gill); font-weight: 700; letter-spacing: -.02em; color: var(--text); }
html body h2, html body h3 { font-family: var(--gill); }
html body .hello h2 { font-weight: 700; letter-spacing: -.02em; color: var(--text); }
html body .hello p { color: var(--text2); }

/* ---------- topo: faixa de vidro (o mesmo cabeçalho, sem a faixa escura) */
html body header.top {
  background: var(--vidro); color: var(--text);
  border: 1px solid var(--vidro-borda); border-radius: var(--radius);
  box-shadow: var(--vidro-luz), var(--vidro-sombra);
  -webkit-backdrop-filter: var(--desfoque); backdrop-filter: var(--desfoque);
  padding: 18px 24px;
}
html body header.top h1 { color: var(--text); }
html body header.top .status, html body header.top .who { color: var(--text3); }
html body header.top .status.err { color: var(--red); }
html body header.top .who b { color: var(--text); font-weight: 600; }
html body header.top a.who { color: var(--accent); }

/* ---------- cartões e indicadores */
html body .card, html body .tool, html body .city, html body .hl, html body .kpi, html body .unitbar, html body .approvals,
html body .login-card, html body .box, html body section.panel {
  background: var(--vidro); border: 1px solid var(--vidro-borda); border-radius: var(--radius);
  box-shadow: var(--vidro-luz), var(--vidro-sombra);
  -webkit-backdrop-filter: var(--desfoque); backdrop-filter: var(--desfoque);
}
html body .card { padding: 24px; }
html body .kpi { padding: 18px 20px; border-top: 1px solid var(--vidro-borda); }
html body .unitbar, html body .approvals { padding: 14px 20px; }
html body .card h2 { font-family: var(--gill); font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
html body .card h2::before { background: var(--accent); width: 3px; height: 14px; }
html body .card .note, html body .note, html body .sub { color: var(--text3); font-size: 12px; }
html body .kpi .l { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--text2); }
html body .kpi .v { font-family: var(--gill); font-weight: 700; letter-spacing: -.02em; color: var(--text); }
html body a.tool:hover { transform: translateY(-2px); border-color: var(--vidro-borda); box-shadow: var(--vidro-luz), 0 1px 2px rgba(16,57,63,.04), 0 18px 40px rgba(16,57,63,.12); }
html body .tool .ic { border-radius: var(--radius-s); background: var(--accent-soft); color: var(--accent); }
html body .tool h3, html body .hl h2 { font-family: var(--gill); font-weight: 700; letter-spacing: -.01em; color: var(--text); }
html body .tool h3 { font-size: 17px; }
html body .hl h2 { font-size: 17px; }
html body .hl { border-top: 1px solid var(--vidro-borda); padding: 24px; }
html body .hl-it { background: rgba(255,255,255,.62); border: 1px solid var(--vidro-borda); border-radius: var(--radius-s); transition: transform .45s var(--mola), background-color .2s; }
html body a.hl-it:hover { background: rgba(255,255,255,.85); border-color: var(--vidro-borda); transform: translateY(-1px); }
html body .hl-date { border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
html body .hl-it.w-orange .hl-date { background: var(--amber-soft); color: var(--amber); }
html body .hl-it.w-red .hl-date { background: var(--red-soft); color: var(--red); }

/* ---------- tabelas */
html body .scroll { border-radius: var(--radius-s); }
html body table { font-size: 13px; }
html body thead th {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text2);
  background: var(--tabela); border-bottom: 1px solid var(--line);
}
html body th, html body td { border-bottom-color: var(--line); }
html body tbody tr:last-child td { border-bottom: 0; }
html body tbody td { transition: background-color .2s; }
html body tbody tr:hover td { background: rgba(237,230,215,.38); }
/* tabelas simples: espaço do manual (a grelha do budget mantém-se compacta para caber o ano inteiro) */
html body table:not(.mx) th, html body table:not(.mx) td { padding: 10px 14px; }
html body table:not(.mx) thead th { padding: 13px 14px; }
html body .grid { border-color: var(--line); border-radius: var(--radius-s); }
/* grelha do budget: cabeçalhos e colunas fixas com fundo opaco para o texto não se sobrepor ao deslizar */
html body table.mx thead th { font-size: 10.5px; }
html body table.mx th.mh { background: var(--tabela); color: var(--text); font-size: 12px; text-transform: none; letter-spacing: 0; border-radius: 10px 10px 0 0; }
html body th.lbl, html body td.lbl { background: #fff; }
html body table.mx tr.tot td { background: var(--creme); }
html body table.mx tbody tr:hover td { background: var(--quente); }
html body td.year { background: rgba(237,230,215,.45); }

/* ---------- botões */
html body button, html body .btn {
  font-family: var(--gill); font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 14px;
  border: 1px solid var(--vidro-borda); background: rgba(255,255,255,.62); color: var(--text);
  -webkit-backdrop-filter: var(--desfoque); backdrop-filter: var(--desfoque);
  transition: background-color .2s, box-shadow .2s, transform .45s var(--mola), color .2s;
}
html body button:hover, html body .btn:hover { background: rgba(255,255,255,.85); border-color: var(--vidro-borda); }
html body button:active:not(:disabled), html body .btn:active { transform: scale(.96); }
html body button.primary, html body header.top button.primary {
  background: var(--accent); color: #fff; border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px rgba(168,121,79,.26);
}
html body button.primary:hover { background: var(--accent-hover); border-color: transparent; }
html body button.warn, html body header.top button.warn { background: var(--red-soft); color: var(--red); border: 0; }
html body button.sm, html body .approvals button { font-size: 12px; padding: 5px 10px; border-radius: 8px; }
html body button.ghost { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--text3); padding: 4px 8px; }
html body button.ghost:hover { color: var(--accent); background: none; }
html body button:focus-visible, html body a:focus-visible, html body input:focus-visible, html body select:focus-visible, html body textarea:focus-visible {
  outline: 0; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent);
}
/* botões do topo: secundários de vidro (o topo já não é escuro) */
html body header.top button, html body .tools-home, html body .tools-btn {
  background: rgba(255,255,255,.62); color: var(--text); border: 1px solid var(--vidro-borda);
}
html body header.top button:hover, html body .tools-home:hover { background: rgba(255,255,255,.85); border-color: var(--vidro-borda); }
html body .tools-home { font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 14px; -webkit-backdrop-filter: var(--desfoque); backdrop-filter: var(--desfoque); transition: background-color .2s, transform .45s var(--mola); }
html body .tools-home:active { transform: scale(.96); }
html body header.top button.icon { width: 40px; height: 40px; padding: 0; border-radius: 99px; }
html body header.top button.icon[aria-pressed="true"] { background: var(--escuro); color: #fff; border-color: var(--escuro); box-shadow: 0 8px 18px rgba(16,57,63,.24); }
/* ícones: linha fina */
html body svg[stroke], html body svg [stroke] { stroke-width: 1.6; }

/* ---------- menus (Exportar, Ferramentas): mesmo vidro das janelas */
html body .menu-list, html body .tools-list {
  background: linear-gradient(160deg, rgba(255,255,255,.93), rgba(255,255,255,.86) 60%, rgba(249,244,235,.90));
  border: 1px solid rgba(255,255,255,.85); border-radius: 20px; padding: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 14px rgba(16,57,63,.08), 0 24px 60px rgba(16,57,63,.18);
  -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
}
html body header.top .menu-list button, html body .tools-list a { border-radius: 12px; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--text); padding: 10px 12px; }
html body header.top .menu-list button:hover, html body header.top .menu-list button:focus-visible, html body .tools-list a:hover, html body .tools-list a:focus-visible { background: var(--accent-soft); box-shadow: none; }
html body .tools-list a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); }
html body .menu-list button span, html body .tools-list small { color: var(--text3); }
html body .menu-list .menu-h { color: var(--text2); }

/* ---------- filtros em cápsula e etiquetas */
html body .chips button, html body .seg-toggle button, html body .tabs button {
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 99px;
  background: rgba(255,255,255,.62); border: 1px solid var(--vidro-borda); color: var(--text2);
}
html body .seg-toggle { gap: 4px; }
html body .seg-toggle button + button { margin-left: 0; }
html body .seg-toggle button:first-child, html body .seg-toggle button:last-child { border-radius: 99px; }
html body .chips button[aria-pressed="true"], html body .seg-toggle button[aria-pressed="true"], html body .tabs button[aria-selected="true"] {
  background: var(--escuro); border-color: var(--escuro); color: #fff; box-shadow: 0 8px 18px rgba(16,57,63,.24);
}
html body .tabs button[aria-selected="true"] .st { color: #fff; }
html body .tabs { gap: 6px; padding: 4px 0; }
html body .badge, html body .tag, html body .kind, html body .warn-pill, html body .imp, html body .cal-ind {
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 99px;
}
html body .badge.rascunho { background: var(--amber-soft); color: var(--amber); }
html body .badge.submetido { background: var(--blue-soft); color: var(--blue); }
html body .badge.aprovado { background: var(--green-soft); color: var(--green); }
html body .warn-pill.w-yellow { background: var(--amber-soft); color: var(--amber); }
html body .warn-pill.w-orange { background: var(--amber-soft); color: var(--accent-hover); }
html body .warn-pill.w-red { background: var(--red-soft); color: var(--red); }
html body .cal-ind { padding: 1px 8px; font-size: 10.5px; }

/* ---------- campos de formulário */
html body input:not([type=checkbox]):not([type=radio]), html body select, html body textarea {
  font-family: var(--gill); font-size: 14px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 13px;
  background: rgba(255,255,255,.80); color: var(--text); transition: background-color .2s, border-color .2s, box-shadow .2s;
}
html body input:not([type=checkbox]):not([type=radio]):hover, html body select:hover, html body textarea:hover { background: #fff; }
html body input:not([type=checkbox]):not([type=radio]):focus, html body select:focus, html body textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html body label.f { font-size: 12px; font-weight: 600; color: var(--text2); }
/* números da grelha do budget: os mesmos cantos e cores, no tamanho compacto da grelha */
html body input.num { font-size: 12px; padding: 4px 7px; border-radius: 8px; }
html body table.mx input.num { font-size: 11.5px; padding: 3px 6px; border-radius: 7px; }
html body input.num[readonly] { border-color: transparent; background: transparent; }
html body input.num.edited { background: var(--amber-soft); border-color: var(--amber); }
html body input.num.bad { border-color: var(--red); }
html body input[type=checkbox], html body input[type=radio] { accent-color: var(--escuro); }

/* ---------- janelas */
html body dialog, html body #hist-dlg .card {
  background: linear-gradient(160deg, rgba(255,255,255,.93), rgba(255,255,255,.86) 60%, rgba(249,244,235,.90));
  border: 1px solid rgba(255,255,255,.85); border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 14px rgba(16,57,63,.08), 0 34px 90px rgba(16,57,63,.24);
  -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
  color: var(--text);
}
html body #hist-dlg { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html body #hist-dlg .card { padding: 26px; }
html body .dlg { padding: 26px; }
html body .dlg h2, html body #hist-dlg h2 { font-family: var(--gill); font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
html body dialog::backdrop { background: rgba(16,57,63,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html body fieldset { border: 1px solid var(--line); border-radius: var(--radius-s); }

/* ---------- avisos e dicas */
html body .tip { background: rgba(16,57,63,.88); color: #fff; border: 0; border-radius: var(--radius-s); box-shadow: 0 12px 30px rgba(16,57,63,.24); }
html body .tip .t { color: rgba(255,255,255,.72); }

/* ---------- cidades (radar, início, calendário): a cor de cada cidade vem de UNIT_COLOR, já na paleta */
html body .code { background: var(--c); border-radius: 8px; }
html body .city { overflow: hidden; }
html body .city-head { background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 70%, var(--escuro-2))); }
html body .wx .d { border-radius: 12px; }
html body .kind { border: 0; }
html body .kind.k-meteorologia { color: var(--blue); background: var(--blue-soft); }
html body .kind.k-concerto { color: var(--red); background: var(--red-soft); }
html body .kind.k-desporto { color: var(--green); background: var(--green-soft); }
html body .kind.k-congresso { color: var(--escuro); background: var(--tabela); }
html body .kind.k-atualidade { color: var(--amber); background: var(--amber-soft); }
html body .kind.k-noticia, html body .kind.k-outro { color: var(--text2); background: var(--quente); }
html body .imp { padding: 0; }
html body .imp.i-alto { color: var(--red); } html body .imp.i-medio { color: var(--accent); } html body .imp.i-baixo { color: var(--text3); }
/* calendário: eventos em verde-petróleo, promoções em bronze */
html body .it { border-radius: 8px; }
html body .grid .day.today .n { background: var(--escuro); }
html body .grid .wd { background: var(--tabela); color: var(--text2); }

/* ---------- rodapé */
html body .foot { color: var(--text3); }

/* ---------- movimento */
@media (prefers-reduced-motion: no-preference) {
  html body dialog[open] { animation: vidro-abrir .62s var(--mola) both; }
  html body .card, html body .tool, html body .city, html body .kpi, html body .hl { animation: vidro-subir .62s var(--mola) both; }
  @keyframes vidro-abrir { from { opacity: 0; transform: translateY(22px) scale(.96); } }
  @keyframes vidro-subir { from { opacity: 0; transform: translateY(10px); } }
}
@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after { animation: none !important; transition: none !important; }
}

/* ---------- impressão: sem vidro nem névoa */
@media print {
  html body { background: #fff; }
  html body .card, html body .kpi, html body header.top { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; background: #fff; }
}