/* Tokens, reset e componentes do painel. Copiado do base.css do Uplift (28/10/2026): tokens,
   alertas, cards, tabelas, botoes, formularios, badges, filtros, avisos flutuantes e paginas
   de documento. O CSS das telas do Uplift ficou de fora; o daqui mora no fim do arquivo. */

* { box-sizing: border-box; }

:root {
    --bg: #f4f6fb;
    --card: #ffffff;
    --topbar-bg: #f4f6fb;
    --border: #e3e6ee;
    --text: #16171d;
    --text-muted: #6f7384;
    --link: #2f5bff;
    --link-hover: #1f45d6;
    --accent: #2f5bff;
    --accent-hover: #1f45d6;
    --accent-soft: #e3e9ff;
    --sidebar-bg: #ffffff;
    --sidebar-bg-hover: #f4f6fb;
    --sidebar-bg-active: #e3e9ff;
    --sidebar-text: #16171d;
    --sidebar-border: #e3e6ee;
    --input-bg: #f4f6fb;
    --shadow: 0 1px 2px rgba(22, 23, 29, .06);
    --radius: 16px;
    --botao: #16171d;
    --botao-texto: #ffffff;
    --botao-hover: #2b2d36;
    --raio-cartao: 16px;
    --raio-campo: 12px;
    --sidebar-w: 248px;
    --sidebar-w-collapsed: 72px;
    /* Altura util da barra inferior do celular, SEM o safe-area inset — quem precisa da
       altura total soma o env() por cima.

       Mora aqui, e nao em cada shell, porque os dois desenham a mesma barra e porque
       quatro lugares dependem deste numero: a barra, o padding do conteudo, a folha
       "Mais" e o painel deslizante. Enquanto era 60px escrito a mao em cada um, eles
       discordavam entre si — a barra tratava o inset como espaco de dentro e os outros
       como espaco de fora, e os icones vazavam para cima da barra. */
    --barra-inferior-h: 60px;
}

:root[data-theme="dark"] {
    --bg: #0f1117;
    --card: #181b24;
    --topbar-bg: #0f1117;
    --border: #272b38;
    --text: #eef0f6;
    --text-muted: #9aa0b4;
    --link: #8aa2ff;
    --link-hover: #b3c2ff;
    --accent: #5b7cff;
    --accent-hover: #8aa2ff;
    --accent-soft: #1d2647;
    --sidebar-bg: #141720;
    --sidebar-bg-hover: #1c2030;
    --sidebar-bg-active: #1d2647;
    --sidebar-text: #eef0f6;
    --sidebar-border: #272b38;
    --input-bg: #11141c;
    --shadow: 0 1px 3px rgba(0, 0, 0, .5);
    --botao: #eef0f6;
    --botao-texto: #0f1117;
    --botao-hover: #ffffff;
}

html, body { height: 100%; height: -webkit-fill-available; }

