:root {
    color-scheme: dark;

    /* Superficie */
    --bg: #0a0d16;
    --bg-elevado: #10131f;
    --bg-sidebar: #0d0f1a;
    --superficie: #141826;
    --superficie-2: #1a1f31;
    --borda: #242a3d;
    --borda-forte: #323a54;

    /* Texto */
    --texto: #eef1f8;
    --texto-secundario: #a0a8c0;
    --texto-mudo: #6b7390;

    /* Marca / acento (gradiente indigo -> ciano) */
    --acento: #6d6ff6;
    --acento-2: #4fd1e8;
    --acento-fraco: rgba(109, 111, 246, .14);
    --gradiente-marca: linear-gradient(135deg, #6d6ff6 0%, #4fd1e8 100%);

    /* Semanticas */
    --verde: #34d399;
    --verde-bg: rgba(52, 211, 153, .12);
    --vermelho: #fb7185;
    --vermelho-bg: rgba(251, 113, 133, .12);
    --ambar: #fbbf5e;
    --ambar-bg: rgba(251, 191, 94, .12);
    --roxo: #c084fc;
    --roxo-bg: rgba(192, 132, 252, .12);
    --azul: #60a5fa;
    --azul-bg: rgba(96, 165, 250, .12);

    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
    --sombra-flutuante: 0 24px 70px rgba(0, 0, 0, .55);
    --raio: 12px;
    --raio-grande: 16px;
    --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--fonte);
    background: var(--bg);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; }

::selection { background: var(--acento); color: #fff; }

/* Scrollbar discreta, combinando com o tema escuro */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--texto-mudo); }

/* ---------- Login ---------- */
.tela-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 10%, rgba(109, 111, 246, .25), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(79, 209, 232, .18), transparent 45%),
        var(--bg);
}

.tela-login::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 50% 40%, black, transparent 75%);
    pointer-events: none;
}

.login-card {
    position: relative;
    width: 380px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
    padding: 40px 36px;
    box-shadow: var(--sombra-flutuante);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 30px;
}

.login-brand h1 {
    font-size: 21px;
    letter-spacing: -.2px;
    font-weight: 700;
}

.login-brand p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--texto-secundario);
}

.login-brand-mark {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: none;
    border-radius: 10px;
}

#form-login { display: flex; flex-direction: column; gap: 16px; }

#form-login label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
    color: var(--texto-secundario);
    font-weight: 600;
}

#form-login input {
    font-size: 14px;
    padding: 11px 13px;
    border-radius: 9px;
    border: 1px solid var(--borda);
    background: var(--bg-elevado);
    color: var(--texto);
    transition: border-color .15s ease, box-shadow .15s ease;
}

#form-login input:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-fraco);
}

#form-login button {
    margin-top: 6px;
    padding: 12px 16px;
    border: none;
    border-radius: 9px;
    background: var(--gradiente-marca);
    color: #0a0d16;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease;
}

#form-login button:hover { filter: brightness(1.08); }
#form-login button:active { transform: scale(.99); }
#form-login button:disabled { opacity: .6; cursor: default; }

.login-erro {
    background: var(--vermelho-bg);
    color: var(--vermelho);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
}

/* ---------- Shell ---------- */
.app-shell {
    display: grid;
    grid-template-columns: 252px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--borda);
    color: var(--texto);
    display: flex;
    flex-direction: column;
    padding: 22px 14px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -.1px;
    padding: 4px 10px 26px;
}

.sidebar-brand .login-brand-mark { width: 30px; height: 30px; border-radius: 8px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--texto-secundario);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}

.sidebar-nav a svg { flex: none; opacity: .85; }

.sidebar-nav a:hover { background: var(--superficie); color: var(--texto); }

.sidebar-nav a.ativo {
    background: var(--acento-fraco);
    color: #fff;
}

.sidebar-nav a.ativo svg { opacity: 1; color: var(--acento-2); }

.sidebar-footer {
    border-top: 1px solid var(--borda);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-user { padding: 0 8px; display: flex; align-items: center; gap: 10px; }

.sidebar-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--gradiente-marca);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    color: #0a0d16;
    flex: none;
}

#sidebar-user-login { font-size: 13px; font-weight: 600; color: var(--texto); }

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

.conteudo-header {
    background: rgba(10, 13, 22, .7);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borda);
    padding: 20px 34px;
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.conteudo-header h2 { font-size: 19px; letter-spacing: -.2px; }

