/* ==========================================================================
   Central de RPAs — componentes
   Cada bloco aqui corresponde a uma macro em templates/components/ui.html ou
   a um módulo em static/js/core/. Página nova = montar com estas peças.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 38px;
    padding: 0 var(--e-4);
    border: 1px solid transparent;
    border-radius: var(--raio-md);
    background: var(--superficie-2);
    color: var(--texto);
    font-size: var(--fs-sm);
    font-weight: var(--peso-medio);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva),
        color var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
}
.btn:hover { background: var(--superficie-3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn i { font-size: 1.05em; }

.btn-primaria { background: var(--primaria); color: var(--sobre-primaria); }
.btn-primaria:hover { background: var(--primaria-hover); }

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

.btn-fantasma { background: transparent; color: var(--texto-2); }
.btn-fantasma:hover { background: var(--superficie-2); color: var(--texto); }

/* Texto em --sobre-estado: branco no claro, quase-preto no escuro (o branco
   sobre o verde/vermelho claros do tema escuro dava 1,9:1 e 2,9:1). */
.btn-perigo { background: var(--falha); color: var(--sobre-estado); }
.btn-perigo:hover { background: color-mix(in srgb, var(--falha) 85%, #000); }

.btn-ok { background: var(--ok); color: var(--sobre-estado); }
.btn-ok:hover { background: color-mix(in srgb, var(--ok) 85%, #000); }

.btn-sm { min-height: 30px; padding: 0 var(--e-3); font-size: var(--fs-xs); border-radius: var(--raio-sm); }
.btn-lg { min-height: 46px; padding: 0 var(--e-6); font-size: var(--fs-base); }
.btn-icone { width: 38px; padding: 0; }
.btn-icone.btn-sm { width: 30px; }

/* --------------------------------------------------------------------------
   Cabeçalho de página e manchete (o "lide" de cada tela)
   -------------------------------------------------------------------------- */
.pagina-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-4);
    margin-bottom: var(--e-6);
}
.pagina-cabecalho .sobretitulo {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-2);
    color: var(--primaria-texto);
    font-size: var(--fs-xs);
    font-weight: var(--peso-forte);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pagina-cabecalho h1 { margin: 0; font-size: var(--fs-2xl); }
.pagina-cabecalho .subtitulo { margin: var(--e-2) 0 0; color: var(--texto-2); max-width: 70ch; }
.pagina-cabecalho .acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.manchete {
    position: relative;
    overflow: hidden;
    padding: var(--e-8);
    margin-bottom: var(--e-8);
    border-radius: var(--raio-xl);
    /* Sem degradê (08-10-2026): o teal + laranja radial era só decoração e, no
       tema escuro, virava uma mancha marrom atrás do texto. */
    background: var(--superficie);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-1);
}
.manchete .saudacao {
    margin: 0 0 var(--e-2);
    color: var(--texto-3);
    font-size: var(--fs-sm);
    font-weight: var(--peso-medio);
}
.manchete .texto {
    margin: 0;
    max-width: 38ch;
    font-family: var(--fonte-titulo);
    font-size: var(--fs-manchete);
    font-weight: var(--peso-titulo);
    line-height: 1.18;
    letter-spacing: -0.025em;
}
.manchete .texto em {
    font-style: normal;
    color: var(--primaria-texto);
}
.manchete .texto .destaque-falha { color: var(--falha); }
.manchete .texto .destaque-atencao { color: var(--atencao); }
.manchete .texto .destaque-ok { color: var(--ok); }
.manchete .contexto {
    margin: var(--e-4) 0 0;
    max-width: 70ch;
    color: var(--texto-2);
    font-size: var(--fs-base);
}
/* Manchete logo abaixo do cabeçalho da página: vira o resumo, um degrau
   abaixo do título (no painel público ela continua grande). */
.pagina-cabecalho + .manchete { padding: var(--e-6); margin-bottom: var(--e-6); }
.pagina-cabecalho + .manchete .texto { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem); max-width: 52ch; }
.pagina-cabecalho + .manchete .contexto { margin-top: var(--e-3); font-size: var(--fs-sm); }
.manchete .contexto:empty,
.manchete .rodape-manchete:empty { display: none; }
.manchete .rodape-manchete {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-5);
    margin-top: var(--e-5);
    color: var(--texto-3);
    font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   Capítulos (a história da página em blocos numerados)
   -------------------------------------------------------------------------- */
.capitulo { margin-bottom: var(--e-10); }
.capitulo-cabecalho {
    display: flex;
    align-items: flex-start;
    gap: var(--e-4);
    margin-bottom: var(--e-4);
}
.capitulo-numero {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--superficie-invertida);
    color: var(--texto-invertido);
    font-family: var(--fonte-numero);
    font-size: var(--fs-sm);
    font-weight: var(--peso-forte);
}
.capitulo-cabecalho h2 { margin: 2px 0 var(--e-1); font-size: var(--fs-lg); }
.capitulo-cabecalho p { margin: 0; color: var(--texto-2); font-size: var(--fs-sm); max-width: 72ch; }
.capitulo-cabecalho .acoes { margin-left: auto; display: flex; gap: var(--e-2); }

/* --------------------------------------------------------------------------
   Cartão / painel
   -------------------------------------------------------------------------- */
.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-1);
}
.cartao-corpo { padding: var(--e-5); }
.cartao-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-4) var(--e-5);
    border-bottom: 1px solid var(--borda);
}
.cartao-cabecalho h2,
.cartao-cabecalho h3 { margin: 0; font-size: var(--fs-base); }
/* Cartão que pede ação (ex.: "O que precisa de você" com itens): sobe um
   degrau — borda âmbar e sombra maior. O JS liga data-urgente="true". */
.cartao[data-urgente="true"] {
    border-color: color-mix(in srgb, var(--atencao) 45%, var(--borda));
    box-shadow: var(--sombra-2);
}
.cartao-rodape {
    padding: var(--e-3) var(--e-5);
    border-top: 1px solid var(--borda);
    color: var(--texto-3);
    font-size: var(--fs-xs);
}
a.cartao { display: block; color: inherit; transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida), transform var(--dur-rapida); }
a.cartao:hover { text-decoration: none; border-color: var(--borda-forte); box-shadow: var(--sombra-2); transform: translateY(-1px); }

/* Grades responsivas simples */
.grade { display: grid; gap: var(--e-4); }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.pilha { display: grid; gap: var(--e-3); }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.linha-entre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }

/* --------------------------------------------------------------------------
   KPI (número que conta algo)
   -------------------------------------------------------------------------- */
.kpi {
    display: flex;
    flex-direction: column;
    gap: var(--e-1);
    padding: var(--e-5);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-1);
}
.kpi-rotulo {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    color: var(--texto-2);
    font-size: var(--fs-sm);
    font-weight: var(--peso-medio);
}
.kpi-rotulo i { color: var(--texto-3); }
.kpi-valor {
    font-family: var(--fonte-numero);
    font-size: var(--fs-kpi);
    font-weight: var(--peso-titulo);
    line-height: 1.1;
    letter-spacing: -0.03em;
}
.kpi-valor small { font-size: 0.5em; color: var(--texto-3); font-weight: var(--peso-medio); letter-spacing: 0; }
.kpi-nota { color: var(--texto-3); font-size: var(--fs-xs); }
.kpi[data-estado="ok"] .kpi-valor { color: var(--ok); }
.kpi[data-estado="atencao"] .kpi-valor { color: var(--atencao); }
.kpi[data-estado="falha"] .kpi-valor { color: var(--falha); }

