/**
 * main.css — Estilos base do CRM MCQualis.
 * Variáveis de cor, layout sidebar + conteúdo, tabelas, botões,
 * formulários e badges de estado.
 */

/* ===== Variáveis ===== */
:root {
    --cor-primaria:        #1f6feb;
    --cor-primaria-escura: #1a5fcc;
    --cor-sidebar:         #16202e;
    --cor-sidebar-texto:   #c3ccd9;
    --cor-sidebar-ativo:   #1f6feb;
    --cor-fundo:           #f4f6f9;
    --cor-superficie:      #ffffff;
    --cor-texto:           #1f2733;
    --cor-texto-suave:     #6b7682;
    --cor-borda:           #e1e6ec;
    --cor-sucesso:         #1f9d57;
    --cor-aviso:           #d9822b;
    --cor-erro:            #d64545;

    --raio:        8px;
    --sombra:      0 1px 3px rgba(0, 0, 0, 0.08);
    --largura-sidebar: 240px;
}

/* ===== Reset leve ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* O atributo [hidden] deve esconder sempre, mesmo quando a classe do
   elemento define um display (flex/grid). O !important evita ter de
   repetir .componente[hidden] em cada caso (modal, drawer, timeline…). */
[hidden] {
    display: none !important;
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    font-size: 14px;
    line-height: 1.5;
}

/* ===== Layout principal (shell) ===== */
.app {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--largura-sidebar);
    background: var(--cor-sidebar);
    color: var(--cor-sidebar-texto);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
}

.sidebar__logo {
    padding: 20px 24px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar__nav {
    flex: 1;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
}

.sidebar__link {
    display: block;
    padding: 12px 24px;
    color: var(--cor-sidebar-texto);
    text-decoration: none;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
}

.sidebar__link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.sidebar__link.ativo {
    background: rgba(31, 111, 235, 0.15);
    border-left-color: var(--cor-sidebar-ativo);
    color: #fff;
}

.sidebar__rodape {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.conteudo {
    flex: 1;
    margin-left: var(--largura-sidebar);
    padding: 28px 32px;
}

/* ===== Botões ===== */
.btn {
    display: inline-block;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--raio);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.btn--primario {
    background: var(--cor-primaria);
    color: #fff;
}

.btn--primario:hover {
    background: var(--cor-primaria-escura);
}

.btn--secundario {
    background: var(--cor-superficie);
    color: var(--cor-texto);
    border-color: var(--cor-borda);
}

.btn--secundario:hover {
    background: var(--cor-fundo);
}

.btn--perigo {
    background: var(--cor-erro);
    color: #fff;
}

.btn--perigo:hover {
    background: #c23a3a;
}

/* Foco visível por teclado (acessibilidade) */
.btn:focus-visible,
.sidebar__link:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
}

/* ===== Formulários ===== */
.campo {
    margin-bottom: 16px;
}

.campo label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--cor-texto-suave);
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    color: var(--cor-texto);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
}

/* Linha com checkbox + texto (ex.: "lembrar-me" no login) */
.campo-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    cursor: pointer;
    color: var(--cor-texto-suave);
}

.campo-checkbox input {
    width: auto;
    margin: 0;
}

/* Texto de ajuda por baixo de um campo */
.campo__ajuda {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--cor-texto-suave);
}

/* Linha de tabela de um registo desativado (ex.: utilizador inativo) */
.linha-inativa {
    opacity: 0.55;
}

/* ===== Tabelas ===== */
.tabela {
    width: 100%;
    border-collapse: collapse;
    background: var(--cor-superficie);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra);
}

.tabela th,
.tabela td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--cor-borda);
}

.tabela th {
    background: var(--cor-fundo);
    font-weight: 600;
    color: var(--cor-texto-suave);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tabela tbody tr:hover {
    background: var(--cor-fundo);
}

/* ===== Badges de estado ===== */
.badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    background: var(--cor-fundo);
    color: var(--cor-texto-suave);
    border: 1px solid var(--cor-borda);
}