.conteudo-header-acoes { display: flex; gap: 10px; align-items: center; }

.conteudo-corpo { padding: 30px 34px 60px; overflow: auto; }

/* ---------- Componentes comuns ---------- */
.botao-primario, .botao-secundario, .botao-perigo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 9px;
    padding: 9px 16px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter .12s ease, transform .1s ease, background .12s ease;
    font-family: inherit;
}

.botao-primario { background: var(--gradiente-marca); color: #0a0d16; }
.botao-primario:hover { filter: brightness(1.08); }
.botao-primario:active { transform: scale(.98); }
.botao-primario:disabled { opacity: .55; cursor: default; filter: none; }

.botao-secundario {
    background: var(--superficie);
    color: var(--texto);
    border-color: var(--borda);
}
.botao-secundario:hover { background: var(--superficie-2); border-color: var(--borda-forte); }
.botao-secundario:disabled { opacity: .5; cursor: default; }

.botao-gerar {
    background: var(--bg-elevado);
    color: var(--texto);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 0 14px;
    font-size: 15px;
    cursor: pointer;
}
.botao-gerar:hover { background: var(--superficie-2); }

.linha-chave { display: flex; gap: 8px; }
.linha-chave input, .linha-chave select { flex: 1; }

.chips-processos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 20px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--acento-fraco);
    color: var(--acento-2);
    border: 1px solid rgba(109, 111, 246, .3);
    border-radius: 999px;
    padding: 5px 8px 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.chip button {
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0;
}

.chip button:hover { color: var(--vermelho); }

.chips-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.chip-mini {
    background: var(--superficie-2);
    color: var(--texto-secundario);
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.botao-perigo { background: var(--vermelho-bg); color: var(--vermelho); }
.botao-perigo:hover { filter: brightness(1.15); }

.barra-acoes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
}

.barra-acoes p { margin: 0; color: var(--texto-secundario); font-size: 13px; }
.barra-acoes-direita { display: flex; gap: 10px; align-items: center; }

/* Cards KPI */
.grade-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.card-kpi {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 20px 22px;
    box-shadow: var(--sombra);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-kpi::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 140px;
    height: 140px;
    background: var(--icone-cor, var(--acento));
    opacity: .12;
    border-radius: 50%;
    filter: blur(10px);
}

.card-kpi-topo { display: flex; align-items: center; justify-content: space-between; }

.card-kpi .icone-kpi {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--icone-cor, var(--acento)) 16%, transparent);
    color: var(--icone-cor, var(--acento));
    flex: none;
}

.card-kpi .rotulo {
    font-size: 12px;
    color: var(--texto-secundario);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.card-kpi .valor {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.4px;
}

/* Tabelas */
.tabela-card {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    /* auto (nao hidden): tabela mais larga que a tela rola na horizontal em vez de cortar a
       coluna da direita - era assim que os botoes de acao dos tenants sumiam (2026-09-25).
       Continua arredondando os cantos (qualquer overflow != visible recorta no border-radius). */
    overflow-x: auto;
    overflow-y: hidden;
}

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

thead th {
    text-align: left;
    background: var(--bg-elevado);
    color: var(--texto-secundario);
    font-weight: 600;
    padding: 12px 18px;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-elevado); }

.celula-principal { font-weight: 600; }
.celula-secundaria { color: var(--texto-secundario); font-size: 12.5px; }

.estado-vazio, .estado-carregando {
    padding: 60px 20px;
    text-align: center;
    color: var(--texto-secundario);
    font-size: 14px;
}

.estado-vazio svg, .estado-carregando svg {
    display: block;
    margin: 0 auto 14px;
    color: var(--texto-mudo);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.badge-verde { background: var(--verde-bg); color: var(--verde); }
.badge-vermelho { background: var(--vermelho-bg); color: var(--vermelho); }
.badge-ambar { background: var(--ambar-bg); color: var(--ambar); }
.badge-roxo { background: var(--roxo-bg); color: var(--roxo); }
.badge-neutro { background: var(--superficie-2); color: var(--texto-secundario); }
.badge-azul { background: var(--azul-bg); color: var(--azul); }

.badge-ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 12, .7);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow: auto;
    z-index: 50;
}