/* Barra de progresso */
.progresso {
    height: 8px;
    border-radius: var(--raio-pilula);
    background: var(--superficie-3);
    overflow: hidden;
}
.progresso > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primaria);
    transition: width var(--dur-lenta) var(--curva);
}
.progresso[data-estado="ok"] > span { background: var(--ok); }
.progresso[data-estado="atencao"] > span { background: var(--atencao); }
.progresso[data-estado="falha"] > span { background: var(--falha); }

/* --------------------------------------------------------------------------
   Selo de estado — SEMPRE ícone + texto (nunca só cor)
   -------------------------------------------------------------------------- */
.selo {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.15em 0.6em;
    border-radius: var(--raio-pilula);
    background: var(--neutro-suave);
    color: var(--texto-2);
    font-size: var(--fs-xs);
    font-weight: var(--peso-forte);
    line-height: 1.6;
    white-space: nowrap;
}
.selo i { font-size: 0.95em; }
.selo[data-estado="ok"] { background: var(--ok-suave); color: var(--ok); }
.selo[data-estado="atencao"] { background: var(--atencao-suave); color: var(--atencao); }
.selo[data-estado="falha"] { background: var(--falha-suave); color: var(--falha); }
.selo[data-estado="rodando"] { background: var(--rodando-suave); color: var(--primaria-texto); }
.selo[data-estado="neutro"] { background: var(--neutro-suave); color: var(--texto-2); }
.selo[data-estado="info"] { background: var(--acento-suave); color: var(--acento-texto); }
.selo[data-estado="rodando"] i { animation: girar 1.4s linear infinite; }

/* Ponto de estado: além da cor, a FORMA conta (verde e vermelho têm a mesma
   luminosidade; para quem tem daltonismo são o mesmo ponto). Círculo = deu
   certo/neutro, quadrado = falhou, losango = atenção. */
.ponto {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--neutro);
    flex: none;
    vertical-align: middle;
}
.ponto[data-estado="ok"] { background: var(--ok); }
.ponto[data-estado="atencao"] { background: var(--atencao); border-radius: 1px; transform: rotate(45deg) scale(0.9); }
.ponto[data-estado="falha"] { background: var(--falha); border-radius: 2px; }
.ponto[data-estado="rodando"] { background: var(--rodando); box-shadow: 0 0 0 0 var(--rodando); animation: pulsar 1.6s infinite; }

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes pulsar {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rodando) 60%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* --------------------------------------------------------------------------
   Chips de filtro e controle segmentado
   -------------------------------------------------------------------------- */
.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2) var(--e-4);
    margin-bottom: var(--e-5);
}
.filtros .rotulo-filtro { color: var(--texto-3); font-size: var(--fs-xs); font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: 0.06em; }

.segmentado {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: var(--raio-md);
    background: var(--superficie-2);
    border: 1px solid var(--borda);
}
.segmentado button,
.segmentado a {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    min-height: 30px;
    padding: 0 var(--e-3);
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--texto-2);
    font-size: var(--fs-sm);
    font-weight: var(--peso-medio);
    cursor: pointer;
    white-space: nowrap;
}
.segmentado button:hover,
.segmentado a:hover { color: var(--texto); text-decoration: none; }
.segmentado [aria-pressed="true"],
.segmentado [aria-current="page"] {
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra-1);
}

/* --------------------------------------------------------------------------
   Formulários
   -------------------------------------------------------------------------- */
.campo { display: grid; gap: var(--e-1); }
.campo label,
.campo .rotulo { font-size: var(--fs-sm); font-weight: var(--peso-medio); color: var(--texto); }
.campo .ajuda { font-size: var(--fs-xs); color: var(--texto-3); }
.campo .erro { font-size: var(--fs-xs); color: var(--falha); }
.campos-em-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e-2); align-items: end; }
/* Formulário em partes (secao) e tabela de campos (tabela) — ui.formulario */
.secao-form { display: grid; gap: var(--e-1); padding-top: var(--e-2); border-top: 1px solid var(--borda); }
.secao-form h3 { margin: 0; font-size: var(--fs-base); font-weight: var(--peso-forte); color: var(--texto); }
.secao-form .ajuda { font-size: var(--fs-xs); color: var(--texto-3); }
.tabela-form td { vertical-align: middle; }
.tabela-form .entrada, .tabela-form .selecao { min-width: 84px; }
.tabela-form td.nao-se-aplica { color: var(--texto-3); text-align: center; }
.tabela-form th { white-space: nowrap; }
.recolhivel-form { border: 1px solid var(--borda); border-radius: var(--raio-md); padding: var(--e-3) var(--e-4); }
.recolhivel-form > summary { cursor: pointer; font-weight: var(--peso-forte); min-height: 28px; display: list-item; }
.recolhivel-form[open] > summary { margin-bottom: var(--e-3); }
/* Campo mudado no formulário (contarAlteracoes): borda de atenção, nunca só cor — o rodapé conta. */
.dialogo .entrada[data-alterado], .dialogo .selecao[data-alterado] { border-color: var(--atencao); box-shadow: 0 0 0 1px var(--atencao); }
.dialogo .interruptor[data-alterado] .trilho { outline: 2px solid var(--atencao); outline-offset: 2px; }
.contador-alteracoes { margin-right: auto; font-size: var(--fs-sm); color: var(--texto-3); align-self: center; }
.contador-alteracoes[data-alterado] { color: var(--texto); font-weight: var(--peso-forte); }
.campos-em-linha .campo label { font-weight: var(--peso-normal, 400); color: var(--texto-3); }
.campo input[readonly] { background: var(--superficie-2); color: var(--texto-3); }

.entrada,
.selecao,
.area-texto {
    width: 100%;
    min-height: 38px;
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-md);
    background: var(--superficie);
    color: var(--texto);
    font-size: var(--fs-sm);
    transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida);
}
.area-texto { min-height: 96px; resize: vertical; line-height: var(--altura-linha); }
.entrada:focus,
.selecao:focus,
.area-texto:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: 0 0 0 3px var(--foco);
}
.entrada[aria-invalid="true"],
.selecao[aria-invalid="true"],
.area-texto[aria-invalid="true"] { border-color: var(--falha); }
.entrada-sm { min-height: 30px; padding: var(--e-1) var(--e-2); font-size: var(--fs-xs); border-radius: var(--raio-sm); }