.badge--sucesso { background: #e6f6ec; color: var(--cor-sucesso); border-color: #b9e6c9; }
.badge--aviso   { background: #fdf2e6; color: var(--cor-aviso);   border-color: #f5d9b8; }
.badge--erro    { background: #fbeaea; color: var(--cor-erro);    border-color: #f2c4c4; }
.badge--info    { background: #e8f1fd; color: var(--cor-primaria);border-color: #c2dbf9; }

/* ===== Cabeçalho de página ===== */
.pagina__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.pagina__titulo {
    font-size: 22px;
    font-weight: 700;
}

/* ===== Mensagem de erro inline ===== */
.erro-inline {
    color: var(--cor-erro);
    font-size: 13px;
    margin-top: 8px;
    min-height: 18px;
}

/* ===== Ecrã de login ===== */
.login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-sidebar);
}

.login__cartao {
    width: 100%;
    max-width: 360px;
    background: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    padding: 32px;
}

.login__titulo {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 24px;
}

.login__cartao .btn {
    width: 100%;
}

/* ===== Barra de ferramentas / pesquisa ===== */
.barra-ferramentas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.campo-pesquisa {
    width: 100%;
    max-width: 360px;
    padding: 9px 12px;
    font-size: 14px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
}

.campo-pesquisa:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
}

.texto-vazio {
    color: var(--cor-texto-suave);
    padding: 16px 0;
}

/* ===== Botões pequenos e ações de tabela ===== */
.btn--pequeno {
    padding: 5px 10px;
    font-size: 12px;
}

.tabela__acoes {
    white-space: nowrap;
    text-align: right;
}

.tabela__acoes .btn {
    margin-left: 6px;
}

/* ===== Modal ===== */
.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal__fundo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.modal__caixa {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    padding: 24px;
}

.modal__titulo {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.modal__acoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

/* ===== Ações no cabeçalho de página ===== */
.pagina__acoes {
    display: flex;
    gap: 10px;
}

/* ===== Kanban ===== */
.kanban {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    align-items: flex-start;
}

.coluna {
    flex: 0 0 240px;
    background: #eef1f5;
    border-radius: var(--raio);
    border: 1px solid var(--cor-borda);
    transition: background 0.15s, border-color 0.15s;
}

.coluna--sobre {
    background: #e1ecfc;
    border-color: var(--cor-primaria);
}

.coluna__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--cor-texto-suave);
    border-bottom: 1px solid var(--cor-borda);
}

/* Montante total da fase (pedido da gestão): linha própria sob o título */
.coluna__montante {
    display: block;
    width: 100%;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--cor-texto);
}

.coluna__montante:empty {
    display: none;
}

.coluna__contador {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
}

.coluna__cartoes {
    padding: 10px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===== Cartões ===== */
.cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 10px 12px;
    box-shadow: var(--sombra);
    cursor: grab;
}

.cartao--arrastar {
    opacity: 0.5;
}

.cartao__cliente {
    font-weight: 600;
    margin-bottom: 4px;
}

.cartao__info {
    font-size: 13px;
    color: var(--cor-texto-suave);
}

.cartao__banco {
    font-size: 12px;
    color: var(--cor-texto-suave);
    margin-top: 2px;
}

.cartao__acoes {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

/* Botões discretos em texto (dentro dos cartões) */
.ligacao {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: var(--cor-primaria);
    cursor: pointer;
}

.ligacao--perigo {
    color: var(--cor-erro);
}

.ligacao:hover {
    text-decoration: underline;
}

/* ===== Filtros ===== */
.filtros {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filtros select {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
}

/* ===== Lista de tarefas ===== */
.lista-tarefas {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tarefa {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-left-width: 5px;            /* espaço para a barra de estado */
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

/* Barra de estado (borda esquerda colorida) */
.tarefa--pendente  { border-left-color: #aab2bd; }              /* cinza  = pendente */
.tarefa--atrasada  { border-left-color: var(--cor-erro); }      /* vermelho = atrasado */
.tarefa--concluida { border-left-color: var(--cor-sucesso); }   /* verde  = concluído */

/* Checkbox personalizada de "concluir tarefa" */
.tarefa__check {
    appearance: none;
    -webkit-appearance: none;
    margin: 2px 0 0;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 2px solid var(--cor-borda);
    border-radius: 6px;
    background: var(--cor-superficie);
    cursor: pointer;
    position: relative;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.tarefa__check:hover {
    border-color: var(--cor-sucesso);
}

.tarefa__check:active {
    transform: scale(0.9);
}

.tarefa__check:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 157, 87, 0.25);
}

/* Estado marcado: fundo verde + visto branco (SVG embutido) */
.tarefa__check:checked {
    background-color: var(--cor-sucesso);
    border-color: var(--cor-sucesso);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
}

.tarefa__corpo {
    flex: 1;
}

.tarefa__descricao {
    font-weight: 600;
}

.tarefa__meta {
    font-size: 13px;
    color: var(--cor-texto-suave);
    margin-top: 2px;
}

.tarefa__prazo--atraso {
    color: var(--cor-erro);
    font-weight: 600;
}

.tarefa--feita .tarefa__descricao {
    text-decoration: line-through;
    color: var(--cor-texto-suave);
}

/* Saída suave (fade-out) ao concluir uma tarefa no filtro "Por fazer" */
@keyframes tarefa-fade-out {
    to {
        opacity: 0;
        transform: translateX(16px);
    }
}

.tarefa--sair {
    animation: tarefa-fade-out 0.3s ease forwards;
    pointer-events: none;
}

.tarefa__acoes {
    display: flex;
    gap: 12px;
}

/* ===== Drawer (painel lateral de detalhe) ===== */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
}

.drawer__fundo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.drawer__painel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 92vw;
    background: var(--cor-superficie);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
    padding: 24px;
    overflow-y: auto;
}

.drawer__fechar {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: var(--cor-texto-suave);
    cursor: pointer;
}

.drawer__nome {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-right: 30px;
}

.drawer__subtitulo {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--cor-texto-suave);
    margin: 24px 0 12px;
    border-top: 1px solid var(--cor-borda);
    padding-top: 16px;
}

/* Cabeçalho de secção do drawer: título + botão de ação à direita.
   O separador passa para o contentor; o título perde o dele. */
.drawer__seccao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 24px 0 12px;
    border-top: 1px solid var(--cor-borda);
    padding-top: 16px;
}