.modal-caixa {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
    width: 540px;
    max-width: 100%;
    padding: 28px 30px 26px;
    box-shadow: var(--sombra-flutuante);
}

.modal-caixa-larga { width: 760px; }

.modal-caixa h3 { font-size: 17px; margin-bottom: 20px; letter-spacing: -.1px; }

.modal-caixa form { display: flex; flex-direction: column; gap: 15px; }

.linha-form { display: flex; gap: 14px; }
.linha-form > * { flex: 1; }

.campo { display: flex; flex-direction: column; gap: 7px; }

.campo span { font-size: 12.5px; font-weight: 600; color: var(--texto-secundario); }

.campo input, .campo select, .campo textarea {
    font-size: 13.5px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--bg-elevado);
    color: var(--texto);
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.campo input[readonly] {
    background: var(--superficie-2);
    color: var(--texto-secundario);
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-fraco);
}

.aviso-inline {
    background: var(--ambar-bg);
    color: var(--ambar);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 12px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.aviso-inline svg { flex: none; margin-top: 1px; }

.opcoes-toggle {
    display: flex;
    gap: 6px;
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-radius: 9px;
    padding: 4px;
}

.opcoes-toggle button {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto-secundario);
    cursor: pointer;
    font-family: inherit;
}

.opcoes-toggle button.ativo {
    background: var(--superficie-2);
    color: var(--texto);
    box-shadow: var(--sombra);
}

/* Toggle switch - usado na lista de processos (ver .linha-processo) */
.interruptor {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 23px;
    flex: none;
}

.interruptor input { opacity: 0; width: 0; height: 0; }

.interruptor-trilho {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--borda-forte);
    border-radius: 999px;
    transition: background .15s ease;
}

.interruptor-trilho::before {
    content: "";
    position: absolute;
    height: 17px;
    width: 17px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s ease;
}

.interruptor input:checked + .interruptor-trilho { background: var(--gradiente-marca); }
.interruptor input:checked + .interruptor-trilho::before { transform: translateX(17px); }

/* Portal do cliente no modal de usuarios do tenant - ver carregarPortal */
.modal-caixa form.bloco-portal {
    display: grid;
    grid-template-columns: 1fr 170px auto;
    align-items: end;
    gap: 6px 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 14px 16px;
    margin: 4px 0 14px;
}

.campo select.select-compacto { padding: 6px 8px; font-size: 12.5px; border-radius: 7px; }

.bloco-portal-liberado { display: flex; align-items: center; gap: 12px; align-self: center; cursor: pointer; }
.bloco-portal-rodape, .bloco-portal .form-erro { grid-column: 1 / -1; }

@media (max-width: 620px) {
    .modal-caixa form.bloco-portal { grid-template-columns: 1fr auto; }
    .bloco-portal-liberado { grid-column: 1 / -1; }
}

/* Categorias de processo (aba) + lista dentro de cada aba - ver blocosProcessosHtml */
.abas-categoria-processo {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--borda);
    padding-bottom: 10px;
    margin-bottom: 4px;
}

.aba-categoria-processo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: transparent;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto-secundario);
    cursor: pointer;
    font-family: inherit;
}

.aba-categoria-processo:hover { color: var(--texto); }

.aba-categoria-processo.ativo {
    background: var(--superficie-2);
    color: var(--texto);
}

.aba-categoria-contagem {
    background: var(--acento-fraco);
    color: var(--acento-2);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
}

/* Lista densa de processos dentro de cada aba - uma linha por processo, em
   vez do card grande usado antes (icone+nome+toggle numa linha so; os campos
   de agendamento ficam na MESMA linha quando habilitado, nao numa secao
   separada abaixo). Com poucos processos a diferenca nao aparece, mas com
   ~15 numa categoria isso e o que faz o modal continuar cabendo na tela -
   o painel tem altura maxima e rola por conta propria (ver .painel-processos). */
.painel-processos {
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.linha-processo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--borda);
}

.linha-processo:last-child { border-bottom: none; }

