/* ============================================================================
   JONAS MÓVEIS — DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Este arquivo é a ÚNICA fonte de verdade para tokens e componentes globais.
   admin.css / cliente.css / landing.css só devem conter layout e componentes
   específicos daquela área — nunca redefinir botão, input, card, badge, tabela
   ou modal. Se precisar de uma variação, use uma variante declarada aqui.

   Ordem de carregamento: app.css primeiro, depois a folha da área.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   01. TOKENS
   ---------------------------------------------------------------------------- */

:root {

    /* --- Marca ------------------------------------------------------------ */
    --laranja: #e8701a;
    --laranja-claro: #ff8a3d;
    --laranja-escuro: #c85f12;
    --laranja-fundo: #fdece0;

    /* --- Rampa de cinza (substitui os 26 tons avulsos do sistema antigo) --- */
    --cinza-0: #ffffff;
    --cinza-50: #f6f5f3;
    --cinza-100: #ececec;
    --cinza-200: #d8d8d8;
    --cinza-300: #b8b8b8;
    --cinza-400: #9a9a9a;
    --cinza-500: #8a8a8a;
    --cinza-600: #6b6b6b;
    --cinza-700: #4a4a4a;
    --cinza-800: #2a2a2a;
    --cinza-900: #1a1a1a;
    --cinza-950: #111111;

    /* --- Papéis semânticos de superfície e texto -------------------------- */
    --fundo: var(--cinza-50);
    --superficie: var(--cinza-0);
    --superficie-suave: var(--cinza-50);
    --borda: var(--cinza-100);
    --borda-forte: var(--cinza-200);
    --texto: var(--cinza-900);
    --texto-suave: var(--cinza-600);
    --texto-fraco: var(--cinza-500);
    --preto: var(--cinza-950);
    --cinza-claro: var(--cinza-50);

    /* --- Status ----------------------------------------------------------- */
    /* Antes: 9 verdes, 8 vermelhos, 5 âmbares — vários duplicados por erro
       de digitação (#1e8a4c vs #1c8a4d, #c23b3b vs #d43b3b). Agora 3 por cor. */
    --sucesso: #1e8a4c;
    --sucesso-fundo: #e4f5ea;
    --sucesso-borda: #c5ead3;

    --perigo: #c23b3b;
    --perigo-forte: #b02a2a;
    --perigo-fundo: #fbe7e7;
    --perigo-borda: #f3caca;

    --aviso: #a9720a;
    --aviso-fundo: #fbeed0;
    --aviso-borda: #f0dcaa;

    --info: #2a5db0;
    --info-fundo: #e3edfb;
    --info-borda: #c7dbf5;

    --roxo: #6a3bc2;
    --roxo-fundo: #ede4fb;

    --neutro: #56606b;
    --neutro-fundo: #eef0f2;

    --whatsapp: #25d366;

    /* --- Espaçamento — grade de 4px --------------------------------------- */
    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 20px;
    --esp-6: 24px;
    --esp-8: 32px;
    --esp-10: 40px;
    --esp-12: 48px;
    --esp-16: 64px;
    --esp-20: 80px;
    --esp-24: 96px;

    /* --- Tipografia — 8 degraus, sem meio-pixel, sem rem ------------------- */
    --fonte-corpo: 'Inter', system-ui, -apple-system, sans-serif;
    --fonte-titulo: 'Poppins', 'Inter', system-ui, sans-serif;

    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 13px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-2xl: 22px;
    --fs-3xl: 28px;

    --lh-apertado: 1.25;
    --lh-normal: 1.5;
    --lh-solto: 1.65;

    --peso-normal: 400;
    --peso-medio: 500;
    --peso-forte: 600;
    --peso-bold: 700;

    /* --- Raio ------------------------------------------------------------- */
    --raio-sm: 8px;
    --raio-md: 10px;
    --raio-lg: 14px;
    --raio-xl: 20px;
    --raio-full: 999px;

    /* Aliases herdados — mantidos porque 14 declarações ainda os usam. */
    --raio-card: var(--raio-xl);
    --raio-pill: var(--raio-full);

    /* --- Alturas de controle ---------------------------------------------- */
    /* A correção central: antes, botões (43px), inputs (sem altura) e botões
       de ícone (34px) nunca alinhavam quando colocados lado a lado. */
    --altura-sm: 36px;
    --altura-md: 40px;
    --altura-lg: 48px;
    --altura-topbar: 64px;

    /* --- Bordas e foco ---------------------------------------------------- */
    --borda-largura: 1px;
    --anel-foco: 0 0 0 3px rgba(232, 112, 26, .28);
    --anel-foco-perigo: 0 0 0 3px rgba(194, 59, 59, .25);

    /* --- Sombras — parametrizadas por cor --------------------------------- */
    /* Antes a geometria `0 14px 34px` / `0 24px 50px` estava copiada 5 vezes,
       mudando só o rgba. Agora a cor é um token separado. */
    --sombra-cor: 17, 17, 17;
    --sombra-xs: 0 1px 2px rgba(var(--sombra-cor), .05);
    --sombra-sm: 0 2px 10px rgba(var(--sombra-cor), .05);
    --sombra-md: 0 4px 14px rgba(var(--sombra-cor), .10);
    --sombra-lg: 0 14px 34px rgba(var(--sombra-cor), .08);
    --sombra-xl: 0 24px 50px rgba(var(--sombra-cor), .16);
    --sombra-modal: 0 24px 60px rgba(0, 0, 0, .28);

    --sombra-realce-laranja: 0 8px 20px rgba(232, 112, 26, .24);
    --sombra-realce-laranja-hover: 0 12px 28px rgba(232, 112, 26, .30);
    --sombra-realce-perigo: 0 8px 20px rgba(194, 59, 59, .22);
    --sombra-realce-perigo-hover: 0 12px 28px rgba(194, 59, 59, .28);

    /* --- Movimento -------------------------------------------------------- */
    --transicao-rapida: .15s ease;
    --transicao-media: .2s ease;
    --transicao-lenta: .3s cubic-bezier(.2, .7, .2, 1);
    --transicao: var(--transicao-lenta);

    /* --- Layout ----------------------------------------------------------- */
    --container: 1240px;
    --largura-conteudo: 1360px;

    /* --- Camadas ---------------------------------------------------------- */
    --z-dropdown: 20;
    --z-sidebar: 1200;
    --z-overlay: 1100;
    --z-modal: 1300;
}

