/* =============================================================================
   Lumina — Design System unificado (prefixo "ui-"), carregado em TODAS as telas pelo
   _Layout. Mesmo padrão visual das telas novas (cabeçalho de tela, cards, KPIs,
   pílulas, selos, tabelas, modais). Telas novas devem usar SÓ estas classes — os
   CSS por módulo (backlog.css, financeiro.css...) ficam para o que for específico.
   ============================================================================= */
:root {
    --ui-brand: #465fff; --ui-brand-2: #3641f5; --ui-brand-suave: rgba(70,95,255,.1);
    --ui-ok: #12b76a; --ui-aviso: #f79009; --ui-erro: #f04438; --ui-info: #0ba5ec;
    --ui-superficie: #ffffff; --ui-superficie-2: #f9fafb;
    --ui-borda: #e4e7ec; --ui-texto: #1d2939; --ui-texto-2: #667085; --ui-texto-3: #98a2b3;
    --ui-sombra: none; --ui-sombra-2: 0 12px 32px rgba(16,24,40,.14);
    --ui-raio: 16px; --ui-raio-2: 12px; --ui-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dark {
    --ui-superficie: rgba(255,255,255,.03); --ui-superficie-2: rgba(255,255,255,.05);
    --ui-borda: #1d2939; --ui-texto: rgba(255,255,255,.9); --ui-texto-2: #98a2b3; --ui-texto-3: #667085;
    --ui-brand-suave: rgba(70,95,255,.2); --ui-sombra-2: 0 12px 32px rgba(0,0,0,.5);
}
/* Garante o .hidden (o do Tailwind fica numa camada de menor prioridade) — exceto em
   elementos com variantes responsivas (ex.: "hidden xl:block"), que o Tailwind resolve. */
.ui-pagina .hidden:not([class*="sm:"]):not([class*="md:"]):not([class*="lg:"]):not([class*="xl:"]) { display: none !important; }
.ui-mono { font-family: var(--ui-mono); font-size: 12.5px; }
.ui-legenda { font-size: 12px; color: var(--ui-texto-2); }

/* ---------- Página ---------- */
.ui-pagina { display: flex; flex-direction: column; gap: 16px; }
.ui-card { border: 1px solid var(--ui-borda); background: var(--ui-superficie); border-radius: var(--ui-raio); padding: 20px; min-width: 0; box-shadow: var(--ui-sombra); }
.ui-card-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.ui-card-topo h3 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ui-contagem { border-radius: 9999px; padding: 1px 8px; font-size: 11.5px; font-weight: 600; background: var(--ui-superficie-2); color: var(--ui-texto-2); border: 1px solid var(--ui-borda); }

/* Cabeçalho de tela: título + descrição + navegação/ações */
.ui-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
           background: linear-gradient(120deg, var(--ui-brand-suave), transparent 55%), var(--ui-superficie); }
.ui-hero h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.ui-hero p { font-size: 12.5px; color: var(--ui-texto-2); margin-top: 2px; }