.caixa {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.caixa input { width: 16px; height: 16px; accent-color: var(--primaria); }

/* Interruptor */
.interruptor { position: relative; display: inline-flex; align-items: center; gap: var(--e-2); cursor: pointer; font-size: var(--fs-sm); }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor .trilho {
    width: 36px; height: 20px;
    border-radius: var(--raio-pilula);
    background: var(--superficie-3);
    border: 1px solid var(--borda-forte);
    position: relative;
    transition: background var(--dur-rapida);
}
.interruptor .trilho::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--texto-3);
    transition: transform var(--dur-media) var(--curva), background var(--dur-media);
}
.interruptor input:checked + .trilho { background: var(--primaria); border-color: var(--primaria); }
.interruptor input:checked + .trilho::after { transform: translateX(16px); background: #fff; }
.interruptor input:focus-visible + .trilho { outline: 2px solid var(--primaria); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Edição inline — o valor parece texto, mas é clicável e mostra o lápis
   -------------------------------------------------------------------------- */
.editavel {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    max-width: 100%;
    margin: -2px -6px;
    padding: 2px 6px;
    border-radius: var(--raio-sm);
    border: 1px dashed transparent;
    cursor: text;
    transition: background var(--dur-rapida), border-color var(--dur-rapida);
}
.editavel::after {
    content: "\F4CB"; /* bi-pencil */
    font-family: "bootstrap-icons";
    font-size: 0.8em;
    color: var(--texto-3);
    opacity: 0;
    transition: opacity var(--dur-rapida);
}
.editavel:hover,
.editavel:focus-visible { background: var(--superficie-2); border-color: var(--borda-forte); }
.editavel:hover::after,
.editavel:focus-visible::after { opacity: 1; }
.editavel[data-vazio="true"] { color: var(--texto-3); font-style: italic; }
.editavel.bloco { display: flex; align-items: flex-start; }
.editavel.salvando { opacity: 0.6; pointer-events: none; }
.editavel-editor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); width: 100%; }
.editavel-editor .entrada,
.editavel-editor .selecao,
.editavel-editor .area-texto { flex: 1 1 200px; }
.editavel-dica { width: 100%; font-size: var(--fs-2xs); color: var(--texto-3); }

/* --------------------------------------------------------------------------
   Tabela de dados
   -------------------------------------------------------------------------- */
.tabela-envoltorio {
    overflow-x: auto;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-1);
}
.tabela { font-size: var(--fs-sm); }
.tabela th {
    position: sticky;
    top: 0;
    padding: var(--e-3) var(--e-4);
    background: var(--superficie-2);
    color: var(--texto-3);
    font-size: var(--fs-xs);
    font-weight: var(--peso-forte);
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--borda);
}
.tabela td {
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background var(--dur-rapida); }
.tabela tbody tr:hover { background: color-mix(in srgb, var(--superficie-2) 60%, transparent); }
.tabela tr[data-clicavel] { cursor: pointer; }
.tabela .fraco { color: var(--texto-3); }
.tabela .direita { text-align: right; }
.tabela .quebra { white-space: normal; min-width: 240px; overflow-wrap: anywhere; }
/* Texto longo de célula: até 2 linhas, o texto inteiro fica no title (e
   aparece todo ao abrir a edição). */
.tabela .duas-linhas:not([data-editando="true"]) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Estado vazio, carregando, avisos
   -------------------------------------------------------------------------- */
.vazio {
    display: grid;
    justify-items: center;
    gap: var(--e-2);
    padding: var(--e-10) var(--e-6);
    color: var(--texto-2);
    text-align: center;
}
.vazio i { font-size: 1.75rem; color: var(--texto-3); }
.vazio i.bi-check2-circle { color: var(--ok); }  /* "tudo em dia" */
.vazio strong { color: var(--texto); font-size: var(--fs-base); }
.vazio p { margin: 0; max-width: 46ch; font-size: var(--fs-sm); }

.esqueleto {
    display: block;
    border-radius: var(--raio-sm);
    background: linear-gradient(90deg, var(--superficie-2) 0%, var(--superficie-3) 50%, var(--superficie-2) 100%);
    background-size: 200% 100%;
    animation: brilho 1.3s ease-in-out infinite;
}
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.aviso {
    display: flex;
    gap: var(--e-3);
    padding: var(--e-4);
    border-radius: var(--raio-lg);
    border: 1px solid var(--borda);
    background: var(--superficie-2);
    color: var(--texto);
    font-size: var(--fs-sm);
}
.aviso > i { font-size: 1.15rem; flex: none; line-height: 1.3; }
.aviso p:last-child { margin-bottom: 0; }
.aviso[data-estado="ok"] { background: var(--ok-suave); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.aviso[data-estado="ok"] > i { color: var(--ok); }
.aviso[data-estado="atencao"] { background: var(--atencao-suave); border-color: color-mix(in srgb, var(--atencao) 30%, transparent); }
.aviso[data-estado="atencao"] > i { color: var(--atencao); }
.aviso[data-estado="falha"] { background: var(--falha-suave); border-color: color-mix(in srgb, var(--falha) 30%, transparent); }
.aviso[data-estado="falha"] > i { color: var(--falha); }
.aviso[data-estado="info"] { background: var(--primaria-suave); border-color: color-mix(in srgb, var(--primaria) 30%, transparent); }
.aviso[data-estado="info"] > i { color: var(--primaria-texto); }
/* Interruptor dos robôs (tela Hoje): verde = ligados, vermelho = pausados.
   Mesma história da janela do atalho da área de trabalho. */
.robos-chave {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4);
    padding: var(--e-4) var(--e-5); border-radius: var(--raio-lg); border: 1px solid var(--borda);
}
.robos-chave[data-estado="ligado"] { background: var(--ok-suave); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.robos-chave[data-estado="pausado"] { background: var(--falha-suave); border-color: color-mix(in srgb, var(--falha) 35%, transparent); }
.robos-chave .historia { flex: 1 1 18rem; min-width: 0; }
.robos-chave .estado { font-weight: 700; font-size: var(--fs-base); letter-spacing: .02em; }
.robos-chave[data-estado="ligado"] .estado { color: var(--ok); }
.robos-chave[data-estado="pausado"] .estado { color: var(--falha); }
.robos-chave .historia p { margin: var(--e-1) 0 0; font-size: var(--fs-sm); color: var(--texto-2); }
/* A chave em si: pílula com bolinha (direita = ligado). */
.chave {
    position: relative; flex: none; width: 56px; height: 30px; border-radius: 999px; border: 0; padding: 0;
    background: var(--falha); transition: background .2s; cursor: default;
}
.chave[aria-checked="true"] { background: var(--ok); }
.chave::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: left .2s;
}
.chave[aria-checked="true"]::after { left: 29px; }
button.chave:not(:disabled) { cursor: pointer; }
button.chave:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Diálogo (substitui modal do Bootstrap e confirm()/prompt()/alert())
   -------------------------------------------------------------------------- */