/* ----------------------------------------------------------------------------
   02. RESET E BASE
   ---------------------------------------------------------------------------- */

* {
    box-sizing: border-box;
}

/* Qualquer elemento com o atributo hidden fica escondido, mesmo que sua
   classe (ex: .btn, com display:inline-flex) defina um display próprio —
   sem isso, o atributo hidden é silenciosamente ignorado nesses casos. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: var(--fonte-corpo);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .titulo {
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-forte);
    letter-spacing: -0.02em;
    line-height: var(--lh-apertado);
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
}

/* Foco visível e consistente em tudo que é interativo. Antes só existia em
   dois lugares do sistema inteiro. */
:focus-visible {
    outline: 2px solid var(--laranja);
    outline-offset: 2px;
}

.icone-lucide {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   03. TIPOGRAFIA UTILITÁRIA
   ---------------------------------------------------------------------------- */

.texto-rotulo {
    font-size: var(--fs-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: var(--peso-forte);
    color: var(--laranja);
}

.texto-suave {
    color: var(--texto-suave);
}

.texto-legenda {
    font-size: var(--fs-sm);
    color: var(--texto-fraco);
}

/* ----------------------------------------------------------------------------
   04. BOTÕES
   ---------------------------------------------------------------------------- */
/* Uma altura por tamanho, um raio, uma tipografia, um conjunto de estados.
   Todas as variantes compartilham a mesma base — nunca redefina padding,
   altura ou raio de botão fora deste bloco. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    height: var(--altura-md);
    padding: 0 var(--esp-5);
    border: var(--borda-largura) solid transparent;
    border-radius: var(--raio-full);
    background: none;
    font-family: var(--fonte-corpo);
    font-weight: var(--peso-forte);
    font-size: var(--fs-md);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--transicao-rapida),
        border-color var(--transicao-rapida),
        color var(--transicao-rapida),
        box-shadow var(--transicao-rapida),
        transform var(--transicao-rapida);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--anel-foco);
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- Tamanhos --- */

.btn-sm {
    height: var(--altura-sm);
    padding: 0 var(--esp-4);
    font-size: var(--fs-base);
}

.btn-lg,
.btn-grande {
    height: var(--altura-lg);
    padding: 0 var(--esp-6);
    font-size: var(--fs-lg);
}

.btn-bloco {
    width: 100%;
}

/* --- Variantes --- */

.btn-primario {
    background: var(--laranja);
    border-color: var(--laranja);
    color: #fff;
    box-shadow: var(--sombra-realce-laranja);
}

.btn-primario:hover:not(:disabled) {
    background: var(--laranja-escuro);
    border-color: var(--laranja-escuro);
    box-shadow: var(--sombra-realce-laranja-hover);
}

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

.btn-secundario:hover:not(:disabled) {
    border-color: var(--texto);
}

.btn-contorno {
    background: transparent;
    border-color: var(--borda-forte);
    color: var(--texto);
}

.btn-contorno:hover:not(:disabled) {
    border-color: var(--texto);
    background: var(--superficie-suave);
}

.btn-fantasma {
    background: transparent;
    border-color: transparent;
    color: var(--texto-suave);
}

.btn-fantasma:hover:not(:disabled) {
    background: var(--superficie-suave);
    color: var(--texto);
}

.btn-perigo {
    background: var(--perigo);
    border-color: var(--perigo);
    color: #fff;
    box-shadow: var(--sombra-realce-perigo);
}

.btn-perigo:hover:not(:disabled) {
    background: var(--perigo-forte);
    border-color: var(--perigo-forte);
    box-shadow: var(--sombra-realce-perigo-hover);
}

.btn-perigo:focus-visible {
    box-shadow: var(--anel-foco-perigo);
}

/* --- Estado de carregamento --- */
/* Uso: botao.setAttribute('data-carregando', ''); no submit. */

.btn[data-carregando] {
    pointer-events: none;
    opacity: .8;
    position: relative;
    color: transparent;
}

.btn[data-carregando] > * {
    visibility: hidden;
}

.btn[data-carregando]::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--raio-full);
    color: #fff;
    animation: girar .6s linear infinite;
}