.linha-processo-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.linha-processo-icone {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--acento-fraco);
    color: var(--acento-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.linha-processo-icone svg { width: 15px; height: 15px; }

.linha-processo-nome { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-processo-sub { font-size: 11px; color: var(--texto-secundario); }

.linha-processo-agendamento {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 12px;
    color: var(--texto-secundario);
}

.linha-processo-agendamento input[type="number"] {
    width: 52px;
    padding: 6px 7px;
    font-size: 12.5px;
    border-radius: 7px;
    border: 1px solid var(--borda);
    background: var(--bg-elevado);
    color: var(--texto);
    font-family: inherit;
}

.linha-processo-agendamento select {
    padding: 6px 7px;
    font-size: 12.5px;
    border-radius: 7px;
    border: 1px solid var(--borda);
    background: var(--bg-elevado);
    color: var(--texto);
    font-family: inherit;
}

@media (max-width: 620px) {
    .linha-processo { flex-wrap: wrap; }
    .linha-processo-agendamento { order: 3; flex-basis: 100%; margin-left: 38px; }
}

/* Resumo compacto de processos na listagem (badge + popover flutuante) - ver rotuloAgendamento */
.botao-resumo-processos {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--superficie-2);
    color: var(--texto-secundario);
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: color .15s ease, border-color .15s ease;
}

.botao-resumo-processos svg { width: 13px; height: 13px; flex: none; }
.botao-resumo-processos:hover { color: var(--texto); border-color: var(--borda-forte); }

/* Elemento unico, anexado no <body> (nao dentro da tabela) e posicionado via
   JS a cada abertura - ver popoverProcessosEl() em app.js. Precisa viver
   fora de .tabela-card porque ela usa overflow:hidden pra arredondar os
   cantos da propria tabela, o que cortava um popover aninhado ali dentro
   (bug relatado em 2026-08-19: so uma faixa fina aparecia). */
.popover-processos-flutuante {
    position: fixed;
    z-index: 60;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-flutuante);
    padding: 10px;
    min-width: 260px;
    max-width: 340px;
}

.chips-mini-coluna { display: flex; flex-direction: column; gap: 6px; }
.chips-mini-coluna .chip-mini { display: flex; align-items: center; gap: 6px; white-space: normal; }
.chips-mini-coluna .chip-mini svg { flex: none; }

.lista-checkbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 160px;
    overflow: auto;
    border: 1px solid var(--borda);
    border-radius: 9px;
    padding: 10px 12px;
    background: var(--bg-elevado);
}

.lista-checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
}

.rodape-modal {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

.form-erro {
    background: var(--vermelho-bg);
    color: var(--vermelho);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 12.5px;
}

/* Toast */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    color: var(--texto);
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--sombra-flutuante);
    max-width: 340px;
    animation: entrada-toast .18s ease;
}

.toast.erro { border-color: rgba(251, 113, 133, .4); color: var(--vermelho); }
.toast.sucesso { border-color: rgba(52, 211, 153, .4); color: var(--verde); }

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

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

.girando { animation: girar .7s linear infinite; }

.acoes-tabela {
    display: flex;
    gap: 4px;
    opacity: .55;
    transition: opacity .12s ease;
}

/* Coluna de acoes fixa na direita: sempre visivel, mesmo quando a tabela precisa rolar. */
tbody td:has(> .acoes-tabela),
table:has(.acoes-tabela) thead th:last-child {
    position: sticky;
    right: 0;
    background: var(--superficie);
    box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .45);
}
table:has(.acoes-tabela) thead th:last-child { background: var(--bg-elevado); }
tbody tr:hover td:has(> .acoes-tabela) { background: var(--bg-elevado); }

tbody tr:hover .acoes-tabela,
tbody tr:focus-within .acoes-tabela {
    opacity: 1;
}

.botao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--texto-secundario);
    cursor: pointer;
    font-family: inherit;
}

.botao-icone:hover { background: var(--superficie-2); color: var(--texto); }
.botao-icone:disabled { opacity: .4; cursor: default; }
.botao-icone:disabled:hover { background: transparent; }

.botao-icone-perigo:hover { background: var(--vermelho-bg); color: var(--vermelho); }
.botao-icone-sucesso:hover { background: var(--verde-bg); color: var(--verde); }
.botao-icone-ambar:hover { background: var(--ambar-bg); color: var(--ambar); }

/* Faixa de ambiente nao-produtivo (ver mostrarFaixaAmbiente em app.js) */
.faixa-ambiente {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #1a1200;
    background: repeating-linear-gradient(-45deg, #fbbf24, #fbbf24 14px, #f59e0b 14px, #f59e0b 28px);
    border-bottom: 1px solid #b45309;
}
body.com-faixa-ambiente { padding-top: 28px; }