dialog.dialogo {
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: var(--raio-xl);
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra-3);
    overflow: hidden;
}
dialog.dialogo[data-tamanho="grande"] { width: min(960px, calc(100vw - 2rem)); }
dialog.dialogo::backdrop { background: var(--sobreposicao); backdrop-filter: blur(2px); }
dialog.dialogo[open] { animation: surgir var(--dur-media) var(--curva); }
@keyframes surgir { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

.dialogo-forma { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
.dialogo-cabecalho {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: var(--e-5) var(--e-6) var(--e-3);
}
.dialogo-cabecalho h2 { margin: 0; font-size: var(--fs-lg); }
.dialogo-cabecalho .fechar { margin-left: auto; }
.dialogo-icone {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--primaria-suave);
    color: var(--primaria-texto);
    font-size: 1.15rem;
}
.dialogo-icone[data-estado="falha"] { background: var(--falha-suave); color: var(--falha); }
.dialogo-icone[data-estado="atencao"] { background: var(--atencao-suave); color: var(--atencao); }
.dialogo-corpo { padding: var(--e-2) var(--e-6) var(--e-5); overflow-y: auto; color: var(--texto-2); }
.dialogo-corpo .pilha { gap: var(--e-4); }
.dialogo-rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--e-2);
    padding: var(--e-4) var(--e-6);
    background: var(--superficie-2);
    border-top: 1px solid var(--borda);
}

/* --------------------------------------------------------------------------
   Toast (aviso rápido, com "Desfazer" quando fizer sentido)
   -------------------------------------------------------------------------- */
.toasts {
    position: fixed;
    right: var(--e-5);
    bottom: var(--e-5);
    z-index: var(--z-toast);
    display: grid;
    gap: var(--e-2);
    width: min(400px, calc(100vw - 2rem));
}
.toast {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--raio-lg);
    background: var(--superficie-invertida);
    color: var(--texto-invertido);
    box-shadow: var(--sombra-3);
    font-size: var(--fs-sm);
    animation: surgir var(--dur-media) var(--curva);
}
.toast i { font-size: 1.1rem; }
.toast[data-estado="ok"] i { color: var(--ok); }
.toast[data-estado="falha"] i { color: var(--falha); }
.toast[data-estado="atencao"] i { color: var(--atencao); }
.toast .toast-acao {
    margin-left: auto;
    padding: var(--e-1) var(--e-2);
    border: 0;
    border-radius: var(--raio-sm);
    background: transparent;
    color: var(--toast-acao);
    font-weight: var(--peso-forte);
    cursor: pointer;
}
.toast .toast-acao + .toast-fechar { margin-left: 0; }
.toast .toast-fechar {
    margin-left: auto;
    padding: var(--e-1);
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .7;
    cursor: pointer;
}
.toast .toast-fechar:hover { opacity: 1; }
.toast .toast-fechar i { font-size: .9rem; }
.toast.saindo { opacity: 0; transform: translateY(6px); transition: all var(--dur-media) var(--curva); }

/* --------------------------------------------------------------------------
   Linha do tempo do dia (24h) — usada em "Hoje" e "Jornada"
   -------------------------------------------------------------------------- */
.dia {
    position: relative;
    padding: var(--e-4) var(--e-5) var(--e-3);
}
.dia-regua {
    position: relative;
    height: 20px;
    margin-left: var(--largura-rotulo-dia, 180px);
    color: var(--texto-3);
    font-size: var(--fs-xs);
}
.dia-regua span { position: absolute; transform: translateX(-50%); }
.dia-trilha {
    display: grid;
    grid-template-columns: var(--largura-rotulo-dia, 180px) 1fr;
    align-items: center;
    min-height: 32px;
    border-top: 1px dashed color-mix(in srgb, var(--borda) 70%, transparent);
}
.dia-trilha .rotulo {
    padding-right: var(--e-3);
    overflow: hidden;
    color: var(--texto-2);
    font-size: var(--fs-xs);
    font-weight: var(--peso-medio);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
a.rotulo:hover { color: var(--primaria-texto); }
.dia-trilha .pista { position: relative; height: 32px; }
/* Marcador da linha do dia: cada estado tem FORMA própria, não só cor
   (08-10-2026). Deu certo = círculo com visto; falhou = quadrado com X;
   atrasado/não rodou = losango; rodando = anel aberto girando; previsto =
   círculo vazio. Os glifos vêm da fonte do Bootstrap Icons (check-lg, x-lg). */
.dia-evento {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--neutro);
    color: var(--sobre-estado);
    box-shadow: 0 0 0 2px var(--superficie);
}
.dia-evento::after {
    font-family: "bootstrap-icons";
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
}
.dia-evento[data-estado="ok"] { background: var(--ok); }
.dia-evento[data-estado="ok"]::after { content: "\F633"; }
.dia-evento[data-estado="falha"] { background: var(--falha); border-radius: 3px; }
.dia-evento[data-estado="falha"]::after { content: "\F659"; font-size: 8px; }
.dia-evento[data-estado="atencao"],
.dia-evento[data-estado="perdido"] {
    width: 11px; height: 11px; margin-left: -5.5px; margin-top: -5.5px;
    border-radius: 2px;
    background: var(--atencao-suave);
    box-shadow: 0 0 0 2px var(--atencao);
    transform: rotate(45deg);
}
.dia-evento[data-estado="atencao"] { background: var(--atencao); }
.dia-evento[data-estado="rodando"] {
    background: transparent;
    border: 3px solid var(--rodando);
    border-right-color: transparent;
    box-shadow: none;
    animation: girar 1.1s linear infinite;
}
.dia-evento[data-estado="previsto"] {
    width: 12px; height: 12px; margin-left: -6px; margin-top: -6px;
    background: var(--superficie);
    box-shadow: 0 0 0 1.5px var(--texto-3);
}
/* Marcador dentro da legenda (fora da pista): fica no fluxo do texto. */
.dia-evento.na-legenda { position: relative; top: auto; display: inline-grid; margin: 0 var(--e-1) 0 0; vertical-align: -2px; animation: none; }
.dia-evento.na-legenda[data-estado="perdido"] { margin: 0 var(--e-2) 0 var(--e-1); }
.dia-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-4); color: var(--texto-2); font-size: var(--fs-xs); }
.dia-legenda > span { display: inline-flex; align-items: center; gap: var(--e-1); }
@media (prefers-reduced-motion: reduce) { .dia-evento[data-estado="rodando"] { animation: none; } }
.dia-faixa {
    position: absolute;
    top: 50%;
    height: 8px;
    margin-top: -4px;
    border-radius: var(--raio-pilula);
    background: color-mix(in srgb, var(--primaria) 22%, transparent);
}
.dia-agora {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--acento);
    border-radius: 2px;
    pointer-events: none;
}
.dia-agora::before {
    content: "agora";
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translate(-50%, -100%);
    padding: 0 var(--e-1);
    border-radius: var(--raio-sm);
    background: var(--acento);
    color: var(--sobre-acento);  /* branco sobre o laranja dava 2,7:1 */
    font-size: var(--fs-2xs);
    font-weight: var(--peso-forte);
}
.dia-agora[data-rotulo]::before { content: attr(data-rotulo); white-space: nowrap; }  /* "agora 08:43" */
.dia-agora.sem-rotulo::before { display: none; }
@media (max-width: 640px) {
    .dia { --largura-rotulo-dia: 110px; padding: var(--e-3); }
}

/* --------------------------------------------------------------------------
   Esteira (jornada em etapas)
   -------------------------------------------------------------------------- */