/* Pílulas (abas, filtros, navegação entre telas) */
.ui-pilulas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ui-pilula { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 9999px; border: 1px solid var(--ui-borda);
             background: var(--ui-superficie); color: var(--ui-texto-2); font-size: 12.5px; font-weight: 500; cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.ui-pilula:hover { border-color: var(--ui-brand); color: var(--ui-brand); }
.ui-pilula.ativa { background: var(--ui-brand); border-color: var(--ui-brand); color: #fff; }

/* Indicadores (KPIs) */
.ui-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ui-kpi { display: flex; gap: 12px; align-items: center; border: 1px solid var(--ui-borda); background: var(--ui-superficie); border-radius: 14px; padding: 14px 16px;
          text-align: left; color: inherit; text-decoration: none !important; min-width: 0; box-shadow: var(--ui-sombra); }
a.ui-kpi:hover, button.ui-kpi:hover { border-color: var(--ui-brand); cursor: pointer; }
.ui-kpi-icone { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 19px; background: var(--ui-brand-suave); }
.ui-kpi-icone.ok { background: rgba(18,183,106,.12); } .ui-kpi-icone.aviso { background: rgba(247,144,9,.14); } .ui-kpi-icone.erro { background: rgba(240,68,56,.12); }
.ui-kpi-valor { font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ui-kpi-rotulo { font-size: 12px; color: var(--ui-texto-2); }

/* Selos (status) */
.ui-selo { display: inline-flex; align-items: center; gap: 4px; border-radius: 9999px; padding: 2px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ui-selo.ok { background: rgba(18,183,106,.12); color: #027a48; }
.ui-selo.aviso { background: rgba(247,144,9,.14); color: #b54708; }
.ui-selo.erro { background: rgba(240,68,56,.12); color: #b42318; }
.ui-selo.info { background: var(--ui-brand-suave); color: #3538cd; }
.ui-selo.neutro { background: rgba(152,162,179,.18); color: #475467; }
.dark .ui-selo.ok { color: #6ce9a6; } .dark .ui-selo.aviso { color: #fec84b; } .dark .ui-selo.erro { color: #fda29b; } .dark .ui-selo.info { color: #a4b4ff; } .dark .ui-selo.neutro { color: #d0d5dd; }
.ui-cor-ok { color: #039855 !important; } .ui-cor-aviso { color: #dc6803 !important; } .ui-cor-erro { color: #d92d20 !important; }

/* Botões */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
          font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: filter .15s, background .15s, border-color .15s; }
.ui-btn:disabled { opacity: .6; cursor: not-allowed; }
.ui-btn.primario { background: var(--ui-brand); color: #fff; }
.ui-btn.primario:hover:not(:disabled) { background: var(--ui-brand-2); }
.ui-btn.secundario { background: var(--ui-superficie); border-color: var(--ui-borda); color: var(--ui-texto); }
.ui-btn.secundario:hover:not(:disabled) { border-color: var(--ui-brand); color: var(--ui-brand); }
.ui-btn.perigo { background: var(--ui-erro); color: #fff; }
.ui-btn.perigo:hover:not(:disabled) { filter: brightness(1.05); }
.ui-btn.mini { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.ui-link { background: none; border: 0; padding: 0; color: var(--ui-brand); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ui-link:hover { text-decoration: underline; }
.ui-link.perigo { color: var(--ui-erro); }

/* Formulários */
.ui-form { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .ui-form.duas { grid-template-columns: 1fr 1fr; } .ui-form .inteira { grid-column: 1 / -1; } }
.ui-rotulo { display: block; font-size: 12.5px; font-weight: 600; color: var(--ui-texto); margin-bottom: 5px; }
.ui-rotulo small { font-weight: 400; color: var(--ui-texto-2); }
.ui-campo { width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ui-borda); background: var(--ui-superficie); color: var(--ui-texto); }
textarea.ui-campo { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
.ui-campo:focus { outline: none; border-color: var(--ui-brand); box-shadow: 0 0 0 3px var(--ui-brand-suave); }
.ui-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ui-busca { position: relative; flex: 1 1 260px; max-width: 420px; }
.ui-busca .ui-campo { padding-left: 38px; }
.ui-busca::before { content: "🔍"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .6; pointer-events: none; }
.ui-barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Tabelas */
.ui-tabela-wrap { overflow-x: auto; }
.ui-tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.ui-tabela th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-texto-2);
                padding: 9px 10px; border-bottom: 1px solid var(--ui-borda); background: var(--ui-superficie-2); white-space: nowrap; }
.ui-tabela td { padding: 11px 10px; border-bottom: 1px solid var(--ui-borda); vertical-align: middle; }
.ui-tabela tr.clicavel { cursor: pointer; }
.ui-tabela tr.clicavel:hover td { background: var(--ui-superficie-2); }
.ui-tabela tr.inativo td { opacity: .55; }
.ui-acoes-linha { display: flex; gap: 12px; justify-content: flex-end; white-space: nowrap; }

/* Pessoa/entidade com avatar */
.ui-entidade { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-avatar { width: 34px; height: 34px; border-radius: 9999px; flex: none; display: grid; place-items: center; background: var(--ui-brand-suave);
             color: #3538cd; font-size: 12px; font-weight: 700; }
.dark .ui-avatar { color: #c7d2fe; }
.ui-entidade strong { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-entidade small { font-size: 11.5px; color: var(--ui-texto-2); }

/* Listas simples (itens com faixa lateral colorida) */
.ui-lista { display: flex; flex-direction: column; gap: 8px; }
.ui-item { position: relative; display: flex; align-items: center; gap: 12px; border: 1px solid var(--ui-borda); border-radius: var(--ui-raio-2); padding: 10px 12px 10px 16px;
           color: inherit; text-decoration: none !important; overflow: hidden; }
.ui-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ui-brand); }
.ui-item.ok::before { background: var(--ui-ok); } .ui-item.aviso::before { background: var(--ui-aviso); } .ui-item.erro::before { background: var(--ui-erro); }
a.ui-item:hover { border-color: var(--ui-brand); }
.ui-item-info { flex: 1; min-width: 0; }
.ui-item-titulo { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-item-sub { font-size: 11.5px; color: var(--ui-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Estados */
.ui-vazio { border: 1px dashed var(--ui-borda); border-radius: var(--ui-raio-2); padding: 22px; text-align: center; color: var(--ui-texto-2); font-size: 13px; }
.ui-alerta { border-radius: var(--ui-raio-2); padding: 12px 14px; font-size: 13px; border: 1px solid; }
.ui-alerta.ok { background: rgba(18,183,106,.07); border-color: rgba(18,183,106,.35); color: #027a48; }
.ui-alerta.erro { background: rgba(240,68,56,.06); border-color: rgba(240,68,56,.3); color: #b42318; }
.ui-alerta.aviso { background: rgba(247,144,9,.07); border-color: rgba(247,144,9,.35); color: #b54708; }
.dark .ui-alerta.ok { color: #6ce9a6; } .dark .ui-alerta.erro { color: #fda29b; } .dark .ui-alerta.aviso { color: #fec84b; }
.ui-carregando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px; color: var(--ui-texto-2); font-size: 13px; }
.ui-spinner { width: 18px; height: 18px; border-radius: 9999px; border: 2px solid var(--ui-borda); border-top-color: var(--ui-brand); animation: ui-gira .8s linear infinite; }
@keyframes ui-gira { to { transform: rotate(360deg); } }

/* Modal */
.ui-modal { position: fixed; inset: 0; z-index: 100001; display: none; justify-content: center; padding: 20px; overflow-y: auto; }
.ui-modal.aberto { display: flex; }
.ui-modal-fundo { position: fixed; inset: 0; background: rgba(16,24,40,.5); backdrop-filter: blur(6px); }
.ui-modal-caixa { position: relative; width: 100%; max-width: 560px; margin: auto; background: var(--ui-superficie); border: 1px solid var(--ui-borda);
                  border-radius: 20px; padding: 22px; box-shadow: var(--ui-sombra-2); }
.ui-modal-caixa.larga { max-width: 820px; }
.ui-modal-caixa h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; padding-right: 40px; }
.ui-modal-fechar { position: absolute; top: 16px; right: 16px; }
.ui-modal-rodape { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Toast */
.ui-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); z-index: 100010; padding: 11px 16px; border-radius: 12px; background: #101828;
            color: #fff; font-size: 13px; box-shadow: var(--ui-sombra-2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); }
.ui-toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.ui-toast.erro { background: #b42318; } .ui-toast.ok { background: #027a48; }


/* Título de card (substitui "text-lg font-semibold ..." das telas antigas) */
.ui-card-titulo { font-size: 15px; font-weight: 600; color: var(--ui-texto); display: flex; align-items: center; gap: 8px; margin: 0; }
.ui-card > .ui-card-titulo:first-child { margin-bottom: 14px; }

/* Card do cabeçalho de tela: modais escuros do tema continuam iguais */
.dark .ui-modal-caixa { background: #101828; }

/* Uplift das tabelas/cabeçalhos antigos dentro de .ui-card (sem reescrever o HTML) */
.ui-card table.w-full th { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-texto-2) !important; }
.ui-card table.w-full thead tr { background: var(--ui-superficie-2); }
.ui-card table.w-full th:first-child, .ui-card table.w-full td:first-child { padding-left: 10px; }
.ui-card table.w-full tbody tr:hover td { background: var(--ui-superficie-2); }
.ui-card .dt-toolbar { margin-top: 0; }

/* Tela "sem integração" / placeholder */
.ui-estado { text-align: center; padding: 40px 24px; }
.ui-estado .icone { font-size: 44px; line-height: 1; margin-bottom: 12px; }
.ui-estado h3 { font-size: 18px; font-weight: 700; color: var(--ui-texto); margin-bottom: 6px; }
.ui-estado p { font-size: 13px; color: var(--ui-texto-2); max-width: 520px; margin: 0 auto 18px; }

/* Âncoras de seção (páginas longas, ex.: Integrações) */
.ui-secao { scroll-margin-top: 90px; }

/* Avatar de iniciais que ganhou foto (avatares.js) — vale para qualquer classe de avatar */
.avatar-com-foto { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
                   color: transparent !important; border: 0 !important; }
.avatar-com-foto > * { visibility: hidden !important; }