.btn-secundario[data-carregando]::after,
.btn-contorno[data-carregando]::after,
.btn-fantasma[data-carregando]::after {
    color: var(--texto);
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

/* --- Botão de ícone --- */
/* Quadrado, mesma altura do .btn-sm, para alinhar em linhas de tabela. */

.btn-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--altura-sm);
    height: var(--altura-sm);
    padding: 0;
    border: var(--borda-largura) solid var(--borda);
    border-radius: var(--raio-md);
    background: var(--superficie);
    color: var(--texto-suave);
    cursor: pointer;
    transition:
        border-color var(--transicao-rapida),
        color var(--transicao-rapida),
        background var(--transicao-rapida);
}

.btn-icone:hover {
    border-color: var(--texto);
    color: var(--texto);
}

.btn-icone:focus-visible {
    outline: none;
    box-shadow: var(--anel-foco);
}

.btn-icone-perigo:hover {
    border-color: var(--perigo);
    color: var(--perigo);
    background: var(--perigo-fundo);
}

.btn-icone-sucesso:hover {
    border-color: var(--sucesso);
    color: var(--sucesso);
    background: var(--sucesso-fundo);
}

/* Formulários que só embrulham um btn-icone não devem quebrar o alinhamento
   da célula de ações — são ~25 no sistema. */
.acoes form,
.acoes-item form {
    display: inline-flex;
    margin: 0;
}

/* ----------------------------------------------------------------------------
   05. CAMPOS DE FORMULÁRIO
   ---------------------------------------------------------------------------- */
/* Antes existiam 12 regras de input independentes, com padding vertical
   7/8/10/11/12px e raio 8 ou 10px. Agora há uma só, e as exceções são
   explícitas e justificadas. */