/* Cabe sem rolar de lado: 6 etapas numa linha quando há largura, 3 + 3
   em tela média, uma embaixo da outra no celular. Medido pela largura da
   área (container query), então acompanha o menu recolhido ou não. */
:has(> .esteira) { container-type: inline-size; }
.esteira {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-3);
}
@container (min-width: 1020px) {
    .esteira { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@container (max-width: 560px) {
    .esteira { grid-template-columns: minmax(0, 1fr); }
}
.etapa {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    padding: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
}
.etapa::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--e-3));
    top: 28px;
    width: var(--e-3);
    height: 2px;
    background: var(--borda-forte);
}
.etapa:last-child::after,
.etapa:nth-child(3n)::after { display: none; }
@container (min-width: 1020px) {
    .etapa:nth-child(3n)::after { display: block; }
    .etapa:last-child::after { display: none; }
}
@container (max-width: 560px) {
    .etapa::after { display: none; }
}
.etapa-topo { display: flex; align-items: center; gap: var(--e-2); }
.etapa-icone {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--raio-md);
    background: var(--primaria-suave);
    color: var(--primaria-texto);
}
.etapa h3 { margin: 0; font-size: var(--fs-base); }
.etapa p { margin: 0; color: var(--texto-2); font-size: var(--fs-xs); }
.etapa .robos { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: auto; }

.chip-robo {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: 2px var(--e-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
    background: var(--superficie-2);
    color: var(--texto);
    font-size: var(--fs-xs);
    font-weight: var(--peso-medio);
    max-width: 100%;
    overflow-wrap: anywhere;
}
a.chip-robo:hover { border-color: var(--primaria); text-decoration: none; }

/* --------------------------------------------------------------------------
   Lista de itens "precisa de você" / eventos
   -------------------------------------------------------------------------- */
.lista-itens { display: grid; }
.item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-5);
    border-bottom: 1px solid var(--borda);
    color: inherit;
}
.item:last-child { border-bottom: 0; }
a.item:hover { background: var(--superficie-2); text-decoration: none; }
.item-icone {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--raio-md);
    background: var(--neutro-suave);
    color: var(--texto-2);
}
.item-icone[data-estado="falha"] { background: var(--falha-suave); color: var(--falha); }
.item-icone[data-estado="atencao"] { background: var(--atencao-suave); color: var(--atencao); }
.item-icone[data-estado="ok"] { background: var(--ok-suave); color: var(--ok); }
.item-icone[data-estado="rodando"] { background: var(--rodando-suave); color: var(--primaria-texto); }
.item-titulo { font-weight: var(--peso-medio); font-size: var(--fs-sm); }
.item-texto { color: var(--texto-2); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; }
.item-meta { color: var(--texto-3); font-size: var(--fs-xs); white-space: nowrap; }
/* Item com corpo em linhas (título, texto, dica, barra) e ações à direita;
   em tela estreita as ações descem para baixo do texto. */
.item-corpo { display: grid; gap: 2px; min-width: 0; }
.item-corpo .item-titulo { color: var(--texto); }
.item-corpo a.item-titulo:hover { color: var(--primaria-texto); }
.item-dica { display: flex; gap: var(--e-1); color: var(--texto-2); font-size: var(--fs-xs); }
.item-dica i { color: var(--atencao); }
.item-corpo .progresso { height: 6px; margin-top: var(--e-1); }
.item-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); }
@media (max-width: 560px) {
    .item:has(.item-acoes) { grid-template-columns: auto minmax(0, 1fr); }
    .item-acoes { grid-column: 2; justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Abas (dentro de uma página)
   -------------------------------------------------------------------------- */
.abas {
    display: flex;
    gap: var(--e-1);
    margin-bottom: var(--e-5);
    border-bottom: 1px solid var(--borda);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.abas [role="tab"],
.abas a {
    position: relative;
    padding: var(--e-3) var(--e-3);
    border: 0;
    background: transparent;
    color: var(--texto-2);
    font-size: var(--fs-sm);
    font-weight: var(--peso-medio);
    white-space: nowrap;
    cursor: pointer;
}
.abas [aria-selected="true"],
.abas [aria-current="page"] { color: var(--texto); }
.abas [aria-selected="true"]::after,
.abas [aria-current="page"]::after {
    content: "";
    position: absolute;
    left: var(--e-2);
    right: var(--e-2);
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--primaria);
}

/* Utilitários pequenos */
.fraco { color: var(--texto-3); }
.secundario { color: var(--texto-2); }
.pequeno { font-size: var(--fs-sm); }
.minimo { font-size: var(--fs-xs); }
.forte { font-weight: var(--peso-forte); }
.mono { font-family: var(--fonte-mono); overflow-wrap: anywhere; }
.sem-margem { margin: 0; }
.mt-2 { margin-top: var(--e-2); }
.mt-4 { margin-top: var(--e-4); }
.mt-6 { margin-top: var(--e-6); }
.mb-2 { margin-bottom: var(--e-2); }
.mb-4 { margin-bottom: var(--e-4); }
.mb-6 { margin-bottom: var(--e-6); }
.oculto { display: none !important; }
.em-bloco { display: block; }
.nowrap { white-space: nowrap; }
/* Até 2 linhas e só então reticências (o nome inteiro fica no title). */
.truncar {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Painel ao vivo (publico.html): filtros, frases da história, tendência
   -------------------------------------------------------------------------- */
.painel-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-3) var(--e-5);
    padding: var(--e-4) var(--e-5);
    margin-bottom: var(--e-6);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
}
.painel-filtros .rotulo-filtro { color: var(--texto-3); font-size: var(--fs-xs); font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: 0.06em; }
.painel-filtros .selecao { width: auto; min-width: 160px; }
.painel-recorte {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    flex-basis: 100%;
    margin: 0;
    padding-top: var(--e-3);
    border-top: 1px solid var(--borda);
    color: var(--texto-3);
    font-size: var(--fs-xs);
}

/* A frase que abre cada capítulo: o "porquê" antes do gráfico. */
.frase-historia {
    margin: 0 0 var(--e-4);
    padding-left: var(--e-4);
    border-left: 3px solid var(--primaria);
    color: var(--texto);
    font-size: var(--fs-base);
    max-width: 80ch;
}
.frase-historia:empty { display: none; }
.texto-falha { color: var(--falha); }
.texto-ok { color: var(--ok); }

/* Seta de comparação com o período anterior, dentro da nota do KPI. */
.tendencia { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--peso-medio); }
.tendencia[data-bom="true"] { color: var(--ok); }
.tendencia[data-bom="false"] { color: var(--falha); }
.tendencia[data-direcao="igual"] { color: var(--texto-3); }
.tendencia[data-bom="neutro"] { color: var(--texto-2); }

.painel-grafico { position: relative; height: 280px; }

@media (max-width: 640px) {
    .painel-filtros { padding: var(--e-3); }
    .painel-filtros .segmentado { flex-wrap: wrap; }
    .painel-grafico { height: 220px; }
}

