/* Athena by Brainstorming — estilo base da plataforma (identidade: vinho, bronze, creme, grafite).
   As soluções construídas sobre a Athena podem trocar as cores pelos tokens abaixo (marca por cliente). */
:root {
    --vinho: #6B131C;
    --vinho-escuro: #4A0C13;
    --vinho-profundo: #2C0708;
    --bronze: #B07A4F;
    --bronze-claro: #D3B69E;
    --creme: #FBF3EC;
    --fundo: #F6F1EB;
    --grafite: #2E2A28;
    --texto: #3A3330;
    --cinza: #7A6F69;
    --borda: #E8DDD3;
    --branco: #FFFFFF;
    --sombra: 0 10px 30px rgba(44, 7, 8, 0.10);
    --fonte-titulo: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
    --fonte: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--fonte); color: var(--texto); background: var(--fundo); }
a { color: var(--vinho); }

/* ---- Cabeçalho das telas ---- */
.ath-cabecalho { display: flex; align-items: center; gap: 18px; padding: 14px 28px;
    background: linear-gradient(100deg, var(--vinho-profundo) 0%, var(--vinho-escuro) 55%, var(--vinho) 100%); color: var(--creme);
    box-shadow: 0 2px 12px rgba(44, 7, 8, 0.25); }
.ath-cabecalho .ath-logo { height: 42px; display: block; }
/* Voltar e Início (B4, padrão do SSI Web): dois ícones à esquerda, só navegação */
.ath-nav { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ath-nav-icone { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); text-decoration: none; transition: background .15s; }
.ath-nav-icone:hover { background: rgba(255, 255, 255, .24); }
.ath-nav-icone:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.ath-nav-icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
@media print { .ath-nav { display: none !important; } }
.ath-cabecalho .ath-solucao { padding-left: 18px; border-left: 1px solid rgba(211, 182, 158, 0.35); font: 600 15px var(--fonte-titulo); letter-spacing: .04em; }
.ath-cabecalho .ath-solucao small { display: block; font: 400 11.5px var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-claro); margin-top: 2px; }
.ath-cabecalho .ath-usuario { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; }
.ath-botao-claro { font: 600 13px var(--fonte); color: var(--creme); background: transparent; border: 1px solid rgba(211, 182, 158, 0.5);
    border-radius: 999px; padding: 7px 16px; cursor: pointer; text-decoration: none; }
.ath-botao-claro:hover { background: rgba(211, 182, 158, 0.15); }

/* ---- Conteúdo ---- */
.ath-principal { max-width: 1180px; margin: 0 auto; padding: 28px 28px 56px; }
.ath-cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: 14px; padding: 20px 22px; box-shadow: var(--sombra); }
.ath-titulo { font: 600 22px var(--fonte-titulo); color: var(--grafite); margin: 0 0 4px; letter-spacing: .01em; }
.ath-subtitulo { margin: 0; color: var(--cinza); font-size: 14px; }
.ath-rotulo { font: 600 11px var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.ath-botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 14px var(--fonte); color: var(--creme);
    background: var(--vinho); border: 0; border-radius: 999px; padding: 12px 26px; cursor: pointer; text-decoration: none;
    box-shadow: 0 6px 16px rgba(107, 19, 28, 0.25); transition: background .15s, transform .15s; }