.drawer__seccao .drawer__subtitulo {
    margin: 0;
    border-top: none;
    padding-top: 0;
}

/* Lista de definição com a informação do cliente */
.detalhe-info {
    display: grid;
    grid-template-columns: 90px 1fr;
    row-gap: 6px;
    column-gap: 12px;
    font-size: 14px;
}

.detalhe-info dt {
    color: var(--cor-texto-suave);
    font-weight: 600;
}

.detalhe-info dd {
    margin: 0;
}

/* ===== Timeline de contactos ===== */
.timeline {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.timeline__item {
    border-left: 2px solid var(--cor-borda);
    padding: 0 0 4px 14px;
    position: relative;
}

.timeline__item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cor-primaria);
}

.timeline__topo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.timeline__data {
    font-size: 12px;
    color: var(--cor-texto-suave);
}

.timeline__topo .ligacao {
    margin-left: auto;
}

.timeline__texto {
    font-size: 14px;
}

.timeline__autor {
    font-size: 12px;
    color: var(--cor-texto-suave);
    margin-top: 2px;
}

/* Linhas de tabela que abrem o detalhe ao clicar */
.linha-clicavel {
    cursor: pointer;
}

/* Tarefas do processo no drawer de detalhe */
.tarefas-mini {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}

.tarefa-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--cor-borda);
    font-size: 14px;
}

.tarefa-mini input[type="checkbox"] {
    flex-shrink: 0;
    cursor: pointer;
}

.tarefa-mini--feita .tarefa-mini__texto {
    text-decoration: line-through;
    color: var(--cor-texto-suave);
}

.tarefa-mini__prazo {
    margin-left: auto;
    font-size: 12px;
    color: var(--cor-texto-suave);
    white-space: nowrap;
}

/* ===== Documentos (drawer do processo) ===== */
.documentos-mini {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}

.documento-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid var(--cor-borda);
    font-size: 14px;
}

.documento-mini__nome {
    font-weight: 500;
}

/* Com ficheiro anexado, o nome é um link de download */
a.documento-mini__nome {
    color: var(--cor-primaria);
    text-decoration: none;
}

a.documento-mini__nome:hover {
    text-decoration: underline;
}

.documento-mini__tipo {
    font-size: 12px;
    color: var(--cor-texto-suave);
}

.documento-mini__anexar {
    margin-left: auto;
    font-size: 12px;
    padding: 3px 8px;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    background: var(--cor-fundo);
    color: var(--cor-texto-suave);
    cursor: pointer;
}