/* Abas das telas sem login em DOIS ASSUNTOS (09-10-2026): "Robôs" em ciano
   (Ao vivo, O que vem por aí) e "Negócio" no laranja da marca (Resultado do
   mês). A cor marca o ASSUNTO, nunca estado: estado continua verde/vermelho.
   Usado também pelo dashboard da Akad, que carrega este arquivo. */
.abas-publicas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); min-width: 0; }
.abas-grupo {
    --cor-assunto: var(--primaria-texto);
    --fundo-assunto: var(--primaria-suave);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 3px 3px var(--e-3);
    border: 1px solid color-mix(in srgb, var(--cor-assunto) 35%, var(--borda));
    border-radius: var(--raio-md);
    background: var(--superficie);
}
.abas-grupo[data-assunto="negocio"] { --cor-assunto: var(--acento-texto); --fundo-assunto: var(--acento-suave); }
.abas-grupo-nome {
    margin-right: var(--e-1);
    color: var(--cor-assunto);
    font-size: var(--fs-2xs);
    font-weight: var(--peso-titulo);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.abas-grupo a {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    min-height: 36px;
    padding: 0 var(--e-3);
    border-radius: var(--raio-sm);
    color: var(--texto-2);
    font-size: var(--fs-sm);
    text-decoration: none;
    white-space: nowrap;
}
.abas-grupo a:hover { background: var(--superficie-2); color: var(--texto); }
.abas-grupo a[aria-current="page"] { background: var(--fundo-assunto); color: var(--texto); font-weight: var(--peso-forte); }
/* Até 760px as abas descem para a linha de baixo do logo (antes cobriam o
   "Central de Robôs"). */
@media (max-width: 760px) {
    .simples-topo:has(.abas-publicas) { flex-wrap: wrap; }
    .simples-topo .acoes:has(.abas-publicas) { margin-left: 0; width: 100%; justify-content: space-between; }
}
@media (max-width: 640px) {
    .abas-publicas a i { display: none; }
    .abas-grupo a { padding: 0 var(--e-2); }
}

/* Banner do topo das telas públicas mais baixo (09-10-2026, pedido do
   responsável): tinha 319 px e empurrava "Quem precisa de atenção" para o
   fim da primeira tela. Só no Painel ao vivo e no Kanban (.painel-vivo); o
   Resultado do mês, que também usa .manchete, fica como está. */
.painel-vivo .manchete { padding: var(--e-5) var(--e-6); margin-bottom: var(--e-5); }
.painel-vivo .manchete .texto { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); max-width: 62ch; }
.painel-vivo .manchete .contexto { margin-top: var(--e-2); font-size: var(--fs-sm); max-width: none; }
.painel-vivo .manchete .rodape-manchete { margin-top: var(--e-3); }
.painel-vivo .assunto-tela { margin-bottom: var(--e-2); }

/* Página toda mais compacta (09-10-2026, pedido do responsável): menos
   respiro em cada bloco do Painel ao vivo e do Kanban. Tudo escopado em
   .painel-vivo — o Resultado do mês, que carrega este mesmo arquivo, não
   muda. */
body:has(.painel-vivo) .simples-topo { padding-top: var(--e-3); padding-bottom: var(--e-3); }
.painel-vivo .painel-filtros { gap: var(--e-2) var(--e-4); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4); }
.painel-vivo .painel-filtros .segmentado button { min-height: 28px; }
.painel-vivo .painel-recorte { flex-basis: auto; margin-left: auto; padding-top: 0; border-top: 0; }
.painel-vivo .grade-4.mb-6 { margin-bottom: var(--e-5); }
.painel-vivo .kpi { gap: 2px; padding: var(--e-3) var(--e-4); }
.painel-vivo .kpi-valor { font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem); }
.painel-vivo .capitulo { margin-bottom: var(--e-6); }
.painel-vivo .capitulo-cabecalho { gap: var(--e-3); margin-bottom: var(--e-3); }
.painel-vivo .capitulo-cabecalho h2 { margin: 0 0 2px; }
.painel-vivo .capitulo-numero { width: 26px; height: 26px; }
.painel-vivo .frase-historia { margin-bottom: var(--e-3); font-size: var(--fs-sm); }
.painel-vivo .lista-itens .item { padding: var(--e-2) var(--e-4); }
.painel-vivo .item-icone { width: 30px; height: 30px; }
.painel-vivo .painel-grafico { height: 220px; }
.painel-vivo .rodape-publico { margin-top: var(--e-4); padding-top: var(--e-3); }

/* Revisão de 13-10-2026: manchete + números num cartão só; "Pede atenção
   agora" só quando há quem peça; filtros numa linha, sem caixa; títulos de
   seção sem número (o capítulo 1 sumia quando vazio). */
.painel-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4) var(--e-6); margin-bottom: var(--e-4); padding: var(--e-5) var(--e-6); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-xl); box-shadow: var(--sombra-1); }
.painel-resumo-texto { flex: 999 1 520px; min-width: 0; }
.painel-intro { margin: var(--e-3) 0 0; padding-top: var(--e-2); border-top: 1px dashed var(--borda); color: var(--texto-3); font-size: var(--fs-xs); }
.painel-secao-topo .painel-legenda { flex-basis: 100%; max-width: none; }
.painel-resumo .painel-numeros { flex: 1 1 460px; min-width: 0; background: none; border: 0; border-left: 1px solid var(--borda); border-radius: 0; box-shadow: none; }
.painel-resumo .kpi-rotulo { white-space: nowrap; }
.painel-resumo .kpi-nota { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.painel-atencao { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); padding: var(--e-4) var(--e-5); background: var(--falha-suave); border: 1px solid color-mix(in srgb, var(--falha) 45%, var(--borda)); border-radius: var(--raio-xl); }
.painel-atencao[hidden] { display: none; }
.painel-atencao h2 { margin: 0; color: var(--falha); font-size: var(--fs-base); }
.painel-atencao .frase-historia { margin: 0; padding: 0; border: 0; }
.painel-vivo .painel-filtros { padding: 0; background: none; border: 0; border-radius: 0; }
.painel-vivo .painel-filtros .rotulo-filtro { font-size: var(--fs-sm); font-weight: var(--peso-medio); text-transform: none; letter-spacing: 0; }
.painel-vivo .painel-filtros #limpar-filtros { margin-left: auto; }
.painel-vivo .painel-filtros #limpar-filtros[hidden] { display: none; }
/* "Escolher dias" (15-10-2026): um calendário por mês, lado a lado; no
   celular a faixa rola de lado e abre no mês corrente. Dia marcado = fundo
   da cor primária; hoje = contorno; fim de semana = número mais apagado. */