.ath-botao:hover { background: var(--vinho-escuro); transform: translateY(-1px); }
.ath-campo { display: flex; align-items: center; gap: 10px; background: var(--creme); border: 1px solid var(--borda); border-radius: 10px; padding: 0 14px; }
.ath-campo:focus-within { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(176, 122, 79, 0.15); }
.ath-campo svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--cinza); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ath-campo input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 0; font: 15px var(--fonte); color: var(--grafite); outline: none; }
.ath-aviso { border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; }
.ath-aviso.erro { background: #FBECEC; color: #8A1C1C; border: 1px solid #F0C6C6; }
.ath-aviso.ok { background: #EEF6EE; color: #2E5E2E; border: 1px solid #CFE3CF; }
@media (prefers-reduced-motion: reduce) { .ath-botao { transition: none; } .ath-botao:hover { transform: none; } }

/* ---- Telas de trabalho (casos e configuração) ---- */
.ath-trilha { font-size: 12.5px; color: var(--cinza); margin: 0 0 6px; }
.ath-trilha a { color: var(--cinza); text-decoration: none; }
.ath-trilha a:hover { color: var(--vinho); text-decoration: underline; }
.ath-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ath-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ath-botao.pequeno { padding: 8px 16px; font-size: 13px; box-shadow: none; }
.ath-botao-sec { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--fonte); color: var(--vinho); background: var(--branco);
    border: 1px solid var(--bronze-claro); border-radius: 999px; padding: 7px 15px; cursor: pointer; text-decoration: none; }
.ath-botao-sec:hover { background: var(--creme); }
.ath-botao-sec.ativo { background: var(--vinho); color: var(--creme); border-color: var(--vinho); }
.ath-botao-sec:disabled { opacity: .45; cursor: default; }
.ath-botao-mini { font: 600 12px var(--fonte); color: var(--cinza); background: transparent; border: 1px solid var(--borda); border-radius: 8px;
    padding: 3px 8px; cursor: pointer; }
.ath-botao-mini:hover:not(:disabled) { color: var(--vinho); border-color: var(--bronze-claro); }
.ath-botao-mini:disabled { opacity: .35; cursor: default; }
.ath-botao-mini.perigo:hover:not(:disabled) { color: #8A1C1C; border-color: #F0C6C6; }
.ath-form label.rotulo { display: block; font: 600 12.5px var(--fonte); color: var(--grafite); margin-bottom: 5px; }
.ath-form .obrig { color: var(--vinho); }
.ath-form .ajuda { display: block; font-size: 12px; color: var(--cinza); margin-top: 4px; line-height: 1.4; }
.ath-entrada { width: 100%; font: 14px var(--fonte); color: var(--grafite); background: var(--branco); border: 1px solid var(--borda); border-radius: 8px;
    padding: 9px 11px; outline: none; }
.ath-entrada:focus { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(176, 122, 79, 0.15); }
.ath-entrada:disabled { background: var(--fundo); color: var(--texto); }
textarea.ath-entrada { min-height: 96px; resize: vertical; line-height: 1.5; }
/* Ficha em até 4 colunas (EV-0024): cada campo ocupa 1 a 4 (.l1...l4, pela largura do campo); o resto ocupa 2, como antes */
.ath-grade-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; }
.ath-grade-campos > * { grid-column: span 2; }
.ath-grade-campos > .l1 { grid-column: span 1; }
.ath-grade-campos > .l3 { grid-column: span 3; }
.ath-grade-campos > .l4, .ath-grade-campos .largo, .ath-grade-campos > .grupo-campos { grid-column: 1 / -1; }
.ath-grade-campos > .grupo-campos { margin: 6px 0 -6px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--vinho, #6B131C); border-bottom: 1px solid var(--borda, #e7ddd3); padding-bottom: 4px; }
.ath-grade-campos > [hidden] { display: none !important; }
.ath-grade-campos .dica { display: block; font-size: 12px; color: var(--texto-suave, #6f6560); margin-top: 3px; }
.coluna-principal { container-type: inline-size; }
.ath-tabela-rolagem { overflow-x: auto; }
.ath-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ath-tabela th { text-align: left; font: 600 11px var(--fonte); letter-spacing: .08em; text-transform: uppercase; color: var(--cinza);
    padding: 9px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.ath-tabela td { padding: 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.ath-tabela tr:last-child td { border-bottom: 0; }
.ath-tabela tbody tr:hover td { background: #FDF9F5; }
.ath-tabela .num { text-align: right; white-space: nowrap; }
.ath-fase { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ath-fase::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cor, var(--bronze)); }
.ath-vazio { text-align: center; color: var(--cinza); padding: 36px 10px; font-size: 14px; }
.ath-paginacao { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--cinza); }
.ath-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.ath-filtros .ath-entrada { width: auto; min-width: 150px; height: var(--filtro-altura); box-sizing: border-box; padding: 0 10px; font-size: 13.5px; }
.ath-filtros label { display: flex; flex-direction: column; gap: 4px; font: 600 11px var(--fonte); letter-spacing: .06em; text-transform: uppercase; color: var(--cinza); }
.ath-filtros .marca { flex-direction: row; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--texto); }
/* Correção da EV-0027: tudo o que fica na linha dos filtros sem rótulo em cima (caixa, "Mais filtros", botões) tem a altura
   dos campos e fica alinhado pela base deles, numa linha só */
.ath-filtros { --filtro-altura: 38px; }
.ath-filtros > .marca, .ath-filtros > .mais-filtros, .ath-filtros > button, .ath-filtros > a { align-self: flex-end; flex-shrink: 0; height: var(--filtro-altura);
    box-sizing: border-box; margin: 0; white-space: nowrap; }
.ath-filtros > button, .ath-filtros > a { display: inline-flex; align-items: center; }
.ath-filtros > .mais-filtros > summary { height: var(--filtro-altura); box-sizing: border-box; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
/* botões da linha que um projeto acrescenta (ex.: o "Fazer agora" do OC, num details ou dentro de um div) seguem a mesma altura */
.ath-filtros > details { align-self: flex-end; flex-shrink: 0; }
.ath-filtros .ath-botao-sec { height: var(--filtro-altura); box-sizing: border-box; white-space: nowrap; }
.ath-filtros .faixa { display: flex; gap: 4px; }
.ath-filtros .faixa .ath-entrada { min-width: 0; width: 7.5em; }
/* 2 colunas em tablet (até 1023 px) ou quando a coluna da ficha é estreita; 1 no celular (abaixo de 768 px) */
@media (max-width: 1023px) { .ath-grade-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ath-grade-campos > * { grid-column: span 1; }
    .ath-grade-campos > .l3, .ath-grade-campos > .l4, .ath-grade-campos .largo, .ath-grade-campos > .grupo-campos { grid-column: 1 / -1; } }
@container (max-width: 560px) { .ath-grade-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ath-grade-campos > * { grid-column: span 1; }
    .ath-grade-campos > .l3, .ath-grade-campos > .l4, .ath-grade-campos .largo, .ath-grade-campos > .grupo-campos { grid-column: 1 / -1; } }
@media (max-width: 767px) { .ath-grade-campos { grid-template-columns: minmax(0, 1fr); } .ath-grade-campos > * { grid-column: 1 / -1; } }
.ath-icone { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ath-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin: 0 0 20px; flex-wrap: wrap; }
.ath-abas a { padding: 9px 14px; font: 600 13px var(--fonte); color: var(--cinza); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ath-abas a:hover { color: var(--vinho); }
.ath-abas a.ativa { color: var(--vinho); border-bottom-color: var(--vinho); }
.senha-temp code { font: 600 15px ui-monospace, Consolas, monospace; background: var(--branco); border: 1px solid #CFE3CF; border-radius: 6px; padding: 2px 8px; margin: 0 6px; }
.senha-temp small { display: block; margin-top: 6px; }
.ath-selo { display: inline-block; font: 600 10.5px var(--fonte); letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px;
    border: 1px solid var(--borda); color: var(--cinza); background: var(--branco); white-space: nowrap; }
.ath-selo.vinho { color: var(--vinho); border-color: var(--bronze-claro); }
.ath-selo.verde { color: #2E5E2E; border-color: #CFE3CF; }
.ath-assinatura { text-align: center; font: 400 11px var(--fonte); letter-spacing: .08em; color: var(--cinza); margin: 36px 0 0; }
.ath-assinatura b { font-weight: 600; color: var(--texto); }

/* ---- "Explicar esta tela" (athena-explica.js) ---- */
.ath-explicar { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px var(--fonte); color: var(--creme); background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(211, 182, 158, 0.45); border-radius: 999px; padding: 3px 12px 3px 3px; cursor: pointer; }
.ath-explicar:hover { background: rgba(211, 182, 158, 0.18); }
.ath-explicar img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--creme); }
.explica-destaque { position: fixed; z-index: 9000; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(20, 8, 8, 0.55);
    outline: 2px solid var(--bronze-claro); transition: all .3s ease; }
.explica-cartao { position: fixed; z-index: 9001; width: min(420px, calc(100vw - 24px)); background: var(--branco); border-radius: 14px; padding: 16px 18px;
    box-shadow: 0 18px 50px rgba(20, 8, 8, 0.35); border-top: 4px solid var(--vinho); }
.explica-cartao.centro { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.explica-cartao.canto { right: 20px; bottom: 20px; left: auto; }
.explica-topo { display: flex; gap: 12px; align-items: center; }
.explica-topo img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bronze-claro); background: var(--creme); flex: none; }
.explica-contador { display: block; font: 600 10.5px var(--fonte); letter-spacing: .1em; text-transform: uppercase; color: var(--bronze); }
.explica-topo strong { font: 600 15px var(--fonte-titulo); color: var(--grafite); }
.explica-texto { margin: 10px 0 12px; font-size: 14px; line-height: 1.55; color: var(--texto); }
.explica-progresso { height: 3px; background: var(--borda); border-radius: 3px; overflow: hidden; }
.explica-progresso span { display: block; height: 100%; width: 0; background: var(--vinho); }
.explica-botoes { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.explica-botoes button { font: 600 12.5px var(--fonte); color: var(--vinho); background: var(--branco); border: 1px solid var(--bronze-claro); border-radius: 999px;
    padding: 5px 12px; cursor: pointer; }
.explica-botoes button:hover { background: var(--creme); }
.explica-botoes button[data-a="sair"] { margin-left: auto; color: var(--cinza); border-color: var(--borda); }
.explica-convite { position: absolute; z-index: 8000; display: flex; align-items: center; gap: 4px; background: var(--branco); border: 1px solid var(--borda);
    border-radius: 12px; padding: 6px 6px 6px 12px; box-shadow: var(--sombra); }
.explica-convite::before { content: ""; position: absolute; top: -7px; right: 28px; width: 12px; height: 12px; background: var(--branco);
    border-left: 1px solid var(--borda); border-top: 1px solid var(--borda); transform: rotate(45deg); }
.explica-convite button { font: 600 13px var(--fonte); color: var(--vinho); background: none; border: 0; cursor: pointer; padding: 4px 6px; }
.explica-convite .explica-x { color: var(--cinza); font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .explica-destaque { transition: none; } }
@media print { .explica, .explica-convite, .ath-explicar { display: none !important; } }

/* Ajuda contextual (ⓘ) pelas fichas da Alexandria — fragmentos :: ajuda, /js/athena-ajuda.js */
.ath-ajuda-botao { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px;
    border-radius: 50%; border: 1px solid var(--bronze); color: var(--bronze); font: italic 700 10.5px Georgia, serif;
    cursor: pointer; vertical-align: 1px; user-select: none; text-transform: none; letter-spacing: 0; }
.ath-ajuda-botao:hover, .ath-ajuda-botao:focus-visible, .ath-ajuda-botao[aria-expanded="true"] { background: var(--bronze); color: var(--branco); outline: none; }
.ath-ajuda { position: absolute; z-index: 60; width: min(340px, calc(100vw - 24px)); background: var(--branco); border: 1px solid var(--borda);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(44, 7, 8, 0.18); padding: 12px 14px; font: 400 13.5px/1.55 var(--fonte); color: var(--texto);
    text-transform: none; letter-spacing: 0; text-align: left; }
.ath-ajuda[hidden] { display: none; }
.ath-ajuda-topo { display: flex; align-items: center; gap: 8px; font: 600 11px var(--fonte); letter-spacing: .08em; text-transform: uppercase;
    color: var(--bronze); margin-bottom: 6px; }
.ath-ajuda-topo img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.ath-ajuda-titulo { display: block; font-weight: 600; color: var(--grafite); margin-top: 8px; }
.ath-ajuda-titulo:first-of-type { margin-top: 0; }
.ath-ajuda-par { display: block; margin-top: 4px; }
@media print { .ath-ajuda-botao, .ath-ajuda { display: none !important; } }

/* "Pergunte" (conversa com a assistente pelas fichas da Alexandria) — /js/athena-pergunte.js */
.ath-pergunte-botao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pergunte { position: fixed; z-index: 70; right: 18px; top: 74px; width: min(400px, calc(100vw - 24px)); max-height: calc(100vh - 96px);
    display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--borda); border-radius: 16px;
    box-shadow: 0 18px 44px rgba(44, 7, 8, 0.22); font: 400 14px/1.5 var(--fonte); color: var(--texto); }
.pergunte[hidden] { display: none; }
.pergunte-topo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--borda); }
.pergunte-topo img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--creme); }
.pergunte-topo div { flex: 1; display: flex; flex-direction: column; }
.pergunte-topo strong { font: 600 14px var(--fonte); color: var(--grafite); }
.pergunte-topo span { font-size: 12px; color: var(--cinza); }
.pergunte-fechar { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--cinza); cursor: pointer; padding: 2px 6px; }
.pergunte-lista { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.pergunte-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; }
.pergunte-msg p { margin: 0 0 6px; }
.pergunte-msg p:last-child { margin-bottom: 0; }
.pergunte-msg.dela { align-self: flex-start; background: var(--creme); border-bottom-left-radius: 4px; }
.pergunte-msg.minha { align-self: flex-end; background: var(--vinho); color: var(--creme); border-bottom-right-radius: 4px; }
.pergunte-msg.pensando { color: var(--cinza); letter-spacing: .2em; }
.pergunte-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.pergunte-rot { font-size: 12px; color: var(--cinza); width: 100%; }
.pergunte-chip { border: 1px solid var(--bronze-claro); background: var(--branco); color: var(--vinho); border-radius: 999px; padding: 4px 10px;
    font: 600 12.5px var(--fonte); cursor: pointer; }
.pergunte-chip:hover { background: var(--bronze-claro); }
.pergunte-rodape { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--cinza); }
.pergunte-link { border: 0; background: none; color: var(--vinho); font: 600 12.5px var(--fonte); cursor: pointer; padding: 0; text-decoration: underline; }
.pergunte-link.forte { text-decoration: none; border: 1px solid var(--vinho); border-radius: 999px; padding: 3px 10px; }
.pergunte-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px 14px; border-top: 1px solid var(--borda); }
.pergunte-form textarea { flex: 1; resize: none; border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; font: 400 14px var(--fonte); }
@media print { .pergunte, .ath-pergunte-botao { display: none !important; } }