.campo {
    margin-bottom: var(--esp-5);
}

.campo label,
.rotulo-campo {
    display: block;
    font-size: var(--fs-base);
    font-weight: var(--peso-medio);
    color: var(--texto-suave);
    margin-bottom: var(--esp-2);
}

.campo input,
.campo select,
.campo textarea,
.barra-busca input,
.barra-busca select,
.linha-busca-produto input,
.cliente-form input,
.cliente-form select,
.cliente-form textarea {
    width: 100%;
    height: var(--altura-md);
    padding: 0 var(--esp-3);
    border: var(--borda-largura) solid var(--borda);
    border-radius: var(--raio-md);
    background: var(--superficie);
    color: var(--texto);
    font-family: var(--fonte-corpo);
    font-size: var(--fs-md);
    transition: border-color var(--transicao-rapida), box-shadow var(--transicao-rapida);
}

.campo textarea,
.cliente-form textarea {
    height: auto;
    min-height: 96px;
    padding: var(--esp-3);
    line-height: var(--lh-normal);
    resize: vertical;
}

.campo select,
.barra-busca select,
.cliente-form select {
    cursor: pointer;
    appearance: none;
    padding-right: var(--esp-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--esp-3) center;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus,
.barra-busca input:focus,
.barra-busca select:focus,
.linha-busca-produto input:focus,
.cliente-form input:focus,
.cliente-form select:focus,
.cliente-form textarea:focus {
    outline: none;
    border-color: var(--laranja);
    box-shadow: var(--anel-foco);
}

.campo input:disabled,
.campo select:disabled,
.campo textarea:disabled,
.campo input[readonly] {
    background: var(--superficie-suave);
    color: var(--texto-fraco);
    cursor: not-allowed;
}

.campo input::placeholder,
.campo textarea::placeholder,
.barra-busca input::placeholder {
    color: var(--cinza-400);
}

/* Estado de erro */
.campo-erro input,
.campo-erro select,
.campo-erro textarea {
    border-color: var(--perigo);
}

.campo-erro input:focus,
.campo-erro select:focus,
.campo-erro textarea:focus {
    box-shadow: var(--anel-foco-perigo);
}

.mensagem-erro-campo {
    display: block;
    margin-top: var(--esp-1);
    font-size: var(--fs-sm);
    color: var(--perigo);
}

.dica-campo {
    margin: var(--esp-1) 0 0;
    font-size: var(--fs-sm);
    color: var(--texto-fraco);
}

.campo-checkbox {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    font-size: var(--fs-md);
    color: var(--texto-suave);
    margin-top: var(--esp-3);
}

.campo-checkbox input {
    width: auto;
    height: auto;
    accent-color: var(--laranja);
}

/* Linhas de campos lado a lado */
.linha-campos {
    display: flex;
    gap: var(--esp-4);
}

.linha-campos .campo {
    flex: 1;
    min-width: 0;
}

.linha-campos .campo-pequeno {
    flex: 0 0 120px;
}

.linha-campos .campo-grande {
    flex: 2;
}

.acoes-form {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    margin-top: var(--esp-6);
}

/* ----------------------------------------------------------------------------
   06. CARDS
   ---------------------------------------------------------------------------- */
/* Antes: 9 superfícies "card" com 7 paddings (18/22/28/32/36/40px) e 5 raios. */

.card {
    background: var(--superficie);
    border: var(--borda-largura) solid var(--borda);
    border-radius: var(--raio-xl);
    padding: var(--esp-6);
}

.card > *:first-child {
    margin-top: 0;
}

.card > *:last-child {
    margin-bottom: 0;
}

.card h2 {
    font-size: var(--fs-lg);
    margin: 0 0 var(--esp-5);
}

/* Quando o título tem uma descrição logo abaixo, os dois andam juntos:
   o respiro maior fica depois do par, não entre eles. */
.card h2:has(+ .dica-campo) {
    margin-bottom: var(--esp-2);
}

.card h2 + .dica-campo {
    margin: 0 0 var(--esp-5);
    font-size: var(--fs-md);
    max-width: 62ch;
}

.card-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    margin-bottom: var(--esp-5);
}