.painel-dias { margin: calc(-1 * var(--e-2)) 0 var(--e-4); padding: var(--e-3) var(--e-4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); }
.painel-dias[hidden] { display: none; }
.painel-dias-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin: 0 0 var(--e-2); color: var(--texto-2); font-size: var(--fs-sm); font-weight: var(--peso-medio); }
.painel-dias-meses { display: flex; gap: var(--e-6); overflow-x: auto; padding-bottom: var(--e-1); }
.dias-mes { flex: none; width: 236px; }
.dias-mes-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-bottom: var(--e-1); }
.dias-mes-topo strong { font-size: var(--fs-sm); text-transform: capitalize; }
.dias-mes-topo .btn[aria-pressed="true"] { background: var(--primaria-suave); border-color: var(--primaria); color: var(--primaria-texto); }
.dias-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dias-semana { text-align: center; color: var(--texto-3); font-size: var(--fs-2xs); font-weight: var(--peso-forte); }
.dias-cal .dia { height: 30px; padding: 0; border: 1px solid transparent; border-radius: var(--raio-sm); background: none; color: var(--texto); font: inherit; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; cursor: pointer; }
.dias-cal .dia:hover { background: var(--superficie-2); }
.dias-cal .dia[data-fds] { color: var(--texto-3); }
.dias-cal .dia[data-hoje] { border-color: var(--borda-forte); font-weight: var(--peso-forte); }
.dias-cal .dia[aria-pressed="true"] { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
.painel-secao { margin-bottom: var(--e-5); }
.painel-secao-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-1) var(--e-5); margin-bottom: var(--e-3); }
.painel-secao h2 { margin: 0; font-size: var(--fs-lg); }
.painel-secao-topo .painel-recorte { display: inline; margin-left: var(--e-2); padding: 0; border: 0; color: var(--texto-3); font-size: var(--fs-sm); font-weight: var(--peso-medio); }
.painel-legenda { margin: 0; color: var(--texto-3); font-size: var(--fs-xs); max-width: 90ch; }
/* O ritmo: título e frase no topo, à esquerda; gráfico embaixo, na largura toda (13-10-2026). */
.painel-ritmo .cartao-corpo { display: flex; flex-direction: column; align-items: stretch; gap: var(--e-3); }
.painel-ritmo-texto { min-width: 0; max-width: 72ch; text-align: left; }
.painel-ritmo-texto p { margin: var(--e-2) 0 0; color: var(--texto-2); font-size: var(--fs-sm); }
.painel-vivo .painel-ritmo .painel-grafico { width: 100%; min-width: 0; height: 170px; }
@media (max-width: 640px) {
    .painel-resumo { padding: var(--e-4); }
    .painel-resumo .painel-numeros { border-left: 0; border-top: 1px solid var(--borda); }
    .painel-resumo .painel-numeros .kpi { padding: var(--e-3) var(--e-2) 0; }
    /* Celular: os filtros numa faixa só, que rola de lado (eram ~300 px). */
    .painel-vivo .painel-filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--e-2); }
    .painel-vivo .painel-filtros > * { flex: none; }
    .painel-vivo .painel-filtros .segmentado { flex-wrap: nowrap; }
    .painel-vivo .painel-filtros .segmentado button { white-space: nowrap; }
}

/* Etiqueta do assunto + a pergunta da tela, no topo da manchete pública. */
.assunto-tela { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin: 0 0 var(--e-3); }
.assunto-etiqueta {
    padding: 3px var(--e-3);
    border-radius: var(--raio-pilula);
    background: var(--primaria-suave);
    color: var(--primaria-texto);
    font-size: var(--fs-2xs);
    font-weight: var(--peso-titulo);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.assunto-tela[data-assunto="negocio"] .assunto-etiqueta { background: var(--acento-suave); color: var(--acento-texto); }
.assunto-pergunta { color: var(--texto-3); font-size: var(--fs-sm); }

/* Anel de 0 a 100% (quanto deu certo), usado no cartão da seguradora. */
.robo-anel { position: relative; flex: none; width: 52px; height: 52px; }
.anel { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 4.5; }
.anel-fundo { stroke: var(--superficie-2); }
.anel-valor { stroke: var(--texto-3); stroke-linecap: round; }
.anel-valor[data-estado="ok"] { stroke: var(--ok); }
.anel-valor[data-estado="atencao"] { stroke: var(--atencao); }
.anel-valor[data-estado="falha"] { stroke: var(--falha); }
.robo-anel-valor { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--peso-titulo); font-variant-numeric: tabular-nums; }

/* Seguradora por seguradora (13-10-2026, pedido do responsável: "refazer
   pensando na clareza e objetividade, com storytelling"). Um cartão por
   seguradora conta o período dela: selo da situação, UMA frase com a resposta,
   o anel com quanto deu certo e um robô por linha com o fato que importa.
   Substituiu, no mesmo dia, os cartões de robô em colunas e depois em linhas
   (cada robô repetia etiqueta + anel e a tela não dizia o que concluir). */
.seg-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.seg-cartao { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; padding: var(--e-4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); }
.seg-cartao[data-estado="falha"] { border-color: color-mix(in srgb, var(--falha) 55%, var(--borda)); background: color-mix(in srgb, var(--falha) 6%, var(--superficie)); }
.seg-cartao[data-estado="atencao"] { border-color: color-mix(in srgb, var(--atencao) 55%, var(--borda)); }
.seg-cartao[data-estado="oscilou"] { border-color: color-mix(in srgb, var(--atencao) 45%, var(--borda)); }
/* "Oscilou" (falhou na maior parte do período, mas a última deu certo) usa a
   cor e a forma de atenção (losango). */
.ponto[data-estado="oscilou"] { background: var(--atencao); border-radius: 1px; transform: rotate(45deg) scale(0.9); }
.seg-selo[data-estado="oscilou"] { color: var(--atencao); }
.seg-cartao[data-estado="rodando"] { border-color: color-mix(in srgb, var(--rodando) 45%, var(--borda)); }
.seg-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.seg-titulo { display: grid; gap: var(--e-1); min-width: 0; }
.seg-titulo h3 { margin: 0; font-family: var(--fonte-titulo); font-size: var(--fs-lg); line-height: 1.2; }
.seg-selo { display: inline-flex; align-items: center; gap: var(--e-2); width: fit-content; color: var(--texto-3); font-size: var(--fs-xs); font-weight: var(--peso-forte); }
.seg-selo[data-estado="ok"] { color: var(--ok); }
.seg-selo[data-estado="falha"] { color: var(--falha); }
.seg-selo[data-estado="atencao"] { color: var(--atencao); }
.seg-selo[data-estado="rodando"] { color: var(--primaria-texto); }
.seg-frase { margin: 0; color: var(--texto); font-size: var(--fs-sm); line-height: 1.45; }
.seg-robos { display: grid; margin: 0; padding: var(--e-2) 0 0; border-top: 1px solid var(--borda); list-style: none; }
.seg-robo-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e-2); min-height: 30px; font-size: var(--fs-sm); }
summary.seg-robo-linha { cursor: pointer; list-style: none; border-radius: var(--raio-sm); }
summary.seg-robo-linha::-webkit-details-marker { display: none; }
summary.seg-robo-linha:hover .seg-robo-nome { color: var(--primaria-texto); }
summary.seg-robo-linha:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.seg-robo-nome { overflow: hidden; color: var(--texto); font-weight: var(--peso-medio); text-overflow: ellipsis; white-space: nowrap; }
.seg-robo-meta { color: var(--texto-3); font-size: var(--fs-xs); white-space: nowrap; }
.seg-robo-meta[data-estado="falha"] { color: var(--falha); }
.seg-robo-meta[data-estado="atencao"] { color: var(--atencao); }
.seg-robo-meta[data-estado="rodando"] { color: var(--primaria-texto); }
/* Sob demanda: não rodar no dia é o normal dele — sem destaque. */
.seg-robo[data-modo="sob_demanda"] .seg-robo-nome { color: var(--texto-2); font-weight: var(--peso-normal, 400); }
.seg-robo-resumo { margin: 0 0 var(--e-2) calc(8px + var(--e-2)); color: var(--texto-2); font-size: var(--fs-xs); line-height: 1.45; }