/* ---- Selo de prazo (SLA): no prazo, vencendo, vencido ---- */
.ath-prazo { display: inline-block; font: 600 11.5px var(--fonte); border-radius: 999px; padding: 2px 9px; white-space: nowrap;
    color: var(--cor-prazo); background: color-mix(in srgb, var(--cor-prazo) 11%, #fff); border: 1px solid color-mix(in srgb, var(--cor-prazo) 35%, #fff); }
.ath-prazo.prazo-ok { --cor-prazo: #2e7d4f; }
.ath-prazo.prazo-vencendo { --cor-prazo: #b26a00; }
.ath-prazo.prazo-vencido { --cor-prazo: #c62828; }
.ath-prazo.prazo-sem-data { --cor-prazo: #6b6560; }
td.prazo-base { white-space: nowrap; }
td.prazo-base .ath-entrada { width: auto; display: inline-block; }

/* ---- Sino de avisos (cabeçalho) ---- */
.ath-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ath-sino { position: relative; }
.ath-sino-botao { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
    color: var(--creme); text-decoration: none; }
.ath-sino-botao:hover, .ath-sino-botao[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); }
.ath-sino-botao svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ath-sino-num { position: absolute; top: 1px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e53935;
    color: #fff; font: 700 10.5px/18px var(--fonte); text-align: center; }
.ath-sino-painel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(380px, 92vw); background: var(--branco); color: var(--texto);
    border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra); overflow: hidden; }
.ath-sino-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
.ath-sino-topo b { font: 600 14px var(--fonte-titulo); color: var(--grafite); }
.ath-sino-lista { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.ath-sino-lista li a { display: block; padding: 9px 12px; text-decoration: none; color: var(--texto); border-bottom: 1px solid var(--borda); font-size: 13px; line-height: 1.4; }
.ath-sino-lista li a:hover { background: var(--creme); }
.ath-sino-lista li.nao-lido a { border-left: 3px solid var(--vinho); font-weight: 600; }
.ath-sino-lista li small { display: block; color: var(--cinza); font-size: 11.5px; font-weight: 400; margin-top: 2px; }
.ath-sino-vazio { padding: 14px 12px; color: var(--cinza); font-size: 13px; }
.ath-sino-rodape { padding: 9px 12px; font-size: 12.5px; text-align: center; }

/* Tarja da licença (fragmentos :: cabecalho): ocupa a largura toda, abaixo da barra do topo */
.ath-cabecalho:has(.ath-tarja-licenca) { flex-wrap: wrap; }
.ath-tarja-licenca { flex-basis: 100%; order: 99; margin: 4px -28px -14px; padding: 9px 28px; font-size: 13px; line-height: 1.5;
                     background: #FFF6E5; color: #6B4A00; border-top: 1px solid #F1D9A6; }
.ath-tarja-licenca b { margin-right: 4px; }
.ath-tarja-licenca a { color: inherit; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.ath-tarja-licenca.aviso { background: #FBF6EE; color: #5b4a33; border-top-color: #E8D9C3; }
.ath-tarja-licenca.aviso-forte, .ath-tarja-licenca.sem-licenca { background: #FFEFC7; color: #6B4A00; border-top-color: #E9C46A; }
.ath-tarja-licenca.vencida { background: #FDECEA; color: #8A1C1C; border-top-color: #F2B8B5; }
.ath-tarja-licenca.so-leitura { background: #8A1C1C; color: #fff; border-top-color: #6E1515; }

/* Busca geral no cabeçalho (B2): leva a /busca; atalho "/" */
.ath-cabecalho .ath-busca-topo { margin-left: auto; }
.ath-cabecalho:has(.ath-busca-topo) .ath-usuario { margin-left: 0; }
.ath-busca-topo input { width: 220px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(211, 182, 158, .45);
    background: rgba(255, 255, 255, .12); color: var(--creme); font: 13px var(--fonte); }
.ath-busca-topo input::placeholder { color: rgba(251, 243, 236, .7); }
.ath-busca-topo input:focus { outline: 2px solid var(--bronze-claro); background: rgba(255, 255, 255, .2); }
@media (max-width: 1100px) { .ath-busca-topo input { width: 150px; } }

/* ---- A assistente com expressão (V2; fragmento assistente :: avatar, comportamento em /js/athena-assistente.js) ----
   O anel tem a cor do estado; problema e atenção acendem com 3 pulsos, sugestão e insight com 1; analisando e lendo
   giram um arco (lendo também inclina a cabeça). Sem imagem própria da expressão, o selo mostra o estado. */
.ath-assistente { --tam: 48px; --anel: #3a9a5b; position: relative; display: inline-block; width: var(--tam); height: var(--tam); flex: none; vertical-align: middle; }
.ath-assistente img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--creme);
    border: 2px solid #FFFFFF; box-shadow: 0 0 0 3px var(--anel), 0 4px 10px rgba(44, 7, 8, .16); transition: box-shadow .3s; }
.ath-assistente[data-estado="problema"] { --anel: #c62828; }
.ath-assistente[data-estado="atencao"] { --anel: #e0a100; }
.ath-assistente[data-estado="sugestao"] { --anel: #2a78d6; }
.ath-assistente[data-estado="insight"] { --anel: #7c3aed; }
.ath-assistente[data-estado="ok"] { --anel: #3a9a5b; }
.ath-assistente[data-estado="analisando"] { --anel: var(--bronze-claro); }
.ath-assistente[data-estado="lendo"] { --anel: #8fd0dc; }
.ath-assistente-selo { position: absolute; right: -3px; bottom: -3px; width: calc(var(--tam) * .38); height: calc(var(--tam) * .38); min-width: 15px; min-height: 15px;
    border-radius: 50%; background: var(--anel); color: #FFFFFF; border: 2px solid #FFFFFF; display: flex; align-items: center; justify-content: center;
    font: 700 calc(var(--tam) * .22) / 1 var(--fonte); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.ath-assistente[data-estado="problema"] .ath-assistente-selo::before, .ath-assistente[data-estado="atencao"] .ath-assistente-selo::before { content: "!"; }
.ath-assistente[data-estado="sugestao"] .ath-assistente-selo::before { content: "+"; }
.ath-assistente[data-estado="insight"] .ath-assistente-selo::before { content: "\2726"; }
.ath-assistente[data-estado="ok"] .ath-assistente-selo::before { content: "\2713"; }
.ath-assistente[data-estado="analisando"] .ath-assistente-selo::before, .ath-assistente[data-estado="lendo"] .ath-assistente-selo::before { content: "\2026"; }
.ath-assistente-contador { position: absolute; left: -6px; top: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--anel);
    color: #FFFFFF; font: 700 11px/19px var(--fonte); text-align: center; border: 2px solid #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
/* pulsos ao acender */
.ath-assistente::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--anel); opacity: 0; pointer-events: none; }
.ath-assistente.acender::after { animation: ath-pulso 1s ease-out 3; }
.ath-assistente.acender-uma::after { animation: ath-pulso 1.2s ease-out 1; }
@keyframes ath-pulso { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.55); opacity: 0; } }
/* analisando e lendo: arco girando; lendo inclina a cabeça */
.ath-assistente[data-estado="analisando"]::before, .ath-assistente[data-estado="lendo"]::before { content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 3px solid transparent; border-top-color: var(--bronze); border-right-color: var(--bronze); animation: ath-girar 1s linear infinite; pointer-events: none; }
.ath-assistente[data-estado="lendo"]::before { border-top-color: #0891b2; border-right-color: #0891b2; animation-duration: 1.6s; }
.ath-assistente[data-estado="lendo"] img { animation: ath-ler 1.4s ease-in-out infinite; }
@keyframes ath-girar { to { transform: rotate(360deg); } }
@keyframes ath-ler { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg) translateY(1px); } }
/* balão */
.ath-assistente-balao { position: absolute; z-index: 60; max-width: 280px; padding: 9px 30px 9px 12px; border-radius: 12px; background: #FFFFFF; color: var(--texto);
    border: 1px solid var(--borda); box-shadow: 0 10px 26px rgba(44, 7, 8, .18); font: 13px/1.45 var(--fonte); cursor: pointer;
    opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.ath-assistente-balao.visivel { opacity: 1; transform: none; }
.ath-assistente-balao::before { content: ""; position: absolute; left: 18px; top: -7px; width: 12px; height: 12px; background: #FFFFFF; border-left: 1px solid var(--borda);
    border-top: 1px solid var(--borda); transform: rotate(45deg); }
.ath-assistente-balao.acima::before { top: auto; bottom: -7px; left: auto; right: 24px; transform: rotate(225deg); }   /* EV-0120: em cima da Sophia do canto de baixo */
.ath-assistente-balao b { color: var(--vinho); }
.ath-assistente-balao button { position: absolute; right: 6px; top: 4px; border: 0; background: none; font-size: 17px; color: var(--cinza); cursor: pointer; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
    .ath-assistente::before, .ath-assistente::after, .ath-assistente img { animation: none !important; }
    .ath-assistente-balao { transition: none; }
}
@media print { .ath-assistente-balao { display: none; } }
.ath-assistente img[src$="athena-coruja.png"] { padding: 10%; }   /* a coruja da Athena (fundo transparente) respira dentro do círculo */

/* ---- Menu lateral contextualizado (fragmento menu-contexto :: tipo) ----
   O <main class="ath-principal com-menu"> vira duas colunas: o menu (fixo ao rolar) e o conteúdo da tela.
   Recolhido (botão « no topo, guardado no navegador) fica só com os ícones. Em tela estreita vira uma faixa no alto. */
.ath-principal.com-menu { max-width: 1460px; display: grid; grid-template-columns: 216px minmax(0, 1fr); column-gap: 26px; row-gap: 0; align-items: start; }
.ath-principal.com-menu > :not(.ath-menu-contexto) { grid-column: 2; min-width: 0; }
.ath-principal.com-menu.menu-recolhido { grid-template-columns: 62px minmax(0, 1fr); }
.ath-menu-contexto { grid-column: 1; grid-row: 1 / span 60; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: hidden auto;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--creme) 100%); border: 1px solid var(--borda); border-radius: 16px; padding: 12px 10px 14px;
    box-shadow: inset 0 1px 0 #FFF, 0 2px 4px rgba(44, 7, 8, .05), 0 12px 30px rgba(44, 7, 8, .10); scrollbar-width: thin; }
.ath-menu-contexto .mc-topo { display: flex; align-items: center; gap: 10px; padding: 2px 2px 10px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
.ath-menu-contexto .mc-icone { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--creme);
    background: linear-gradient(160deg, var(--vinho) 0%, var(--vinho-escuro) 100%); box-shadow: 0 3px 8px rgba(107, 19, 28, .25); }
.ath-menu-contexto .mc-icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ath-menu-contexto .mc-titulo { min-width: 0; flex: 1; line-height: 1.2; }
.ath-menu-contexto .mc-titulo small { display: block; font: 600 10px var(--fonte); letter-spacing: .1em; text-transform: uppercase; color: var(--bronze);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ath-menu-contexto .mc-titulo b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 13.5px/1.25 var(--fonte-titulo); color: var(--grafite); }
.ath-menu-contexto .mc-recolher { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--borda); background: var(--branco); color: var(--cinza);
    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ath-menu-contexto .mc-recolher:hover { color: var(--vinho); border-color: var(--bronze-claro); }
.ath-menu-contexto .mc-recolher svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.ath-menu-contexto .mc-grupo { margin: 12px 8px 4px; font: 600 10.5px var(--fonte); letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); }
.ath-menu-contexto a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--texto); text-decoration: none;
    font: 500 13.5px var(--fonte); border-left: 3px solid transparent; transition: background .12s; }
.ath-menu-contexto a:hover { background: rgba(255, 255, 255, .9); color: var(--vinho); }
.ath-menu-contexto a.ativo { background: #FFFFFF; color: var(--vinho); font-weight: 600; border-left-color: var(--vinho); box-shadow: 0 1px 3px rgba(44, 7, 8, .10); }
.ath-menu-contexto a svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ath-menu-contexto a span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ath-menu-contexto a.mc-parte { font-size: 13px; color: var(--cinza); }
.ath-menu-contexto a.mc-parte:hover { color: var(--vinho); }
/* recolhido: só ícones (o título de cada link vira a dica) */
.com-menu.menu-recolhido .ath-menu-contexto:not(.mc-espiando) { padding: 12px 8px 14px; }
.com-menu.menu-recolhido .ath-menu-contexto:not(.mc-espiando) :is(.mc-titulo, .mc-grupo, a span) { display: none; }
.com-menu.menu-recolhido .ath-menu-contexto:not(.mc-espiando) .mc-topo { flex-direction: column; gap: 8px; }
.com-menu.menu-recolhido .ath-menu-contexto .mc-recolher svg { transform: rotate(180deg); }
.com-menu.menu-recolhido .ath-menu-contexto:not(.mc-espiando) a { justify-content: center; padding: 8px 0; }
.com-menu.menu-recolhido .ath-menu-contexto:not(.mc-espiando) .mc-grupo + a, .com-menu.menu-recolhido .ath-menu-contexto:not(.mc-espiando) a + .mc-grupo { margin-top: 8px; }
/* recolhido e com o mouse em cima (ou o foco do teclado): abre por cima da tela, com os nomes; volta ao sair (o « fixa aberto) */
@media (min-width: 901px) {
    .com-menu.menu-recolhido .ath-menu-contexto.mc-espiando { width: 216px; z-index: 40; box-shadow: inset 0 1px 0 #FFF, 0 18px 44px rgba(44, 7, 8, .22); }
}
@media (max-width: 900px) {
    .ath-principal.com-menu, .ath-principal.com-menu.menu-recolhido { display: block; }
    .ath-menu-contexto { position: static; max-height: none; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 8px; margin-bottom: 16px; align-items: center; }
    .ath-menu-contexto .mc-topo { border: 0; margin: 0 6px 0 0; padding: 0; }
    .ath-menu-contexto .mc-recolher, .ath-menu-contexto .mc-grupo { display: none; }
    .ath-menu-contexto a { flex: none; border-left: 0; border-bottom: 3px solid transparent; }
    .ath-menu-contexto a.ativo { border-bottom-color: var(--vinho); }
}
@media print { .ath-menu-contexto { display: none !important; } .ath-principal.com-menu { display: block; } }
@media (prefers-reduced-motion: reduce) { .ath-menu-contexto a, .ath-menu-contexto .mc-recolher svg { transition: none; } }

/* ---- Cabeçalho organizado (15/10/2026, pedido do usuário: "muita informação junta") ----
   Esquerda: Voltar, Início, logo e o nome da solução (descrição numa linha). Centro: a busca. Direita, três itens:
   a assistente (menu: Explicar esta tela, Perguntar), o sino e a pessoa (menu: Minha mesa, lembretes, senha,
   Configuração, Sair). Os menus são <details class="ath-menu-topo">; o comportamento está em athena-navegacao.js. */
.ath-cabecalho { gap: 14px; padding: 10px 24px; }
.ath-cabecalho .ath-logo { height: 34px; }
.ath-cabecalho .ath-solucao { padding-left: 14px; min-width: 0; max-width: 300px; font-size: 14.5px; line-height: 1.25; }
.ath-cabecalho .ath-solucao > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ath-cabecalho .ath-solucao small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; letter-spacing: .1em; }
.ath-cabecalho .ath-busca-topo { flex: 1 1 auto; display: flex; justify-content: center; margin-left: 0; min-width: 0; }
.ath-busca-topo input { width: 100%; max-width: 420px; }
.ath-cabecalho .ath-usuario { gap: 8px; margin-left: 0; flex: none; }
.ath-menu-topo { position: relative; }
.ath-topo-gatilho { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 10px 3px 3px; border-radius: 999px;
    border: 1px solid rgba(211, 182, 158, .4); background: rgba(255, 255, 255, .07); color: var(--creme); font: 600 13px var(--fonte); transition: background .15s; }
.ath-topo-gatilho::-webkit-details-marker { display: none; }
.ath-topo-gatilho:hover, .ath-menu-topo[open] > .ath-topo-gatilho { background: rgba(255, 255, 255, .17); }
.ath-topo-gatilho:focus-visible { outline: 2px solid var(--bronze-claro); outline-offset: 2px; }
.ath-topo-gatilho img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--creme); border: 2px solid rgba(255, 255, 255, .7); }
.ath-iniciais { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bronze);
    color: #FFFFFF; font: 700 13px var(--fonte); border: 2px solid rgba(255, 255, 255, .55); }
.ath-topo-nome { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ath-seta { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .8; }
.ath-menu-painel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 900; min-width: 260px; background: #FFFFFF; color: var(--texto);
    border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 14px 34px rgba(44, 7, 8, .22); padding: 6px; }
.ath-menu-painel.direita { left: auto; right: 0; }
.ath-menu-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none;
    color: var(--texto); text-decoration: none; text-align: left; cursor: pointer; font: 13.5px var(--fonte); }
.ath-menu-item:hover, .ath-menu-item:focus-visible { background: var(--creme); color: var(--vinho); outline: none; }
.ath-menu-item svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ath-menu-item b { display: block; font-weight: 600; }
.ath-menu-item small { display: block; font-size: 12px; color: var(--cinza); margin-top: 1px; }
.ath-menu-quem { padding: 8px 10px 10px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
.ath-menu-quem b { display: block; font: 600 14px var(--fonte-titulo); color: var(--grafite); }
.ath-menu-quem small { font-size: 12px; color: var(--cinza); }
.ath-menu-sair { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--borda); }
@media (max-width: 1200px) { .ath-cabecalho .ath-solucao small { display: none; } .ath-topo-nome { display: none; } .ath-topo-gatilho { padding-right: 8px; } }
@media (max-width: 900px) { .ath-cabecalho .ath-solucao { display: none; } }
@media print { .ath-menu-topo { display: none !important; } }
.ath-entrada.calculado { background: var(--creme); color: var(--grafite); font-weight: 600; cursor: default; }

/* Portal ligado: seletor da tela inicial "Cards | Área de trabalho" (no cabeçalho do portal e da área de trabalho). */
.ath-seletor-visao { display: inline-flex; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 2px; gap: 2px; flex: none; }
.ath-seletor-visao a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; color: #fff;
    text-decoration: none; font-size: 12.5px; white-space: nowrap; }
.ath-seletor-visao a:hover { background: rgba(255,255,255,.14); }
.ath-seletor-visao a.ativo { background: #fff; color: var(--vinho); font-weight: 600; }
.ath-seletor-visao svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ath-cabecalho .ath-seletor-visao { margin-left: 14px; }
@media (max-width: 700px) { .ath-seletor-visao span { display: none; } }
@media print { .ath-seletor-visao { display: none; } }

/* Seções de campos e campos condicionais (EV-0013) */
.ath-grade-campos > [hidden] { display: none !important; }
.ath-grade-campos .secao-campos { margin: 10px 0 -4px; padding-top: 12px; border-top: 1px solid var(--linha, #e7ddd3); font-family: 'Montserrat', sans-serif;
    font-weight: 400; font-size: 15px; letter-spacing: .04em; color: var(--vinho); scroll-margin-top: 90px; }
.ath-grade-campos > .apareceu { animation: ath-apareceu .9s ease-out; }
@keyframes ath-apareceu { from { background: color-mix(in srgb, var(--bronze) 18%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .ath-grade-campos > .apareceu { animation: none; } }
.campo-condicao { min-width: 210px; font-size: 12.5px; }
.campo-condicao select { margin-bottom: 4px; }
.campo-condicao details.condicao summary { cursor: pointer; color: var(--cinza); }
.campo-condicao .form-condicao { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.campo-condicao .opcoes-condicao { border: 1px solid var(--linha, #e7ddd3); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.campo-condicao .opcoes-condicao legend { font-size: 11.5px; color: var(--cinza); }
.bloco-secoes { margin: 6px 0 18px; padding: 12px 14px; border: 1px dashed var(--linha, #e7ddd3); border-radius: 8px; }
/* Campo fora da condição que ainda tem valor ("recusar", EV-0014) e a seção sem campo à vista */
.ath-grade-campos > .fora-condicao { outline: 2px solid #c0392b33; outline-offset: 4px; border-radius: 6px; }
.aviso-condicao { display: block; margin-top: 4px; font-size: 12.5px; color: #a12a1d; }
.aviso-condicao[hidden], .secao-campos[hidden], .mc-parte[hidden] { display: none !important; }
/* Listas dependentes (EV-0006): o aviso do valor apagado ao trocar o pai e a tabela das ligações na configuração */
.aviso-lista { display: block; margin-top: 4px; font-size: 12.5px; color: #8a5a00; }
.aviso-lista[hidden] { display: none !important; }
details.dependencia { margin-top: 6px; }
details.dependencia summary { cursor: pointer; color: var(--cinza); font-size: 12.5px; }
details.dependencia form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tabela-ligacoes th, .tabela-ligacoes td { padding: 3px 8px; font-size: 12.5px; white-space: nowrap; }
.tabela-ligacoes td { text-align: center; }
.lista-condicoes { margin: 4px 0 6px; padding-left: 16px; }
.lista-condicoes li { margin: 2px 0; }
.lista-condicoes form { display: inline; }

/* Seções em subtelas (EV-0016): a fileira de botões abaixo da seção principal e a parte aberta */
.subtelas-botoes { display: flex; gap: 6px; margin: 14px 0 0; padding: 8px 0 10px; border-top: 1px solid var(--linha, #e7ddd3);
    overflow-x: auto; scrollbar-width: thin; }
.subtela-botao { flex: 0 0 auto; padding: 7px 14px; border: 1px solid var(--linha, #e7ddd3); border-radius: 999px; background: #fff;
    color: var(--grafite, #2E2A28); text-decoration: none; font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.subtela-botao:hover, .subtela-botao:focus-visible { border-color: var(--bronze); outline: none; }
.subtela-botao.ativo { background: var(--vinho); border-color: var(--vinho); color: #fff; }
.subtela-botao.com-erro { border-color: #c0392b; color: #a12a1d; }
.subtela-botao.com-erro::after { content: " •"; color: #c0392b; font-weight: 700; }
.subtela-botao.ativo.com-erro { color: #fff; }
.subtela-botao[hidden], .subtela[hidden] { display: none !important; }
.subtela { padding: 12px 14px 4px; border: 1px solid var(--linha, #e7ddd3); border-radius: 8px; background: color-mix(in srgb, var(--creme, #FBF3EC) 45%, #fff);
    scroll-margin-top: 90px; }
.subtela-titulo { margin: 0 0 10px; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: .04em; color: var(--vinho); }
@media print { .subtelas-botoes { display: none; } .subtela[hidden] { display: block !important; } }
/* Campo calculado como resumo (EV-0026): valor em destaque, contexto e atalho para onde ele muda; o resumo das grades */
.resumo-calculado, .resumo-grade { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 12px; min-height: 40px;
    border: 1px solid var(--borda); border-radius: 10px; background: var(--creme, #FBF3EC); }
.resumo-calculado .rs-valor, .resumo-grade .rs-valor { font: 600 17px/1.3 var(--fonte-titulo); color: var(--grafite); }
.resumo-calculado .rs-contexto { font-size: 12.5px; color: var(--cinza); }
.resumo-calculado .rs-contexto::before { content: "· "; }
.resumo-calculado .rs-atalho, .resumo-grade .rs-atalho { font-size: 12.5px; color: var(--vinho); font-weight: 600; text-decoration: none; margin-left: auto; }
.resumo-calculado .rs-atalho:hover, .resumo-grade .rs-atalho:hover { text-decoration: underline; }
/* Telas largas (EV-0027): filtros numa linha; o resto em "Mais filtros", que diz quantos estão ligados */
.ath-filtros.filtros-linha { flex-wrap: nowrap; align-items: flex-end; overflow: visible; }
.ath-filtros.filtros-linha > label { flex: 0 1 auto; min-width: 0; }
.mais-filtros { position: relative; align-self: flex-end; }
.mais-filtros > summary { list-style: none; cursor: pointer; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--borda); background: var(--branco, #fff);
    font-size: 13px; color: var(--texto); white-space: nowrap; }
.mais-filtros > summary::-webkit-details-marker { display: none; }
.mais-filtros > summary::after { content: " ▾"; color: var(--cinza); }
.mais-filtros[open] > summary { border-color: var(--bronze-claro); color: var(--vinho); }
.mais-filtros .mf-painel { position: absolute; z-index: 25; top: calc(100% + 6px); left: 0; min-width: 260px; max-height: 60vh; overflow: auto; display: flex;
    flex-direction: column; gap: 10px; padding: 12px; background: var(--branco, #fff); border: 1px solid var(--borda); border-radius: 12px;
    box-shadow: 0 12px 30px rgba(44, 7, 8, .14); }
.mais-filtros .mf-painel label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--cinza); }
.mais-filtros .mf-painel label.marca { flex-direction: row; align-items: center; }
@media (max-width: 767px) { .ath-filtros.filtros-linha { flex-wrap: wrap; } }
/* Barra de visualização do tipo (EV-0027): só as visões que ele tem */
.barra-visoes { display: flex; gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .6); border: 1px solid var(--borda);
    width: fit-content; max-width: 100%; overflow-x: auto; }
.barra-visoes a { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 9px; color: var(--cinza); text-decoration: none; font-size: 13px;
    white-space: nowrap; }
.barra-visoes a:hover { color: var(--vinho); background: #fff; }
.barra-visoes a.ativo { color: var(--vinho); background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(44, 7, 8, .10); }
.barra-visoes svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Confirmações dentro da página (CH-0011, athena-confirmar.js): no lugar das janelas nativas do navegador */
.ath-caixa-fundo { position: fixed; inset: 0; z-index: 2000; background: rgba(46, 42, 40, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ath-caixa { background: var(--branco, #fff); border-radius: 16px; box-shadow: 0 18px 48px rgba(44, 7, 8, .28); max-width: 460px; width: 100%; padding: 20px 22px;
    font: 15px var(--fonte); color: var(--grafite); }
.ath-caixa p { margin: 0 0 14px; line-height: 1.45; white-space: pre-line; }
.ath-caixa input { width: 100%; box-sizing: border-box; margin: 0 0 14px; }
.ath-caixa-botoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media print { .ath-caixa-fundo { display: none; } }

/* EV-0033: tempo em cada fase (só nos tipos com a medição ligada) */
.selo-espera, .selo-gargalo, .selo-volta { display: inline-block; margin-left: 6px; font-size: 11px; border-radius: 999px; padding: 0 7px; border: 1px solid var(--borda); color: var(--cinza); vertical-align: 1px; }
.selo-gargalo { color: var(--vinho); border-color: var(--vinho); }
.selo-volta { color: #9a5b00; border-color: #e6c48a; }
/* EV-0081: o último movimento dos parados (em atividade × sem atualização) */
.selo-movimento { display: inline-block; margin-left: 6px; font-size: 11px; border-radius: 999px; padding: 0 7px; border: 1px solid var(--borda); vertical-align: 1px; }
.selo-movimento.ativo { color: #2f6b3a; border-color: #9cc5a4; }
.selo-movimento.sem-atualizacao { color: #9a5b00; border-color: #e6c48a; }
.movimento-porque { display: block; font-size: 12px; color: var(--cinza); margin-top: 2px; }
.ath-tabela tr.gargalo td { background: color-mix(in srgb, var(--vinho) 6%, transparent); }
.onde-trava .lista-simples, .tempo-fases { list-style: none; margin: 6px 0 0; padding: 0; }
.onde-trava .lista-simples li { padding: 4px 0; border-bottom: 1px solid var(--borda); }
/* EV-0043: "Medir em: Horas corridas | Horas úteis" no painel e nos ganhos */
.medida-tempo { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--cinza); margin: 0 0 10px; flex-wrap: wrap; }
.medida-tempo a { padding: 3px 10px; border: 1px solid var(--borda); border-radius: 999px; color: var(--texto); text-decoration: none; }
.medida-tempo a.ativo { background: var(--vinho); border-color: var(--vinho); color: #fff; }
.tempo-fases li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--borda); }
.tempo-fases .quando { grid-column: 1 / -1; font-size: 12px; color: var(--cinza); }
.tempo-fases li.encerra { color: var(--cinza); }
.tempo-fases-total { margin-top: 8px; font-size: 13px; color: var(--cinza); }

/* EV-0034: transições controladas */
.selo-aprovacao { display: inline-block; margin-top: 4px; font-size: 11px; border-radius: 999px; padding: 0 7px; border: 1px solid #e6c48a; color: #9a5b00; }
/* EV-0041: os formulários das automações mostram só os campos do que foi escolhido (athena-automacoes.js) */
.automacao-campo { display: inline-flex; flex-direction: column; gap: 2px; margin: 0 14px 10px 0; vertical-align: top; }
.automacao-campo[hidden], .automacao-nova-acao[hidden], [data-cond-lista][hidden], [data-cond-valor][hidden], [data-sem-js][hidden], [data-rotulo-de][hidden], [data-valor-lista][hidden], [data-valor-texto][hidden], .automacao-campo .ajuda[hidden] { display: none !important; }
.automacao-nova-acao { border: 1px dashed var(--borda); border-radius: 8px; padding: 10px 12px 0; margin-top: 8px; }
/* a linha da ação nova e a da automação nova: campos lado a lado, o botão à direita, alinhado à base dos campos */
.automacao-linha { display: flex; flex-wrap: wrap; align-items: flex-end; }
/* campos de texto e de escolha com a mesma altura: os rótulos ficam na mesma linha */
.automacao-linha .automacao-campo .ath-entrada { height: 41px; box-sizing: border-box; }
.automacao-linha > .ath-botao, .automacao-linha > .ath-botao-sec { margin: 0 0 10px; }
.automacao-linha > .ajuda, .automacao-linha > .automacao-nota { flex-basis: 100%; margin: 0 0 10px; }
.automacao-topo { margin: 10px 0; }
.automacao-condicoes { flex-basis: 100%; border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.automacao-condicoes legend { font: 600 12.5px var(--fonte); color: var(--grafite); padding: 0; margin-bottom: 4px; }
.automacao-condicao { width: 100%; }
.automacao-nova[hidden] { display: none !important; }
.automacao-nova { border: 1px solid var(--bronze-claro); border-radius: 10px; padding: 12px 14px 0; margin: 0 0 12px; background: var(--creme); }
/* ligar (principal), simular (secundário), excluir (perigo discreto): mesma altura, na mesma linha */
.automacao-botoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.automacao-botoes form { margin: 0; }
.automacao-botoes .ath-botao.pequeno, .automacao-botoes .ath-botao-sec { height: 34px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.automacao-botoes .automacao-excluir { margin-left: auto; }
.ath-botao-sec.perigo { color: #8A1C1C; border-color: #F0C6C6; }
.ath-botao-sec.perigo:hover { background: #FBECEC; }
.passagem-pendente { margin: 10px 0; border-left: 4px solid #e6c48a; }
.passagem-pendente .passagem-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* EV-0044: checklist da fase na ficha e na configuração */
.checklist-fase { margin: 10px 0; border-left: 4px solid var(--bronze); }
.checklist-itens { list-style: none; margin: 6px 0 0; padding: 0; }
.checklist-itens li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borda); }
.checklist-itens li form { margin: 0; }
.checklist-marca { width: 24px; height: 24px; border: 2px solid var(--borda); border-radius: 6px; background: #fff; color: transparent; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.checklist-itens li.feita .checklist-marca { background: var(--vinho); border-color: var(--vinho); color: #fff; }
.checklist-itens li.feita .texto { text-decoration: line-through; color: var(--cinza); }
.checklist-itens .selo-obrig { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--vinho) 12%, transparent); color: var(--vinho); }
.checklist-itens .quem { font-size: 12px; color: var(--cinza); flex-basis: 100%; padding-left: 34px; }
.checklist-config .ath-entrada { width: 100%; }
.passagem-pendente .passagem-recusar { display: flex; gap: 6px; align-items: center; }
.passagem-pendente.pode-decidir { border-left-color: var(--vinho); background: color-mix(in srgb, var(--vinho) 5%, var(--branco, #fff)); }
.passagem-pendente .passagem-voce { font-size: 15px; color: var(--vinho); margin: 0 0 6px; }

/* EV-0062: a situação dos registros vinculados na ficha */
.vinculados-situacao .vs-bloco { padding: 8px 0; border-top: 1px solid var(--linha, #e6ddd5); }
.vinculados-situacao .vs-bloco:first-of-type { border-top: 0; }
.vinculados-situacao .vs-titulo { margin: 0 0 6px; font-size: 13.5px; }
.vinculados-situacao .vs-titulo small { color: var(--texto-suave, #6b625d); margin-left: 6px; }
.vinculados-situacao .vs-contagens { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; align-items: center; }
.vinculados-situacao .vs-contagens a { text-decoration: none; color: inherit; font-size: 13px; padding: 3px 9px; border-radius: 6px; background: var(--creme, #fbf3ec); }
.vinculados-situacao .vs-contagens a:hover { background: var(--bronze-claro, #d3b69e); }
.vinculados-situacao .vs-total { font-weight: 600; }
.vinculados-situacao .vs-fase { border-left: 4px solid var(--bronze, #b07a4f); }
.vinculados-situacao .vs-atrasados { background: #fdecea !important; color: #b3261e !important; font-weight: 600; }

/* EV-0063: dependências entre registros na ficha */
.dep-lista { list-style: none; margin: 6px 0 0; padding: 0; }
.dep-lista li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borda); }
.dep-lista li.pendente { border-left: 3px solid #c0392b; padding-left: 8px; }
.dep-lista li.liberado { border-left: 3px solid #2e8b57; padding-left: 8px; }
.dep-fase { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--creme, #FBF3EC); border: 1px solid var(--borda); }
.dep-situacao, .dep-caminho { font-size: 13px; color: var(--grafite, #2E2A28); }
.selo-vinculo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; background: #e8f0fb; color: #1d4f91; }
.selo-vinculo.inferido { background: #f4ecdf; color: #7a5326; }
.dep-prazo { margin: 4px 0 8px; font-weight: 600; color: #a5281b; }

/* EV-0090: o atraso do fornecedor × o das encomendas servidas (lado a lado, sem afirmar causa) */
.ath-atraso { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .85em; white-space: nowrap; background: #eef0f2; color: #3b4148; }
.ath-atraso.atraso-ambos { background: #fdecea; color: #b3261e; }
.ath-atraso.atraso-encomenda { background: #fdecea; color: #8a2a1e; }
.ath-atraso.atraso-fornecedor { background: #fff4e0; color: #8a5a00; }
.ath-atraso.atraso-nenhum { background: #e8f5e9; color: #2e6b34; }
.atraso-cruzado .ac-fornecedor { margin: 4px 0 10px; }
.atraso-cruzado small { display: block; color: var(--texto-suave, #6b6560); }

/* EV-0065: o risco calculado de atrasar (o selo, o ajuste à mão ao lado e o painel "Por que este risco") */
.ath-risco-par { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.ath-risco, .ath-risco-ajuste { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .85em; white-space: nowrap; background: #eef0f2; color: #3b4148; }
.ath-risco.risco-alto { background: #fdecea; color: #b3261e; font-weight: 600; }
.ath-risco.risco-medio { background: #fff4e0; color: #8a5a00; }
.ath-risco.risco-baixo { background: #e8f5e9; color: #2e6b34; }
.ath-risco.risco-sem-base { background: #eef0f2; color: #6b6560; font-style: italic; }
.ath-risco-ajuste { background: transparent; border: 1px dashed currentColor; font-size: .8em; }
.ath-risco-ajuste.risco-alto { color: #b3261e; } .ath-risco-ajuste.risco-medio { color: #8a5a00; } .ath-risco-ajuste.risco-baixo { color: #2e6b34; }
.risco-ficha { position: relative; display: inline-block; }
.risco-ficha > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; }
.ath-risco-link { display: inline-flex; align-items: center; cursor: pointer; text-decoration: none; }
/* o mesmo ⓘ dos campos (.ath-ajuda-botao), sem o script da ajuda: o clique é do selo (abre o painel ou a ficha) */
.ath-risco-i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px;
    border-radius: 50%; border: 1px solid var(--bronze); color: var(--bronze); font: italic 700 10.5px Georgia, serif;
    cursor: pointer; vertical-align: 1px; user-select: none; text-transform: none; letter-spacing: 0; }
.ath-risco-link:hover .ath-risco-i, .ath-risco-link:focus-visible .ath-risco-i, .risco-ficha > summary:hover .ath-risco-i, .risco-ficha[open] .ath-risco-i {
    background: var(--bronze); color: var(--branco); }
.risco-ficha > summary::-webkit-details-marker { display: none; }
.risco-painel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(420px, 90vw); background: var(--branco, #fff); border: 1px solid var(--borda);
    border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); padding: 12px 14px; font-size: 13.5px; text-align: left; }
.linha-risco .risco-painel { left: 0; right: auto; }
.risco-titulo { margin: 0 0 6px; font-weight: 600; color: var(--grafite, #2E2A28); }
.risco-sophia { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; color: var(--cinza); }
.risco-razoes { margin: 0 0 8px; padding-left: 18px; }
.risco-razoes li { margin: 2px 0; color: var(--cinza); }
.risco-razoes li.pesa { color: var(--grafite, #2E2A28); font-weight: 600; }
.risco-previsao { margin: 0 0 8px; }
.risco-previsao .ajuda { display: block; }
.risco-ajuste-atual { border-top: 1px solid var(--borda); padding-top: 8px; margin-top: 4px; }
.risco-ajuste-atual p { margin: 0 0 4px; }
.risco-ajustar { border-top: 1px solid var(--borda); padding-top: 8px; margin-top: 8px; display: grid; gap: 6px; }
.risco-ajustar label { display: grid; gap: 2px; font-size: 12.5px; }
.risco-retirar { margin-top: 6px; }
.linha-risco { margin: 4px 0 0; }
@media print { .risco-painel { display: none; } }

/* EV-0089: os campos que o texto da automação aceita e a prévia com um registro real */
.automacao-marcadores { margin: 6px 0 12px; }
.automacao-marcadores summary { cursor: pointer; font: 600 13px var(--fonte); color: var(--grafite); }
.automacao-marcadores .ath-tabela { max-width: 640px; margin-top: 6px; }
.automacao-previa { display: block; flex-basis: 100%; margin-top: 4px; }
.automacao-acoes .automacao-previa { margin: 2px 0 4px; }
.automacao-previa.com-erro { color: #a12a1d; }
/* EV-0089: a mensagem, a anotação e o título ocupam a linha do formulário; a lista dos marcadores ao digitar "{" */
.automacao-campo-largo { flex-basis: 100%; position: relative; }
.automacao-campo-largo [data-valor-texto] { max-width: none !important; width: 100%; }
.automacao-sugestoes { position: absolute; z-index: 30; left: 0; top: 64px; min-width: 320px; max-width: 100%; max-height: 260px; overflow-y: auto;
    margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.automacao-sugestoes li { display: flex; gap: 10px; align-items: baseline; padding: 5px 10px; cursor: pointer; font-size: 13px; }
.automacao-sugestoes li[aria-selected="true"], .automacao-sugestoes li:hover { background: var(--creme, #FBF3EC); }
.automacao-sugestoes li span { color: var(--grafite); opacity: .75; }

/* EV-0100: "Sophia, me guie" — o campo do passo destacado, o cartão no canto, os obrigatórios que faltam e o "Retomar" */
.meguie-alvo { outline: 3px solid var(--vinho); outline-offset: 4px; border-radius: 8px; box-shadow: 0 0 0 8px rgba(122, 30, 46, 0.12); }
.meguie-cartao { max-height: calc(100vh - 40px); overflow: auto; }
.meguie-faltam { margin: -4px 0 12px 18px; padding: 0; font-size: 13.5px; color: var(--vinho); }
.meguie-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.meguie-retomar { position: fixed; right: 20px; bottom: 20px; z-index: 9001; border: 0; border-radius: 999px; padding: 10px 16px; background: var(--vinho);
    color: var(--branco); font: 600 13px var(--fonte); box-shadow: 0 8px 24px rgba(20, 8, 8, 0.3); cursor: pointer; }
@media (max-width: 520px) { .meguie-cartao.canto { right: 12px; left: 12px; bottom: 12px; width: auto; } }
/* EV-0116 (item 9): a história do fluxo por cima da tela, durante o guia (fechar = o guia continua no mesmo passo) */
.meguie-historia { position: fixed; inset: 24px; z-index: 9100; display: flex; flex-direction: column; background: #0d0b10; border-radius: 14px;
    box-shadow: 0 24px 60px rgba(20, 8, 8, .45); overflow: hidden; }
.meguie-historia-barra { display: flex; gap: 16px; align-items: center; justify-content: flex-start; padding: 10px 14px; background: var(--vinho); color: var(--branco); }
.meguie-historia-barra strong { font: 600 15px var(--fonte); }
.meguie-historia-fechar { border: 0; border-radius: 999px; padding: 10px 18px; background: var(--branco); color: var(--vinho); font: 700 15px var(--fonte);
    cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.meguie-historia-fechar:hover, .meguie-historia-fechar:focus-visible { background: #fff4dc; outline: 3px solid var(--bronze); outline-offset: 2px; }
.meguie-historia iframe { flex: 1; width: 100%; border: 0; background: #0d0b10; }
@media (max-width: 600px) { .meguie-historia { inset: 0; border-radius: 0; } }

/* EV-0104: a barra do "Gravar um guia" (o consultor fazendo a tarefa) e o editor dos passos */
.gravar-guia-barra { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9002; display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 12px; background: var(--grafite); color: var(--branco);
    font: 500 13px var(--fonte); box-shadow: 0 8px 24px rgba(20, 8, 8, 0.35); }
.gravar-guia-ponto { color: #e5484d; animation: gravar-guia-pisca 1.2s infinite; }
@keyframes gravar-guia-pisca { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .gravar-guia-ponto { animation: none; } }
.gravar-guia-barra .ath-botao-sec { background: transparent; color: var(--branco); border-color: rgba(255, 255, 255, .5); }
.guia-passos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.guia-passos > li.guia-passo { margin: 0; }
.guia-passo-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.guia-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--vinho); color: var(--branco); font: 600 13px var(--fonte); flex: none; }
.guia-passos .guia-onde { font-size: 12.5px; color: var(--cinza); text-transform: uppercase; letter-spacing: .04em; }
.guia-passos textarea, .guia-passos input[type=text] { width: 100%; }
.guia-passos textarea { min-height: 72px; }

/* EV-0108: "Algo não funcionou" / "Queria que fizesse…" — a conversa do relato ao suporte */
.relato-painel { position: fixed; right: 20px; bottom: 20px; z-index: 9003; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto;
    background: var(--branco); border-radius: 14px; box-shadow: 0 12px 36px rgba(20, 8, 8, 0.28); padding: 18px 20px; }
.relato-titulo { margin: 0 0 8px; font-size: 17px; }
.relato-ajuda { margin: 0 0 10px; font-size: 13.5px; color: var(--grafite); }
.relato-texto { width: 100%; min-height: 110px; }
.relato-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.relato-citacao { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--vinho); background: var(--creme); white-space: pre-wrap; }
.relato-contexto { margin: 0; padding-left: 18px; font-size: 13px; }
.relato-ok { margin: 0; }
.pergunte-relato { padding: 8px 14px 12px; border-top: 1px solid var(--linha, #e7dcd2); }
@media (max-width: 520px) { .relato-painel { right: 12px; left: 12px; bottom: 12px; width: auto; } }
/* EV-0112: a prévia do impacto antes de gravar a configuração */
.ath-caixa.ath-impacto { max-width: 640px; }
.ath-impacto-topo { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.ath-impacto-topo img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ath-impacto-lista { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }

/* EV-0101: Sophia numa porta só — a bola (embaixo, à direita ou à esquerda) e o painel com as portas */
.sophia-porta { position: fixed; right: 22px; bottom: 22px; z-index: 60; }
.sophia-porta [hidden] { display: none !important; }
.sophia-porta.esquerda { right: auto; left: 22px; }
.sophia-porta.oposto { right: auto; left: 22px; }   /* a bola passou para o outro lado: embaixo dela havia o que gravar */
.sophia-porta.esquerda.oposto { left: auto; right: 22px; }
.sophia-porta.oposto .sophia-portas { right: auto; left: 0; }
.sophia-porta.esquerda.oposto .sophia-portas { left: auto; right: 0; }
.sophia-bola { position: relative; display: block; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer;
    box-shadow: 0 8px 26px rgba(44, 7, 8, .25); }
.sophia-bola:focus-visible { outline: 3px solid var(--bronze); outline-offset: 3px; }
.sophia-ponto { position: absolute; top: 1px; right: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--bronze);
    border: 2px solid var(--branco); }
/* o painel fica dentro do cabeçalho (cor creme): o texto dele tem a cor de sempre */
.sophia-portas { color: var(--texto); position: absolute; right: 0; bottom: 72px; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow: auto;
    background: var(--branco); border: 1px solid var(--borda); border-radius: 16px; box-shadow: 0 18px 48px rgba(44, 7, 8, .22); padding: 14px; }
.sophia-porta.esquerda .sophia-portas { right: auto; left: 0; }
.sophia-portas-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sophia-portas-topo img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sophia-portas-topo div { flex: 1; display: flex; flex-direction: column; }
.sophia-portas-topo b { font: 700 15px var(--fonte-titulo); color: var(--vinho); }
.sophia-portas-topo small { font-size: 12.5px; color: var(--cinza); }
.sophia-fechar { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--vinho); padding: 4px 8px; border-radius: 8px; }
.sophia-fechar:focus-visible { outline: 2px solid var(--bronze); }
.sophia-lista { display: flex; flex-direction: column; gap: 8px; }
.sophia-entrada { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--borda);
    border-radius: 12px; background: var(--creme); color: var(--texto); font: inherit; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.sophia-entrada:hover, .sophia-entrada:focus-visible { border-color: var(--vinho); outline: none; box-shadow: 0 0 0 2px rgba(107, 19, 28, .15); }
.sophia-entrada svg { width: 26px; height: 26px; flex: none; stroke: var(--vinho); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sophia-entrada span { display: flex; flex-direction: column; }
.sophia-entrada b { font-size: 14px; color: var(--vinho); }
.sophia-entrada small { font-size: 12.5px; color: var(--cinza); }
.sophia-sugestoes, .sophia-tarefas { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 0 2px 38px; }
.sophia-opcao { text-align: left; border: 0; background: none; color: var(--vinho); font: 600 13px var(--fonte); cursor: pointer; padding: 4px 6px;
    border-radius: 8px; text-decoration: none; }
.sophia-opcao:hover, .sophia-opcao:focus-visible { background: var(--creme); outline: none; text-decoration: underline; }
.sophia-sinal { color: var(--texto); margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: #FFF6E0; border: 1px solid #F0D9A0; font-size: 13px;
    display: flex; flex-direction: column; gap: 4px; }
/* EV-0103: a oferta de ajuda quando a pessoa travou (o aceitar em destaque, o "não perguntar de novo" ao lado) */
.sophia-oferta { display: flex; flex-direction: column; gap: 4px; }
.sophia-oferta-botoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sophia-opcao.principal { background: var(--vinho); color: #fff; padding: 6px 12px; }
.sophia-opcao.principal:hover, .sophia-opcao.principal:focus-visible { background: var(--vinho); color: #fff; text-decoration: underline; }
.sophia-vazio { margin: 4px 0; font-size: 12.5px; color: var(--cinza); }
/* EV-0137: o balão por prioridade de uso — a pergunta no topo, os cartões, as perguntas frequentes e o suporte recolhido */
.sophia-portas { width: min(420px, calc(100vw - 32px)); }
.sophia-portas-topo img { width: 52px; height: 52px; }
.sophia-portas-topo b { font-size: 18px; }
.sophia-portas-topo small { font-size: 14px; }
.sophia-pergunta { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 6px 6px 6px 12px; border: 1px solid var(--borda);
    border-radius: 12px; background: var(--creme); }
.sophia-pergunta:focus-within { border-color: var(--vinho); box-shadow: 0 0 0 2px rgba(107, 19, 28, .15); }
.sophia-pergunta > svg { width: 22px; height: 22px; flex: none; stroke: var(--vinho); fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.sophia-pergunta input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 14.5px var(--fonte); color: var(--texto); padding: 8px 0; outline: none; }
.sophia-enviar { flex: none; width: 42px; height: 42px; border: 0; border-radius: 10px; background: var(--vinho); cursor: pointer; display: grid; place-items: center; }
.sophia-enviar svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sophia-enviar:focus-visible { outline: 3px solid var(--bronze); outline-offset: 2px; }
.sophia-resposta { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow: auto; margin: 0 0 10px; font-size: 13.5px; }
.sophia-resposta .pergunte-msg { max-width: 92%; }
.sophia-cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sophia-cartoes .sophia-cartao:only-child { grid-column: 1 / -1; }
.sophia-cartao { padding: 12px; gap: 10px; }
.sophia-cartao span { flex: 1; min-width: 0; }
.sophia-seta { flex: none; width: 8px; height: 8px; border: solid var(--vinho); border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-right: 4px; }
.sophia-faq { border-top: 1px solid var(--borda); padding-top: 10px; margin-top: 2px; }
.sophia-faq-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sophia-faq-topo h2 { margin: 0; font: 600 12px var(--fonte); letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); }
.sophia-ver-todas { border: 0; background: none; color: var(--vinho); font: 600 13px var(--fonte); cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.sophia-ver-todas::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border: solid var(--vinho); border-width: 0 2px 2px 0;
    transform: rotate(-45deg) translateY(-1px); }
.sophia-ver-todas:hover, .sophia-ver-todas:focus-visible { background: var(--creme); outline: none; text-decoration: underline; }
#sophia-sugestoes-faq { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
#sophia-sugestoes-faq .sophia-vazio { padding: 10px 12px; margin: 0; }
.sophia-faq-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--borda);
    background: var(--branco); color: var(--texto); font: 400 13.5px var(--fonte); cursor: pointer; }
.sophia-faq-item:last-child { border-bottom: 0; }
.sophia-faq-item span { flex: 1; }
.sophia-faq-item svg { width: 22px; height: 22px; flex: none; stroke: var(--vinho); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sophia-faq-item:hover, .sophia-faq-item:focus-visible { background: var(--creme); outline: none; }
.sophia-faq-item:focus-visible { box-shadow: inset 0 0 0 2px var(--vinho); }
.sophia-suporte { border: 1px solid var(--borda); border-radius: 12px; background: var(--creme); margin-top: 2px; }
.sophia-suporte > summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; border-radius: 12px; }
.sophia-suporte > summary::-webkit-details-marker { display: none; }
.sophia-suporte > summary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--vinho); }
.sophia-suporte > summary svg { width: 26px; height: 26px; flex: none; stroke: var(--vinho); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sophia-suporte > summary span { flex: 1; display: flex; flex-direction: column; }
.sophia-suporte > summary b { font-size: 14px; color: var(--vinho); }
.sophia-suporte > summary small { font-size: 12.5px; color: var(--cinza); }
.sophia-suporte > summary .sophia-seta { transform: rotate(45deg); transition: transform .15s; }
.sophia-suporte[open] > summary .sophia-seta { transform: rotate(-135deg); }
.sophia-suporte-itens { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }
.sophia-suporte-itens .sophia-entrada { background: var(--branco); padding: 10px 12px; }
@media (max-width: 480px) { .sophia-cartoes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sophia-suporte > summary .sophia-seta { transition: none; } }
html.com-sophia-bola body { padding-bottom: 100px; }   /* o fim da página rola para além da bola: ela nunca cobre o último botão */
.com-sophia-bola .pergunte { top: auto; bottom: 92px; max-height: calc(100vh - 120px); }
.sophia-esquerda .pergunte { right: auto; left: 18px; }
.explica-convite.na-bola::before { top: auto; bottom: -7px; transform: rotate(225deg); }
html.sophia-aberta .explica-convite.na-bola { display: none; }   /* EV-0137: com o balão aberto, o convite não o cobre */
@media (max-width: 600px) { .sophia-porta { right: 12px; bottom: 12px; } .sophia-porta.esquerda { left: 12px; } }
@media print { .sophia-porta, .explica-convite.na-bola { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .sophia-bola .ath-assistente, .sophia-bola .ath-assistente * { animation: none !important; transition: none !important; } }
/* EV-0101: com a bola, uma Sophia só por tela — o rosto dela sai do conteúdo (briefing do dia, análises, alertas, revisão, a fala
   da Alexandria); o texto fica. As caixas que a própria bola abre (Pergunte, apresentação, guia) ficam fora do main. */
body:has(#sophia-porta) main .ath-assistente,
body:has(#sophia-porta) main .ath-cartao.assistente > img,
body:has(#sophia-porta) main .fala > img { display: none !important; }

/* EV-0114: o selo medido / estimado (também fora da saúde do processo) */
.selo-medido, .selo-estimado { font-size: 11px; border-radius: 999px; padding: 0 7px; border: 1px solid var(--borda, #e4d9cf); }
.selo-medido { color: #2f6b3a; border-color: #9cc5a4; }
.selo-estimado { color: #9a5b00; border-color: #e6c48a; }
/* EV-0107: "De onde veio este número?" — o número com explicação ganha o clique; a caixa da Sophia com a conta */
.numero-explicavel { cursor: help; text-decoration: underline dotted var(--bronze); text-underline-offset: 3px; }
.numero-explicavel:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; border-radius: 4px; }
.numero-explica { position: absolute; z-index: 1200; background: var(--branco, #fff); color: var(--grafite, #2E2A28); border: 1px solid var(--borda, #e4d9cf);
    border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 12px 14px; font-size: 13.5px; line-height: 1.45; }
.numero-explica .ne-topo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--vinho); margin-bottom: 6px; }
.numero-explica .ne-topo img { width: 26px; height: 26px; border-radius: 50%; }
.numero-explica .ne-fechar { margin-left: auto; border: 0; background: none; font-size: 18px; cursor: pointer; color: inherit; }
.numero-explica .ne-titulo { margin: 0 0 6px; }
.numero-explica .ne-estimado { margin-left: 8px; font-size: 11px; border-radius: 999px; padding: 0 7px; border: 1px solid #e6c48a; color: #9a5b00; }
.numero-explica .ne-conta { margin: 0 0 6px; padding-left: 18px; }
.numero-explica .ne-linha { margin: 2px 0; color: var(--texto-suave, #6b625d); }
.numero-explica .ne-premissa { color: #9a5b00; }
.numero-explica .ne-ver { margin-top: 8px; display: inline-block; }
/* EV-0109: a nota de uso do cliente na resposta do Pergunte */
.pergunte-nota { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: #fff4dc; border: 1px solid #f0d9a0; }
.pergunte-nota small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #8a5a00; font-weight: 700; }
.pergunte-nota b { display: block; color: var(--vinho); margin: 2px 0; }
.pergunte-nota p { margin: 0; white-space: pre-line; }
/* Os cartões em grade com uma coluna estreita para o rosto (briefing do dia, a leitura do painel, da análise e da simulação, os
   alertas): sem o rosto, o texto cairia nessa coluna, uma palavra por linha — fica com a largura toda (o RostoEscondidoTest
   procura cartões novos com o mesmo jeito). */
body:has(#sophia-porta) main :is(.ath-cartao.sophia, .ath-cartao.leitura, .ath-cartao.assistente) { grid-template-columns: minmax(0, 1fr); }

/* EV-0106: "Prepare para mim, que eu confiro" — o aviso do rascunho e a origem de cada valor, logo abaixo do campo */
.preparo-aviso { border-left: 4px solid var(--bronze); margin-bottom: 14px; }
.preparo-aviso p { margin: 0 0 6px; }
.preparo-sem-fonte { color: var(--texto-suave, #6b625d); font-size: .9em; }
.preparo-origem { display: block; margin-top: 3px; font-size: .78rem; color: var(--vinho); }
.preparo-origem::before { content: "↳ "; }
.preparo-origem.vazio { color: var(--texto-suave, #6b625d); font-style: italic; }
.preparo-origem.corrigido { color: var(--grafite); font-style: italic; }
.preparo-origem.anterior { color: #8a5a00; font-weight: 600; }
.preparo-conf-valor { margin: 12px 0 2px; font-size: 15px; font-weight: 600; color: var(--grafite); white-space: pre-wrap; word-break: break-word; }
.preparo-conf-origem { margin: 0 0 12px; font-size: 13px; color: var(--vinho); }
.preparo-conf-origem::before { content: "↳ "; }

/* EV-0124: dado pessoal mascarado na ficha ("Mostrar" busca o valor e fica na auditoria) e os que a pessoa não pode ver */
.dado-pessoal { display: flex; gap: 8px; align-items: center; }
.dado-pessoal .ath-entrada { flex: 1; }
.dado-pessoal .dp-mostrar { white-space: nowrap; text-decoration: none; }
.dados-sem-acesso { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; }
.dados-sem-acesso .ajuda { grid-column: 1 / -1; }