.card-cabecalho h2 {
    margin: 0;
}

.card-rodape {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    margin-top: var(--esp-6);
    padding-top: var(--esp-5);
    border-top: var(--borda-largura) solid var(--borda);
}

/* Variação sem moldura, para agrupar sem virar "dashboard de quadradinhos" */
.bloco {
    padding: var(--esp-5) 0;
}

/* ----------------------------------------------------------------------------
   07. BADGES
   ---------------------------------------------------------------------------- */
/* Antes: 6 implementações com 7 tamanhos de fonte para o mesmo conceito. */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 var(--esp-3);
    border-radius: var(--raio-full);
    font-size: var(--fs-xs);
    font-weight: var(--peso-forte);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-neutro,
.badge-aberto,
.badge-planejamento {
    background: var(--neutro-fundo);
    color: var(--neutro);
}

.badge-sucesso,
.badge-confirmado,
.badge-pago,
.badge-convertido,
.badge-concluido {
    background: var(--sucesso-fundo);
    color: var(--sucesso);
}

.badge-perigo,
.badge-cancelado,
.badge-vencido,
.badge-perdido {
    background: var(--perigo-fundo);
    color: var(--perigo);
}

.badge-aviso,
.badge-pendente,
.badge-novo,
.badge-orcamento {
    background: var(--aviso-fundo);
    color: var(--aviso);
}

.badge-info,
.badge-em_contato,
.badge-medicao {
    background: var(--info-fundo);
    color: var(--info);
}

.badge-roxo,
.badge-qualificado,
.badge-producao {
    background: var(--roxo-fundo);
    color: var(--roxo);
}

/* ----------------------------------------------------------------------------
   08. TABELAS
   ---------------------------------------------------------------------------- */
/* Antes: 5 tamanhos de fonte dentro de uma mesma tabela. Agora 2. */

.tabela {
    width: 100%;
    border-collapse: collapse;
}

.tabela th {
    text-align: left;
    font-size: var(--fs-sm);
    font-weight: var(--peso-forte);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-fraco);
    padding: var(--esp-3) var(--esp-4);
    border-bottom: var(--borda-largura) solid var(--borda);
    white-space: nowrap;
}

.tabela td {
    padding: var(--esp-4);
    border-bottom: var(--borda-largura) solid var(--borda);
    font-size: var(--fs-md);
    vertical-align: middle;
}

.tabela tbody tr:last-child td {
    border-bottom: none;
}

.tabela tbody tr {
    transition: background var(--transicao-rapida);
}

.tabela tbody tr:hover {
    background: var(--superficie-suave);
}

.tabela td.acoes,
.tabela th.acoes {
    text-align: right;
    white-space: nowrap;
}

.tabela td.acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--esp-2);
}

.tabela .col-numero,
.tabela .col-valor-td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Rolagem horizontal contida — a página nunca rola de lado por causa
   de uma tabela larga. */
.tabela-rolagem {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Linha de total no rodapé — destaque sem virar outro componente. */
.tabela tfoot .linha-total td {
    border-top: 2px solid var(--borda);
    border-bottom: none;
    background: var(--superficie-suave);
    font-size: var(--fs-lg);
}

.tabela tfoot .linha-total:hover td {
    background: var(--superficie-suave);
}

/* ----------------------------------------------------------------------------
   09. AVISOS E ALERTAS
   ---------------------------------------------------------------------------- */

.aviso-sucesso,
.alerta-sucesso-claro,
.alerta-erro-claro,
.alerta-aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-2);
    padding: var(--esp-3) var(--esp-4);
    border: var(--borda-largura) solid transparent;
    border-radius: var(--raio-md);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    margin-bottom: var(--esp-5);
}

.aviso-sucesso,
.alerta-sucesso-claro {
    background: var(--sucesso-fundo);
    border-color: var(--sucesso-borda);
    color: var(--sucesso);
}

.alerta-sucesso-claro {
    word-break: break-word;
}