.documento-mini__anexar:hover {
    color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.documento-mini__estado {
    font-size: 13px;
    padding: 3px 6px;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    cursor: pointer;
}

/* Cor do seletor conforme o estado (reaproveita as cores dos badges) */
.documento-mini__estado--pendente  { background: #fdf2e6; color: var(--cor-aviso); }
.documento-mini__estado--recebido  { background: #e8f1fd; color: var(--cor-primaria); }
.documento-mini__estado--validado  { background: #e6f6ec; color: var(--cor-sucesso); }
.documento-mini__estado--rejeitado { background: #fbeaea; color: var(--cor-erro); }

.documento-mini__apagar {
    border: none;
    background: none;
    color: var(--cor-texto-suave);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
}

.documento-mini__apagar:hover {
    color: var(--cor-erro);
}

/* ===== Texto auxiliar e arquivo ===== */
.texto-suave {
    color: var(--cor-texto-suave);
    font-size: 14px;
    margin-bottom: 16px;
}

/* Lista de processos arquivados no drawer do cliente */
.lista-arquivados {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}

.arquivado-item {
    padding: 10px 12px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    margin-bottom: 8px;
    font-size: 14px;
}

.arquivado-item__topo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.arquivado-item__topo .ligacao {
    margin-left: auto;
}

.arquivado-item__datas {
    font-size: 12px;
    color: var(--cor-texto-suave);
    margin-top: 4px;
}

.arquivado-item .timeline {
    margin-top: 10px;
}

/* ===== Dashboard ===== */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Cartão-indicador: botão (clicável → navega para a secção) com chip de ícone */
.card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 16px 18px;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    border-color: #cdd6e1;
}

.card:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
}

.card__icone {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.card__icone svg {
    width: 21px;
    height: 21px;
}

/* O ícone (stroke: currentColor) herda o tom do chip */
.card__icone--info    { background: #e8f1fd; color: var(--cor-primaria); }
.card__icone--sucesso { background: #e6f6ec; color: var(--cor-sucesso); }
.card__icone--erro    { background: #fbeaea; color: var(--cor-erro); }
.card__icone--aviso   { background: #fdf2e6; color: var(--cor-aviso); }

.card__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.card__valor {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card__rotulo {
    margin-top: 3px;
    color: var(--cor-texto-suave);
    font-size: 13px;
}

.dash-graficos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 900px) {
    .dash-graficos {
        grid-template-columns: 1fr;
    }
}

.painel {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 20px;
}

.painel__titulo {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
}

/* Cabeçalho de painel: título + meta discreta à direita */
.painel__cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.painel__cabecalho .painel__titulo {
    margin-bottom: 0;
}

.painel__meta {
    font-size: 12px;
    color: var(--cor-texto-suave);
    white-space: nowrap;
}

/* Subtítulo da página (data no dashboard) */
.pagina__subtitulo {
    margin-top: 4px;
    font-size: 13px;
    color: var(--cor-texto-suave);
}

/* Barras horizontais de processos por estado */
.barra-estado {
    display: grid;
    grid-template-columns: 130px 1fr 28px 38px;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.barra-estado__nome {
    font-size: 13px;
    color: var(--cor-texto-suave);
}

.barra-estado__track {
    background: var(--cor-fundo);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.barra-estado__fill {
    display: block;
    height: 100%;
    background: var(--cor-primaria);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.barra-estado__num {
    text-align: right;
    font-weight: 600;
    font-size: 13px;
}

.barra-estado__pct {
    text-align: right;
    font-size: 12px;
    color: var(--cor-texto-suave);
}

/* "Cancelado" está fora do funil ativo → tom neutro */
.barra-estado__fill--neutra {
    background: #a9b4c0;
}

/* Gráfico SVG de processos por mês */
.grafico-zona {
    position: relative;
}

.grafico {
    width: 100%;
    height: auto;
    display: block;
}

.grafico__barra {
    fill: var(--cor-primaria);
    transition: fill 0.1s;
}

.grafico__barra--ativa {
    fill: var(--cor-primaria-escura);
}

/* Alvo de hover: a coluna inteira (maior do que a barra), invisível */
.grafico__hit {
    fill: transparent;
}

.grafico__grelha {
    stroke: var(--cor-borda);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.grafico__eixo {
    stroke: var(--cor-borda);
    stroke-width: 1;
}

/* Tooltip do gráfico (aparece sobre a coluna em hover) */
.grafico-tooltip {
    position: absolute;
    transform: translateY(-100%);
    background: var(--cor-texto);
    color: #fff;
    font-size: 12px;
    padding: 5px 9px;
    border-radius: 6px;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.grafico__rotulo {
    fill: var(--cor-texto-suave);
    font-size: 12px;
}

.grafico__valor {
    fill: var(--cor-texto);
    font-size: 12px;
    font-weight: 600;
}

/* ===== Cabeçalhos ordenáveis ===== */
.ordenavel {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.ordenavel:hover {
    color: var(--cor-primaria);
}

.ordenavel--ativa {
    color: var(--cor-primaria);
}

.ordenavel--ativa[data-direcao="asc"]::after  { content: " ▲"; font-size: 10px; }
.ordenavel--ativa[data-direcao="desc"]::after { content: " ▼"; font-size: 10px; }

/* ===== Paginação ===== */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 16px;
}

.paginacao__info {
    color: var(--cor-texto-suave);
    font-size: 13px;
}

.paginacao button:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ===== Acesso ao portal (no drawer do cliente) ===== */
.portal-estado {
    font-size: 14px;
    color: var(--cor-texto-suave);
    margin-bottom: 12px;
}

.portal-link {
    margin-top: 12px;
}

.portal-link label {
    display: block;
    font-size: 13px;
    color: var(--cor-texto-suave);
    margin-bottom: 6px;
}

.portal-link__linha {
    display: flex;
    gap: 8px;
}

.portal-link__linha input {
    flex: 1;
    padding: 8px 10px;
    font-size: 12px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-fundo);
}

/* ===== Tabelas com scroll horizontal em ecrãs estreitos ===== */
.tabela-scroll {
    overflow-x: auto;
}

/* Botão do menu (hambúrguer) — só aparece em ecrãs pequenos */
.sidebar__toggle {
    display: none;
    background: none;
    border: none;
    color: var(--cor-sidebar-texto);
    font-size: 22px;
    line-height: 1;
    padding: 8px 16px;
    cursor: pointer;
}

.sidebar__toggle:hover {
    color: #fff;
}

/* ===== Feedback: toasts ===== */
#toasts {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(360px, calc(100vw - 32px));
}

.toast {
    padding: 10px 14px;
    border-radius: var(--raio);
    font-size: 14px;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    animation: toast-entrar 0.25s ease;
}

.toast--sucesso { background: var(--cor-sucesso); }
.toast--erro    { background: var(--cor-erro); }

.toast--sair {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s, transform 0.25s;
}

@keyframes toast-entrar {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Diálogo de confirmação ===== */
.confirmar {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 150;
}

.confirmar__fundo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    animation: fundo-entrar 0.15s ease;
}

.confirmar__caixa {
    position: relative;
    width: 100%;
    max-width: 360px;
    margin: 16px;
    background: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    padding: 20px;
    animation: caixa-entrar 0.18s ease;
}

.confirmar__texto {
    font-size: 15px;
    margin-bottom: 18px;
}

.confirmar__acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ===== Animações de entrada (drawer/modal) ===== */
/* O atributo [hidden] usa display:none — ao reaparecer, a animação corre. */
.drawer__painel {
    animation: drawer-entrar 0.22s ease;
}

.drawer__fundo,
.modal__fundo {
    animation: fundo-entrar 0.18s ease;
}

.modal__caixa {
    animation: caixa-entrar 0.18s ease;
}

@keyframes drawer-entrar {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes caixa-entrar {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes fundo-entrar {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Quem prefere menos movimento, não recebe animações */
@media (prefers-reduced-motion: reduce) {
    .toast, .drawer__painel, .modal__caixa,
    .drawer__fundo, .modal__fundo, .confirmar__fundo, .confirmar__caixa {
        animation: none;
    }
}

/* ===== Botões bloqueados durante o envio ===== */
.btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ===== Responsivo: telemóvel / tablet pequeno ===== */
@media (max-width: 768px) {
    /* A sidebar passa para cima do conteúdo, em coluna */
    .app {
        flex-direction: column;
    }

    .sidebar {
        position: static;
        width: 100%;
    }

    /* Linha de topo: logótipo + botão do menu */
    .sidebar__topo {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .sidebar__logo {
        border-bottom: none;
    }

    .sidebar__toggle {
        display: block;
    }

    /* Menu (links + sair) escondido até abrir o hambúrguer */
    .sidebar__nav,
    .sidebar__rodape {
        display: none;
    }

    .sidebar--aberta .sidebar__nav,
    .sidebar--aberta .sidebar__rodape {
        display: flex;
    }

    .conteudo {
        margin-left: 0;
        padding: 16px;
    }

    /* As tabelas não encolhem demais — fazem scroll dentro do wrapper */
    .tabela-scroll .tabela {
        min-width: 560px;
    }
}