/* Identidade comum a todos os painéis do Alter CRM: tokens de cor, tamanho e fonte
   que a página de cada cliente usa, e a casca (topo, entrada, lista). */
:root {
  --color-bg: #faf9f5;
  --color-panel: #ffffff;
  --color-fg: #1f1e1d;
  --color-fg-muted: #6b6a68;
  --color-border-line: #e4e1d8;
  --color-ok: #3d7a4a;
  --color-warn: #b7791f;
  --color-bad: #b3412e;
  --cds-border: #d6d2c6;
  --cds-chart-grid: #ece9e0;
  --cds-chart-muted: #bdb9ac;
  --cds-chart-status-critical: #b3412e;
  --cds-surface-popover: #ffffff;
  --cds-text-secondary: #6b6a68;
  --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.12);
  --cds-radius: 10px;
  --cds-gap-xs: 4px;
  --cds-gap-sm: 8px;
  --cds-gap-md: 12px;
  --cds-gap-lg: 20px;
  --cds-pad-xs: 4px;
  --cds-pad-sm: 8px;
  --cds-pad-md: 14px;
  --cds-pad-lg: 20px;
  --cds-font-size-caption: 0.75rem;
  --cds-font-size-body: 0.875rem;
  --cds-font-size-heading: 1rem;
  --cds-font-size-title: 1.75rem;
  --cds-font-weight-medium: 500;
  --cds-dur-slow: 300ms;
  --font-anthropic-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-anthropic-serif: Georgia, "Times New Roman", serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1c1b1a;
    --color-panel: #262523;
    --color-fg: #f0eee6;
    --color-fg-muted: #a9a79f;
    --color-border-line: #3a3835;
    --color-ok: #6fbf80;
    --color-warn: #e0a84a;
    --color-bad: #e07a66;
    --cds-border: #45423e;
    --cds-chart-grid: #34322f;
    --cds-chart-muted: #5b5852;
    --cds-chart-status-critical: #e07a66;
    --cds-surface-popover: #2f2d2a;
    --cds-text-secondary: #a9a79f;
    --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }
html { background: var(--color-bg); color: var(--color-fg); }
body { margin: 0; font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-body); line-height: 1.5; background: var(--color-bg); }
a { color: inherit; }

.topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-gap-md); padding: var(--cds-pad-sm) 16px; border-bottom: 1px solid var(--color-border-line); background: var(--color-panel); }
.topo-marca { font-family: var(--font-anthropic-serif); font-size: 1rem; }
.topo-troca { display: flex; flex-wrap: wrap; gap: var(--cds-gap-xs); }
.topo-troca a { padding: 2px 10px; border-radius: 999px; text-decoration: none; color: var(--color-fg-muted); border: 1px solid transparent; }
.topo-troca a[aria-current="page"] { color: var(--color-fg); border-color: var(--color-border-line); background: var(--color-bg); }
.topo-atualizado { margin-left: auto; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
.topo-conta { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
.topo form { margin: 0; }

.painel { max-width: 1180px; margin: 0 auto; padding: 24px 16px 48px; }

.entrada { max-width: 24rem; margin: 12vh auto 0; padding: 0 16px; display: flex; flex-direction: column; gap: var(--cds-gap-md); }
.entrada h1 { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); margin: 0; }
.entrada-nota { color: var(--color-fg-muted); margin: 0; }
.entrada-erro { margin: 0; color: var(--color-bad); }
.entrada form { display: flex; flex-direction: column; gap: var(--cds-gap-md); margin: 0; }
.entrada label { display: flex; flex-direction: column; gap: var(--cds-gap-xs); color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
.entrada input { font: inherit; font-size: 1rem; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--cds-border); background: var(--color-panel); color: var(--color-fg); }
.entrada input:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 1px; }
.lista-paineis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cds-gap-sm); }
.lista-paineis a { display: block; padding: 12px 14px; border-radius: var(--cds-radius); border: 1px solid var(--color-border-line); background: var(--color-panel); text-decoration: none; }
.lista-paineis a:hover { border-color: var(--color-fg-muted); }

.botao { font: inherit; display: inline-block; text-align: center; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--color-fg); background: var(--color-fg); color: var(--color-bg); cursor: pointer; text-decoration: none; }
.botao-secundario { background: transparent; color: var(--color-fg); border-color: var(--cds-border); }
.botao-pequeno { padding: 2px 10px; font-size: var(--cds-font-size-caption); }
.botao:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }

/* O atributo hidden precisa vencer o display das classes da página (o modal dos criativos usa display:flex). */
[hidden] { display: none !important; }

/* Entrada: senha com botão de mostrar e opção de manter conectado. */
.campo-senha { position: relative; display: block; }
.campo-senha input { width: 100%; padding-right: 5.5rem; }
.botao-ver { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: inherit; font-size: var(--cds-font-size-caption); padding: 4px 10px; border-radius: 6px; border: 1px solid var(--cds-border); background: var(--color-bg); color: var(--color-fg); cursor: pointer; }
.botao-ver:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
.entrada label.opcao { flex-direction: row; align-items: center; gap: var(--cds-gap-sm); color: var(--color-fg); font-size: var(--cds-font-size-body); }
.entrada label.opcao input { width: 1rem; height: 1rem; padding: 0; }