.alerta-erro-claro {
    background: var(--perigo-fundo);
    border-color: var(--perigo-borda);
    color: var(--perigo);
}

.alerta-aviso {
    background: var(--aviso-fundo);
    border-color: var(--aviso-borda);
    color: var(--aviso);
}

/* ----------------------------------------------------------------------------
   10. ESTADOS VAZIOS
   ---------------------------------------------------------------------------- */
/* Substitui o antigo `<p class="vazio">Nenhum resultado.</p>`.
   A classe .vazio permanece porque o JS e várias views dependem dela. */

.vazio {
    color: var(--texto-fraco);
    font-size: var(--fs-md);
    padding: var(--esp-4) 0;
    margin: 0;
}

.estado-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--esp-2);
    padding: var(--esp-12) var(--esp-5);
}

.estado-vazio-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--esp-2);
    border-radius: var(--raio-full);
    background: var(--superficie-suave);
    color: var(--cinza-400);
}

.estado-vazio h3 {
    margin: 0;
    font-size: var(--fs-lg);
}

.estado-vazio p {
    margin: 0;
    max-width: 42ch;
    font-size: var(--fs-md);
    color: var(--texto-suave);
    line-height: var(--lh-normal);
}

.estado-vazio .btn {
    margin-top: var(--esp-4);
}

/* ----------------------------------------------------------------------------
   11. MODAIS
   ---------------------------------------------------------------------------- */
/* IMPORTANTE: a raiz .modal-confirmacao É o backdrop, e a caixa é filha
   direta dela. confirmacao.js:26, agenda.js:26 e financeiro.js:52 fecham o
   modal comparando `evento.target === modal`. Envolver a caixa em outro
   elemento quebra o clique-fora nos três mecanismos. */

.modal-confirmacao {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
    padding: var(--esp-5);
    background: rgba(17, 17, 17, .55);
    overflow-y: auto;
}

.modal-confirmacao.visivel {
    display: flex;
    animation: modal-fundo-entrada var(--transicao-rapida);
}

.modal-confirmacao-caixa {
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: var(--esp-6);
    background: var(--superficie);
    border-radius: var(--raio-xl);
    box-shadow: var(--sombra-modal);
    animation: modal-caixa-entrada var(--transicao-rapida);
}

/* Tamanhos */
.modal-sm .modal-confirmacao-caixa { max-width: 380px; }
.modal-md .modal-confirmacao-caixa { max-width: 520px; }
.modal-lg .modal-confirmacao-caixa { max-width: 720px; }

.modal-confirmacao-titulo {
    margin: 0 0 var(--esp-2);
    font-size: var(--fs-xl);
}

.modal-confirmacao-texto {
    margin: 0 0 var(--esp-6);
    font-size: var(--fs-md);
    color: var(--texto-suave);
    line-height: var(--lh-normal);
}

.modal-confirmacao-acoes {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--esp-3);
    margin-top: var(--esp-6);
}

.modal-confirmacao-acoes .btn {
    min-width: 110px;
}

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

@keyframes modal-caixa-entrada {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------------------
   12. LISTA DE SUGESTÕES (autocomplete)
   ---------------------------------------------------------------------------- */
/* Três implementações de JS diferentes compartilham este mesmo contrato:
   .lista-sugestoes + .visivel + .sugestao-item */

.campo-autocomplete {
    position: relative;
}

.lista-sugestoes {
    display: none;
    position: absolute;
    top: calc(100% + var(--esp-1));
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    max-height: 260px;
    overflow-y: auto;
    padding: var(--esp-1);
    background: var(--superficie);
    border: var(--borda-largura) solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
}

.lista-sugestoes.visivel {
    display: block;
}

.sugestao-item {
    padding: var(--esp-3);
    border-radius: var(--raio-sm);
    font-size: var(--fs-md);
    cursor: pointer;
}

.sugestao-item:hover {
    background: var(--superficie-suave);
}

.sugestao-vazia,
.sugestao-vazia:hover {
    background: none;
    color: var(--texto-fraco);
    cursor: default;
    font-style: italic;
}

/* ----------------------------------------------------------------------------
   13. PÁGINA DE LOGIN (tema escuro)
   ---------------------------------------------------------------------------- */

.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--esp-6);
    background:
        radial-gradient(circle at 80% 0%, rgba(232, 112, 26, .18), transparent 45%),
        var(--preto);
}