/* Kanban público igual ao "Em construção" da Central (09-10-2026): as
   mesmas regras de .quadro/.coluna/.ficha de em_construcao.html, com prefixo
   próprio para não colidir com outras telas. Mudou lá, mudar aqui. */
.kanban-quadro { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: var(--e-4); align-items: stretch; overflow-x: auto; padding-bottom: var(--e-2); }
/* As colunas ocupam a altura toda da tela, até o rodapé (09-10-2026, pedido
   do responsável: "alongue essas colunas sem deixar espaços em branco"). A
   página vira uma coluna flexível e o quadro fica com o espaço que sobra;
   com muitas fichas ele simplesmente cresce e a página rola. */
body:has(.kanban-quadro) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body:has(.kanban-quadro) > .simples-topo { width: 100%; box-sizing: border-box; }
body:has(.kanban-quadro) > main { flex: 1; display: flex; flex-direction: column; }
body:has(.kanban-quadro) .simples-conteudo { flex: 1; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; padding-bottom: var(--e-4); }
body:has(.kanban-quadro) .kanban-quadro { flex: 1; margin-bottom: 0; }
.kanban-coluna { display: flex; flex-direction: column; gap: var(--e-3); min-height: 220px; padding: var(--e-3); background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-lg); }
.kanban-coluna-topo { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-1) var(--e-2); }
.kanban-coluna-topo h2 { margin: 0; font-size: var(--fs-sm); }
.kanban-contagem { margin-left: auto; }
.kanban-coluna-sentido { margin: calc(-1 * var(--e-2)) 0 0; padding: 0 var(--e-2); color: var(--texto-3); font-size: var(--fs-xs); }
.quadro-intro { margin: 0 0 var(--e-4); color: var(--texto-2); font-size: var(--fs-sm); }
/* Quadro sem nenhuma ficha: uma frase no lugar das 4 colunas vazias. */
.kanban-quadro.kanban-vazio { display: block; flex: 0 0 auto; }
.kanban-vazio .vazio { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); }
.kanban-ficha { display: grid; gap: var(--e-2); padding: var(--e-3); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-md); box-shadow: var(--sombra-1); }
.kanban-ficha h3 { margin: 0; font-size: var(--fs-sm); }
.kanban-ficha p { margin: 0; color: var(--texto-2); font-size: var(--fs-xs); }
.kanban-ficha-rodape { display: flex; align-items: center; gap: var(--e-1); }
@media (max-width: 960px) { .kanban-quadro { grid-template-columns: repeat(4, minmax(260px, 85vw)); scroll-snap-type: x mandatory; } .kanban-coluna { scroll-snap-align: start; } }

/* Rodapé das telas públicas: hora dos dados + link para o outro assunto. */
.rodape-publico { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2) var(--e-5); margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--borda); color: var(--texto-3); font-size: var(--fs-xs); }
.rodape-publico .links { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.rodape-publico a[data-assunto="negocio"] { color: var(--acento-texto); }


/* Quadro ao vivo (quadro_publico.html) */
.quadro-vivo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
.quadro-coluna {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    min-height: 260px;
    padding: var(--e-3);
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-top: 3px solid var(--borda-forte);
    border-radius: var(--raio-lg);
}
/* Cor de cada coluna = o quanto a automação avançou: cinza (ideia) → teal
   claro → teal → verde (rodando sozinha). Âmbar ficou de fora: na Central
   inteira ele quer dizer "atenção", e "pronto para testar" não é problema. */
.quadro-coluna[data-coluna="em_desenvolvimento"] { border-top-color: var(--primaria-300); }
.quadro-coluna[data-coluna="pronto_para_testar"] { border-top-color: var(--primaria); }
.quadro-coluna[data-coluna="em_producao"] { border-top-color: var(--ok); }
.quadro-coluna header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--e-2); padding: var(--e-1) var(--e-2); }
.quadro-coluna header h3 { margin: 0; font-size: var(--fs-sm); }
.quadro-coluna header .selo { margin-left: auto; }
.quadro-coluna header p { grid-column: 2 / -1; margin: 0; color: var(--texto-3); font-size: var(--fs-xs); }
.quadro-cartao {
    display: grid;
    justify-items: start;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-1);
}
.quadro-cartao h4 { margin: 0; font-size: var(--fs-sm); }
.quadro-cartao p { margin: 0; color: var(--texto-2); font-size: var(--fs-xs); }
.quadro-vazio { margin: var(--e-2); }
@media (max-width: 960px) { .quadro-vivo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .quadro-vivo { grid-template-columns: minmax(0, 1fr); } .quadro-coluna { min-height: 0; } }

/* --------------------------------------------------------------------------
   Tela Hoje (08-10-2026): o título vai para o topo, a manchete vira uma linha
   de resumo sem cartão, os três números viram uma faixa ao lado dela e "O que
   precisa de você" ganha a coluna larga — tudo que pede ação cabe na primeira
   tela mesmo com 786 px de altura (zoom de 125%).
   -------------------------------------------------------------------------- */
.topo-titulo { margin: 0; font-size: var(--fs-lg); white-space: nowrap; }

.hoje-topo {
    display: grid;
    /* A manchete leva a maior parte; medido em 1366 px, com "auto" os números
       ocupavam 536 px e espremiam a frase em 4 linhas. */
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--e-4) var(--e-8);
    margin-bottom: var(--e-6);
}
.manchete.manchete-lisa {
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.manchete-lisa .texto { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem); max-width: 46ch; }
.manchete-lisa .contexto { margin-top: var(--e-2); font-size: var(--fs-sm); }
.manchete-lisa .rodape-manchete { margin-top: var(--e-2); }

.kpis-faixa {
    display: flex;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-1);
}
.kpis-faixa .kpi {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--e-3) var(--e-5);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.kpis-faixa .kpi + .kpi { border-left: 1px solid var(--borda); }
.kpis-faixa .kpi-rotulo { font-size: var(--fs-xs); }
.kpis-faixa .kpi-valor { font-size: 1.5rem; }

.grade-hoje {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--e-4);
    margin-bottom: var(--e-8);
}

/* Estado vazio dentro dos quadros de Hoje: mais baixo (era ~270 px de altura
   para dizer "nada precisa de você"). */
.grade-hoje .vazio { padding: var(--e-6) var(--e-5); }
.grade-hoje .vazio i { font-size: 1.4rem; }

@media (max-width: 1100px) {
    .hoje-topo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .grade-hoje { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .kpis-faixa .kpi { padding: var(--e-3); }
}