body {
    margin: 0;
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; font-weight: 600; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* ---------- Alerts ---------- */
.alert { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1.25rem; font-size: 0.9rem; }
.alert-success { background: #e4f8ec; color: #167c3c; }
.alert-error { background: #fdecea; color: #c0392b; }
:root[data-theme="dark"] .alert-success { background: #12301f; color: #4fd486; }
:root[data-theme="dark"] .alert-error { background: #3a1a1a; color: #ff8a80; }

/* ---------- Cards ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.35rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
}

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--accent-soft); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
}
/* A cor precisa ser reposta aqui, e nao so no .btn: o botao quase sempre e um <a>, e
   "a:hover" (0,1,1) tem especificidade maior que ".btn" (0,1,0). Sem esta linha, no hover
   a cor do link vencia a do botao e o texto virava --link-hover sobre --accent-hover: no
   shell GA as duas sao literalmente a mesma cor, e o rotulo sumia. */
.btn:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
.btn-secondary { background: var(--accent-soft); color: var(--accent-hover); }
.btn-secondary:hover { background: var(--border); color: var(--accent-hover); }
.btn-link {
    background: none; border: none; color: var(--accent-hover);
    cursor: pointer; padding: 0; font-size: 0.86rem; font-weight: 600; font-family: inherit;
}
.btn-link:hover { text-decoration: underline; }

.actions { display: flex; gap: 0.75rem; align-items: center; }

/* Numa celula de tabela o display:flex acima faz estrago: ele tira o <td> do layout da
   tabela, o navegador o envolve numa celula anonima, e a borda inferior passa a ser
   desenhada na base da caixa flex — que tem a altura do conteudo, nao a da linha. O
   resultado e a divisoria da coluna de acoes alguns pixels acima das vizinhas, um degrau
   que comeca exatamente onde comeca aquela coluna.

   Aqui a celula volta a ser celula e os itens se alinham pelo fluxo inline (o
   form.inline logo abaixo e o que os mantem lado a lado). Especificidade maior que
   .actions, entao vence sem depender da ordem — e os usos em <div>, dentro dos
   formularios, continuam com o flex, que ali esta certo. */
td.actions {
    display: table-cell;
    white-space: nowrap;
}
td.actions > * { vertical-align: middle; }
td.actions > * + * { margin-left: 0.75rem; }
form.inline { display: inline; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.86rem; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--text);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-group { flex: 1 1 160px; }
.form-hint { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.3rem; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 700;
}
.badge-alta { background: #fdecea; color: #c0392b; }
.badge-media { background: #fff2dc; color: #a5620a; }
.badge-baixa { background: var(--border); color: var(--text-muted); }
/* Presenca de pessoa, nao estado de tarefa: classe propria mesmo coincidindo hoje em cor
   com a .badge-concluida, para que uma nao arraste a outra quando divergirem. */
.badge-online { background: #e4f8ec; color: #167c3c; }

.badge-a_fazer { background: var(--border); color: var(--text-muted); }
.badge-em_andamento { background: var(--accent-soft); color: var(--accent-hover); }
.badge-aguardando_cliente { background: #fff2dc; color: #a5620a; }
.badge-em_aprovacao { background: #fff2dc; color: #a5620a; }
.badge-concluida { background: #e4f8ec; color: #167c3c; }
:root[data-theme="dark"] .badge-alta { background: #3a1a1a; color: #ff8a80; }
:root[data-theme="dark"] .badge-media { background: #3a2c10; color: #ffcb7a; }
:root[data-theme="dark"] .badge-em_aprovacao { background: #3a2c10; color: #ffcb7a; }
:root[data-theme="dark"] .badge-concluida { background: #12301f; color: #4fd486; }
:root[data-theme="dark"] .badge-online { background: #12301f; color: #4fd486; }

/* ---------- Filters ---------- */
.filters { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.filters select {
    padding: 0.5rem 0.7rem; border-radius: 8px; border: 1px solid var(--border);
    background: var(--input-bg); color: var(--text); font-size: 0.86rem; font-family: inherit;
}

.section-title { margin: 1.75rem 0 0.75rem; font-size: 0.98rem; font-weight: 700; color: var(--text); }
.empty { color: var(--text-muted); font-style: italic; padding: 1rem 0; }
.meta-line { color: var(--text-muted); font-size: 0.92rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.25rem; }

/* ---------- Profile ---------- */
.avatar-lg {
    width: 88px; height: 88px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-hover);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 2rem; overflow: hidden; flex-shrink: 0;
}
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.profile-header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 0.5rem; }


/* Notificacoes flutuantes (partials/flash.php + toast.js). Desktop: canto superior direito,
   abaixo da barra do topo. Celular: logo acima da barra de baixo, na largura da tela. */
.toasts { position: fixed; top: 72px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: .5rem; width: min(380px, calc(100vw - 40px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .8rem; border-radius: 10px; background: var(--card); color: var(--text); border: 1px solid var(--border); border-left: 4px solid; box-shadow: 0 8px 24px rgba(20, 20, 45, .18); font-size: .9rem; line-height: 1.4; animation: toast-entra .25s ease-out; }
.toast.saindo { opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }
.toast-success { border-left-color: #167c3c; }
.toast-error { border-left-color: #c0392b; }
.toast-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-weight: 700; font-size: .8rem; }
.toast-success .toast-icone { background: #167c3c; }
.toast-error .toast-icone { background: #c0392b; }
.toast-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-fechar { flex: none; background: none; border: 0; color: var(--text-muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .1rem; }
.toast-fechar:hover { color: var(--text); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
    .toasts { top: auto; right: 12px; left: 12px; width: auto; bottom: calc(var(--barra-inferior-h, 60px) + 12px + env(safe-area-inset-bottom, 0px)); }
    @keyframes toast-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}


/* ---------- Paginas de documento (politica de privacidade) ---------- */
/* Usa as variaveis de tema, e nao cores fixas como a tela de login: esta pagina pode ser
   aberta de dentro do painel, por quem ja escolheu o tema escuro. */

.doc-page { background: var(--bg); }

.doc {
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.65;
}

.doc-head { margin-bottom: 2.4rem; }
.doc-brand {
    display: inline-flex; align-items: center; gap: 0.6rem;
    color: var(--accent); font-weight: 700; font-size: 1.05rem;
    text-decoration: none; margin-bottom: 1.6rem;
}
.doc-mark { width: 30px; height: 30px; display: flex; }
.doc-mark svg { width: 100%; height: 100%; }

.doc h1 {
    margin: 0; font-size: 1.75rem; font-weight: 700;
    letter-spacing: -0.025em; color: var(--link-hover);
}
.doc-sub { margin: 0.4rem 0 0; color: var(--text-muted); font-size: 0.86rem; }

.doc section { margin-bottom: 2.2rem; }
.doc h2 {
    margin: 0 0 0.7rem; font-size: 1.05rem; font-weight: 700;
    color: var(--link-hover);
}
.doc p { margin: 0 0 0.9rem; }
.doc ul { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.doc li { margin-bottom: 0.4rem; }
.doc strong { color: var(--link-hover); font-weight: 600; }
.doc a { color: var(--accent); }

/* O paragrafo que o leitor precisa ver mesmo se so passar o olho. */
.doc-destaque {
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    padding: 0.9rem 1.1rem;
}

.doc-foot {
    margin-top: 3rem; padding-top: 1.4rem;
    border-top: 1px solid var(--border);
    font-size: 0.86rem;
}

/* A barra do gasto e a mais apagada das tres: ela e contexto para as outras duas, nao a
   comparacao principal. */
.des-gasto { background: var(--border); }

/* ---------- Ajustes de componente no celular ---------- */
/* Vieram do bloco de celular do shell classico, mas nunca foram shell: dizem como card,
   tabela e filtro se comportam em tela estreita, e isso vale igual com barra de abas ou
   com pilha de drawers. Deixa-los la faria o estilo GA nascer sem tabela rolavel no
   celular — foi a checagem de seletor repetido entre os dois arquivos que pegou isso. */
@media (max-width: 768px) {
    .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 560px; }
    .filters select { flex: 1 1 100%; }
    .form-row .btn { width: 100%; justify-content: center; }
}