.card-login {
    width: 100%;
    max-width: 400px;
    padding: var(--esp-10);
    background: #191919;
    border: var(--borda-largura) solid var(--cinza-800);
    border-radius: var(--raio-xl);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.marca-login {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    margin-bottom: var(--esp-8);
}

.marca-login .logo-icone {
    height: 40px;
    width: auto;
    flex-shrink: 0;
}

.marca-login .marca-texto h1 {
    font-size: var(--fs-lg);
    color: #fff;
    margin: 0;
}

.marca-login .marca-texto span {
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cinza-500);
    margin-top: var(--esp-1);
}

.card-login h2 {
    color: #fff;
    font-size: var(--fs-2xl);
    margin: 0 0 var(--esp-2);
}

.card-login p.subtitulo {
    color: var(--cinza-400);
    font-size: var(--fs-md);
    margin: 0 0 var(--esp-8);
    line-height: var(--lh-normal);
}

/* Inversão do campo padrão para o fundo escuro do login. */
.card-login .campo label {
    color: var(--cinza-300);
}

.card-login .campo input {
    background: #141414;
    border-color: var(--cinza-800);
    color: #fff;
}

.card-login .campo input::placeholder {
    color: var(--cinza-600);
}

.card-login .campo input:focus {
    border-color: var(--laranja);
}

.card-login .btn {
    width: 100%;
    margin-top: var(--esp-2);
}

.alerta-erro {
    padding: var(--esp-3) var(--esp-4);
    border: var(--borda-largura) solid rgba(220, 53, 69, .35);
    border-radius: var(--raio-md);
    background: rgba(220, 53, 69, .12);
    color: #ff8f97;
    font-size: var(--fs-base);
    margin-bottom: var(--esp-5);
}

/* ----------------------------------------------------------------------------
   14. UTILITÁRIOS DE ESPAÇAMENTO
   ---------------------------------------------------------------------------- */
/* Poucos, deliberadamente — para substituir os `style="margin-top:14px"`
   copiados entre arquivos, não para virar um framework de utilidades. */

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--esp-2); }
.mt-3 { margin-top: var(--esp-3); }
.mt-4 { margin-top: var(--esp-4); }
.mt-5 { margin-top: var(--esp-5); }
.mt-6 { margin-top: var(--esp-6); }

.pilha-2 { display: flex; flex-direction: column; gap: var(--esp-2); }
.pilha-3 { display: flex; flex-direction: column; gap: var(--esp-3); }
.pilha-4 { display: flex; flex-direction: column; gap: var(--esp-4); }
.pilha-5 { display: flex; flex-direction: column; gap: var(--esp-5); }

/* ----------------------------------------------------------------------------
   15. ACESSIBILIDADE
   ---------------------------------------------------------------------------- */

.apenas-leitor-tela {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Quando o corpo tem um modal aberto, o fundo não rola. */
body.modal-aberto {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ----------------------------------------------------------------------------
   16. RESPONSIVO — escala de espaçamento para telas menores
   ---------------------------------------------------------------------------- */
/* Não zeramos os espaços no mobile: reduzimos proporcionalmente para manter
   o respiro. */

@media (max-width: 768px) {
    :root {
        --esp-8: 24px;
        --esp-10: 32px;
        --esp-12: 40px;
        --esp-16: 48px;
        --esp-20: 56px;
        --esp-24: 64px;
    }

    .card {
        padding: var(--esp-5);
    }

    .linha-campos {
        flex-direction: column;
        gap: 0;
    }

    .linha-campos .campo-pequeno,
    .linha-campos .campo-grande {
        flex: 1 1 auto;
    }

    .acoes-form {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .acoes-form .btn {
        width: 100%;
    }

    .modal-confirmacao-acoes {
        flex-direction: column-reverse;
    }

    .modal-confirmacao-acoes .btn {
        width: 100%;
    }
}