/* 1. @font-face */
@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* 2. Tokens (:root) */
:root {
    color-scheme: dark;
    --fundo: #434343;
    --superficie: #1A1C1F;
    --superficie-alta: #1E2023;
    --superficie-topo: #282A2D;
    --superficie-campo: #111316;

    --texto: #E2E2E6;
    --texto-medio: #BACCB0;
    --texto-fraco: #8A9384;

    --contorno: #3C4B35;
    --contorno-sutil: rgba(255, 255, 255, 0.08);

    --energizado: #4fa601;
    --energizado-fraco: #2AE500;
    --informacao: #4CD6FB;
    --atencao: #FFB784;
    --alarme: #FFB4AB;
    --alarme-fundo: #93000A;

    --sobre-energizado: #053900;

    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 24px;
    --esp-6: 32px;
    --esp-7: 40px;
    --esp-8: 48px;

    --gutter-desktop: 24px;
    --margem-desktop: 40px;
    --gutter-mobile: 16px;
    --margem-mobile: 20px;

    --largura-max: 1440px;

    --raio: 4px;
    --raio-pilula: 9999px;

    --fonte-display: 'Geist', sans-serif;
    --fonte-corpo: 'Inter', sans-serif;
    --fonte-dado: 'JetBrains Mono', monospace;
}

/* 3. Reset enxuto */
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
html, body {
    height: 100%;
    overflow: hidden;
}
body {
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
    color: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* 4. Base */
html {
    background-color: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte-corpo);
    font-size: 16px;
}
body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-display);
    line-height: 1.15;
    margin-block-end: var(--esp-4);
}
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

a {
    color: var(--informacao);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Foco global de teclado */
:focus-visible {
    outline: 2px solid var(--informacao);
    outline-offset: 2px;
}

.icone {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--fundo);
}
::-webkit-scrollbar-thumb {
    background: var(--superficie-topo);
    border-radius: var(--raio-pilula);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--contorno);
}

/* Para Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--superficie-topo) var(--fundo);
}

/* 5. Layout */
.app {
    display: flex;
    flex: 1;
    height: 100vh;
    overflow: hidden;
}

.menu-lateral {
    width: 280px;
    background-color: var(--superficie-campo);
    border-right: 1px solid var(--contorno-sutil);
    display: flex;
    flex-direction: column;
    padding: var(--esp-5) var(--esp-4);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    box-shadow: 1px 0 20px rgba(0, 0, 0, 0.2);
}

.menu-lateral .logo {
    margin-block-end: var(--esp-7);
    color: var(--texto);
    padding-inline: var(--esp-3);
}

.menu-lateral nav {
    display: flex;
    flex-direction: column;
    gap: var(--esp-1);
    flex: 1;
}

.menu-lateral form {
    margin-top: auto;
}

.menu-lateral form button {
    width: 100%;
    border: none;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-3);
    color: var(--texto-medio);
    border-radius: var(--raio);
    text-decoration: none;
    font-weight: 500;
    transition: all 150ms ease;
    border-left: 3px solid transparent;
}

.menu-item:hover {
    background-color: #318844;
    color: #ffffff;
    text-decoration: none;
}

.menu-item.ativo {
    background-color: var(--energizado);
    color: #ffffff;
    border-left-color: var(--energizado);
}

.conteudo {
    flex: 1;
    overflow-y: auto;
    padding: var(--margem-desktop);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.container {
    max-width: var(--largura-max);
    width: 100%;
    margin: 0 auto;
}

/* 6. Componentes */

/* Botões */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    min-height: 44px;
    padding: 0 var(--esp-4);
    border-radius: var(--raio);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms, box-shadow 120ms, transform 120ms;
    border: 1px solid transparent;
}
.botao:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.botao--primario {
    background-color: var(--energizado);
    color: #ffffff;
}
.botao--primario:hover:not(:disabled) {
    background-color: #318844;
    box-shadow: 0 0 12px rgba(79, 166, 1, 0.4);
    transform: translateY(-1px);
}

.botao--secundario {
    background-color: transparent;
    color: var(--energizado);
    border-color: var(--energizado);
}
.botao--secundario:hover:not(:disabled) {
    background-color: rgba(57, 255, 20, 0.1);
}

.botao--terciario {
    background-color: transparent;
    color: var(--informacao);
    padding: 0 var(--esp-2);
}
.botao--terciario:hover:not(:disabled) {
    background-color: rgba(76, 214, 251, 0.1);
}

.botao--perigo {
    background-color: transparent;
    color: var(--alarme);
    border-color: var(--alarme);
}
.botao--perigo:hover:not(:disabled) {
    background-color: var(--alarme-fundo);
    color: var(--texto);
}

/* Campos de formulário */
.campo-grupo {
    margin-block-end: var(--esp-4);
    display: flex;
    flex-direction: column;
    gap: var(--esp-1);
}
.campo-grupo label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--texto-medio);
}
.campo {
    background-color: var(--superficie-campo);
    border: 1px solid var(--contorno);
    border-radius: var(--raio);
    min-height: 44px;
    padding: var(--esp-2) var(--esp-3);
    transition: border-color 120ms, box-shadow 120ms;
}
.campo:focus {
    outline: none;
    border-color: var(--energizado);
    box-shadow: 0 0 0 1px var(--energizado);
}
.campo--periodo { border: none !important; box-shadow: none !important; background: transparent; flex: 1; min-height: 42px; }
.campo-periodo-wrapper:focus-within { border-color: var(--energizado); box-shadow: 0 0 0 1px var(--energizado); }
.campo::placeholder {
    color: var(--texto-fraco);
}
.campo.com-erro {
    border-color: var(--alarme);
}
.campo.com-erro:focus {
    box-shadow: 0 0 0 1px var(--alarme);
}
.campo-erro-texto {
    color: var(--alarme);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: var(--esp-1);
    margin-block-start: var(--esp-1);
}
.campo-erro-texto .icone {
    width: 16px;
    height: 16px;
}

/* Cartões */
.cartao {
    background-color: var(--superficie);
    border: 1px solid #111;
    border-radius: 0;
    padding: var(--esp-5);
    margin-block-end: var(--esp-4);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.cartao-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-block-end: var(--esp-4);
}
.cartao-cabecalho h2, .cartao-cabecalho h3 {
    margin-block-end: 0;
}
.painel-titulo {
    margin-block-end: 0;
}
.painel-cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--esp-4);
    margin-block-end: var(--esp-6);
}
.painel-subtitulo,
.painel-secao-descricao {
    color: var(--texto-medio);
}
.painel-subtitulo {
    margin-block-start: var(--esp-2);
}
.painel-periodo,
.painel-secao-resumo {
    color: var(--texto-fraco);
    font-size: 0.75rem;
    white-space: nowrap;
}
.indicadores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--esp-4);
    margin-block-end: var(--esp-6);
}
.indicador {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    min-height: 188px;
    margin-block-end: 0;
    text-decoration: none;
    transition: background-color 160ms, border-color 160ms, box-shadow 160ms;
}
.indicador:hover {
    background-color: var(--superficie-alta);
    border-color: var(--contorno);
    text-decoration: none;
}
.indicador--ativo {
    box-shadow: inset 0 0 0 1px var(--informacao);
}
.indicador-titulo {
    margin: 0;
    color: var(--texto-medio);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.indicador-icone {
    color: var(--texto-medio);
}
.indicador-valor {
    margin-block-start: auto;
    color: var(--texto);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
}
.indicador--atencao {
    border-color: var(--atencao);
    background-color: var(--superficie-alta);
}
.indicador--atencao .indicador-titulo,
.indicador--atencao .indicador-icone,
.indicador--atencao .indicador-valor {
    color: var(--atencao);
}
.indicador-contexto {
    color: var(--texto-medio);
    font-size: 0.875rem;
}
.indicador-acao {
    color: var(--informacao);
    font-size: 0.8125rem;
    font-weight: 600;
}
.cartao-titulo {
    margin-block-end: var(--esp-4);
}
.painel-secao-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--esp-4);
    margin-block-end: var(--esp-4);
}
.painel-secao-cabecalho .cartao-titulo,
.progresso-cabecalho .cartao-titulo {
    margin-block-end: var(--esp-4);
}
.painel-secao-descricao {
    max-width: 68ch;
    font-size: 0.875rem;
}
.cabecalho-data {
    display: block;
    margin-block-start: var(--esp-1);
    color: var(--texto-fraco);
    font-size: 0.75rem;
}
.tabela-atividade-recente th,
.tabela-atividade-recente td {
    vertical-align: middle;
}
.tabela-atividade-recente th {
    white-space: nowrap;
}
.tabela-numero--destaque,
.tabela-total {
    color: var(--texto);
    font-weight: 600;
}
.atividade-recente-titulo,
.atividade-recente-data {
    display: block;
}
.atividade-recente-titulo {
    color: var(--texto);
    font-size: 0.875rem;
}
.atividade-recente-data {
    margin-block-start: var(--esp-1);
    color: var(--texto-fraco);
    font-size: 0.75rem;
}
.tabela-acao {
    text-align: right;
    white-space: nowrap;
}
.link-detalhe {
    color: var(--informacao);
    font-size: 0.8125rem;
    font-weight: 600;
}
.texto-fraco {
    color: var(--texto-fraco);
}
.recorte-ativo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    padding: var(--esp-3) var(--esp-4);
    margin-block-end: var(--esp-4);
    background-color: var(--superficie-alta);
    border-inline-start: 4px solid var(--informacao);
    color: var(--texto-medio);
    font-size: 0.875rem;
}
.grafico-30dias {
    height: 250px;
    position: relative;
    margin-block-end: var(--esp-2);
}
.progresso-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--esp-3);
    margin-block-end: var(--esp-4);
}
.progresso-cabecalho .cartao-titulo {
    margin-block-end: var(--esp-4);
}
.filtro-situacao {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
}
.filtro-situacao label {
    color: var(--texto-medio);
    font-size: 0.8125rem;
}
.filtro-situacao .campo {
    min-width: 180px;
    padding: var(--esp-2) var(--esp-3);
    font-size: 0.8125rem;
}
.tabela-numero {
    text-align: center;
}
.tabela-vazia {
    text-align: center;
}
.selo--inativo {
    margin-inline-start: var(--esp-2);
}
.selo--sem-atividade {
    border: 1px solid var(--contorno);
}

/* Selos */
.selo {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    padding: 2px var(--esp-3);
    border-radius: var(--raio-pilula);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: max-content;
}
.selo::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.selo--sucesso {
    background-color: rgba(57, 255, 20, 0.1);
    color: var(--energizado);
}
.selo--sucesso::before { background-color: var(--energizado); }

.selo--atencao {
    background-color: rgba(255, 183, 132, 0.1);
    color: var(--atencao);
}
.selo--atencao::before { background-color: var(--atencao); }

.selo--erro {
    background-color: rgba(255, 180, 171, 0.1);
    color: var(--alarme);
}
.selo--erro::before { background-color: var(--alarme); }

/* Alertas */
.alerta {
    padding: var(--esp-3) var(--esp-4);
    border-radius: var(--raio);
    margin-block-end: var(--esp-4);
    display: flex;
    gap: var(--esp-3);
    align-items: flex-start;
    background-color: var(--superficie-alta);
    border: 1px solid var(--contorno-sutil);
}
.alerta--erro {
    border-left: 4px solid var(--alarme);
}
.alerta--sucesso {
    border-left: 4px solid var(--energizado);
}
.alerta-icone {
    flex-shrink: 0;
}
.alerta--erro .alerta-icone { color: var(--alarme); }
.alerta--sucesso .alerta-icone { color: var(--energizado); }
.resultado-objetivo--errada .alerta-icone,
.resultado-objetivo--errada .icone { color: var(--alarme); }
.resultado-objetivo--correta .alerta-icone,
.resultado-objetivo--correta .icone { color: var(--energizado); }
.alerta-conteudo { flex: 1; }

/* Tabela */
.tabela-wrapper {
    overflow-x: auto;
    border: 1px solid var(--contorno-sutil);
    border-radius: var(--raio);
    background-color: var(--superficie);
}
.tabela {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.tabela th, .tabela td {
    padding: var(--esp-3) var(--esp-4);
    border-bottom: 1px solid var(--contorno-sutil);
}
.tabela th {
    font-weight: 500;
    color: var(--texto-medio);
    font-size: 0.875rem;
    background-color: var(--superficie-alta);
    z-index: 10;
}
.tabela tbody tr:last-child td {
    border-bottom: none;
}
.tabela tbody tr:hover {
    background-color: var(--superficie-alta);
}

/* Crachá (Identificador) */
.cracha {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    background-color: var(--superficie-campo);
    border: 1px solid var(--contorno);
    padding: var(--esp-1) var(--esp-3);
    border-radius: var(--raio);
    font-family: var(--fonte-dado);
}
.cracha-escala {
    color: var(--informacao);
    font-weight: 700;
}

/* Modal e Painel de Ajuda */
.modal {
    margin: auto;
    background-color: var(--superficie-topo);
    color: var(--texto);
    border: 1px solid var(--contorno);
    border-radius: var(--raio);
    padding: var(--esp-5);
    max-width: 600px;
    width: 100%;
}
.modal::backdrop {
    background-color: rgba(17, 19, 22, 0.8);
}

.modal-exclusao {
    max-width: 600px;
}
.modal-titulo-perigo {
    color: var(--alarme);
    margin-block-end: var(--esp-4);
}
.modal-titulo-atencao {
    color: var(--atencao);
    margin-block-end: var(--esp-4);
}
.modal-exclusao-texto {
    margin-block-end: var(--esp-4);
}
.modal-exclusao-item {
    color: var(--texto);
}
.modal-exclusao-aviso {
    background-color: var(--superficie-campo);
    border-inline-start: var(--esp-1) solid var(--alarme);
    margin-block-end: var(--esp-5);
    padding: var(--esp-3);
}
.modal-exclusao-bloqueio {
    background-color: var(--superficie-campo);
    border-inline-start: var(--esp-1) solid var(--atencao);
    margin-block-end: var(--esp-5);
    padding: var(--esp-3);
}

.painel-ajuda {
    width: 320px;
    background-color: var(--superficie-alta);
    border-left: 1px solid var(--contorno-sutil);
    padding: var(--esp-4);
    overflow-y: auto;
}

/* O Unifilar de Progresso */
.unifilar-wrapper {
    margin-block-end: var(--esp-6);
    overflow-x: auto;
    padding-block: var(--esp-2);
}
.unifilar {
    display: flex;
    align-items: center;
    min-width: max-content;
}
.unifilar-linha {
    height: 2px;
    background-color: var(--contorno);
    flex-grow: 1;
    min-width: 30px;
}
.unifilar-linha.tracejado {
    background-color: transparent;
    border-top: 2px dashed var(--contorno);
}
.unifilar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-1);
    position: relative;
    z-index: 2;
}
.unifilar-chave {
    width: 24px;
    height: 16px;
    border: 2px solid var(--contorno);
    background-color: var(--fundo);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 200ms, border-color 200ms;
}
.unifilar-item.respondido .unifilar-chave {
    background-color: var(--energizado);
    border-color: var(--energizado);
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
}
.unifilar-item.atual .unifilar-chave {
    border-color: var(--informacao);
}
.unifilar-item.atual .unifilar-chave::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: var(--informacao);
    animation: pulsar 2s infinite ease-in-out;
}
.unifilar-item.refazer .unifilar-chave {
    background-color: var(--alarme-fundo);
    border-color: var(--alarme-fundo);
}
.unifilar-rotulo {
    font-family: var(--fonte-dado);
    font-size: 0.75rem;
    color: var(--texto-medio);
}
.unifilar-item.atual .unifilar-rotulo {
    color: var(--texto);
    font-weight: 700;
}
.unifilar-item.aguardando .unifilar-rotulo {
    color: var(--atencao);
}

@keyframes pulsar {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* 7. Telas específicas */
.tela-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--esp-4);
}
.tela-login .cartao {
    background-color: var(--superficie);
    border: 1px solid #111;
    border-radius: 0;
    padding: var(--esp-5);
    margin-block-end: var(--esp-4);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.tela-executar {
    max-width: 880px;
    margin: 0 auto;
}
.tela-painel {
    /* Ajustes específicos do painel */
}

/* Editor de atividades */
.editor-cabecalho {
    gap: var(--esp-5);
    margin-block-end: var(--esp-5);
}
.editor-cabecalho > div {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    flex-wrap: wrap;
}
.editor-descricao,
.editor-enunciado-questao {
    color: var(--texto-medio);
    margin-block-end: var(--esp-4);
}
.editor-questao {
    border-inline-start: 3px solid var(--contorno);
}
.editor-form-questao {
    background-color: var(--superficie-alta);
    border: 1px solid var(--contorno-sutil);
    padding: var(--esp-4);
    margin-block-end: var(--esp-4);
}
.editor-lista-itens {
    display: grid;
    gap: var(--esp-2);
    margin-block: var(--esp-4);
}
.editor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    background-color: var(--superficie-alta);
    border: 1px solid var(--contorno-sutil);
    padding: var(--esp-3) var(--esp-4);
}
.editor-item--inativo {
    opacity: 0.68;
    border-style: dashed;
}
.editor-item-conteudo {
    min-width: 0;
}
.editor-item-titulo {
    color: var(--texto);
}
.editor-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2) var(--esp-3);
    margin-block-start: var(--esp-2);
    color: var(--texto-fraco);
    font-size: 0.75rem;
}
.editor-item-meta > span:not(.selo)::before {
    content: '·';
    color: var(--contorno);
    margin-inline-end: var(--esp-2);
}
.acoes-editor {
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.botao--icone {
    width: 44px;
    padding-inline: 0;
}
.acao-bloqueada {
    display: inline-flex;
    cursor: help;
}
.campo--curto {
    max-width: 180px;
}
.campo--medio {
    max-width: 420px;
}

/* Formulário do item */
.abas {
    display: flex;
    gap: var(--esp-2);
    padding-block-end: var(--esp-4);
    margin-block-end: var(--esp-5);
    border-bottom: 1px solid var(--contorno-sutil);
}
.campo-ajuda {
    color: var(--texto-fraco);
    font-size: 0.75rem;
}
.configuracao-chaves {
    background: linear-gradient(135deg, rgba(76, 214, 251, 0.07), transparent 58%);
    border: 1px solid rgba(76, 214, 251, 0.35);
    padding: var(--esp-4);
    margin-block-end: var(--esp-5);
}
.configuracao-chaves-cabecalho,
.selecao-chaves-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--esp-4);
    margin-block-end: var(--esp-4);
}
.configuracao-chaves-cabecalho p,
.selecao-chaves-cabecalho p {
    color: var(--texto-medio);
    font-size: 0.875rem;
    margin-block-start: var(--esp-1);
}
.chaves-confirmadas {
    margin-block-start: var(--esp-4);
    padding-block-start: var(--esp-4);
    border-top: 1px solid var(--contorno-sutil);
}
.lista-chaves-confirmadas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
    margin-block-start: var(--esp-2);
}
.chave-confirmada {
    background-color: var(--superficie-campo);
    border: 1px solid var(--contorno);
    border-radius: var(--raio);
    padding: var(--esp-1) var(--esp-2);
    color: var(--texto-medio);
}
.grupo-opcoes-item {
    border: 1px solid var(--contorno-sutil);
    padding: var(--esp-4);
    display: grid;
    gap: var(--esp-3);
    margin-block-end: var(--esp-4);
}
.grupo-opcoes-item legend,
.campo-sem-borda legend {
    color: var(--texto-medio);
    font-size: 0.875rem;
    font-weight: 600;
    padding-inline: var(--esp-1);
}
.controle-check {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    cursor: pointer;
}
.controle-check--recuado {
    margin-inline-start: var(--esp-5);
}
.configuracao-encerramento {
    background-color: rgba(255, 183, 132, 0.06);
    border-inline-start: 3px solid var(--atencao);
    padding: var(--esp-3) var(--esp-4);
}
.formulario-acoes {
    margin-block-start: var(--esp-5);
    padding-block-start: var(--esp-4);
    border-top: 1px solid var(--contorno-sutil);
}

/* Tela Atividade Concluida */
.concluida-cartao {
    max-width: 68ch;
    margin: var(--esp-8) auto;
    padding: var(--esp-6);
}
.concluida-cabecalho {
    text-align: center;
    border-bottom: 2px solid var(--energizado);
    padding-block-end: var(--esp-4);
    margin-block-end: var(--esp-6);
}
.concluida-cabecalho h2 {
    margin: 0;
    color: var(--energizado);
}
.concluida-dados {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-3) var(--esp-5);
    background-color: var(--superficie-campo);
    padding: var(--esp-5);
    border-radius: var(--raio);
    margin-block-end: var(--esp-6);
}
.concluida-campo {
    display: flex;
    flex-direction: column;
    gap: var(--esp-1);
}
.concluida-campo dt {
    font-family: var(--fonte-corpo);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--texto-fraco);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.concluida-campo dd {
    margin: 0;
    color: var(--texto);
}
.concluida-aviso {
    text-align: center;
    margin-block-end: var(--esp-6);
}
.concluida-acoes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--esp-3);
    padding-block-start: var(--esp-4);
    border-top: 1px solid var(--contorno-sutil);
    flex-wrap: wrap;
}
.resultado-objetivas {
    border-inline-start: 3px solid var(--energizado);
    background-color: rgba(57, 255, 20, 0.06);
    padding: var(--esp-4) var(--esp-5);
    margin-block-end: var(--esp-5);
}
.resultado-objetivas h3 {
    margin-block-end: var(--esp-2);
}
.resultado-objetivas p {
    margin-block-end: var(--esp-2);
}
.resultado-objetivas p:last-child {
    margin-block-end: 0;
}
.pendencias-refazer {
    display: grid;
    gap: var(--esp-2);
    margin-block-start: var(--esp-3);
}
.pendencia-refazer {
    border-inline-start: 2px solid var(--alarme);
    padding-inline-start: var(--esp-3);
    color: var(--texto-medio);
}
.pendencia-refazer p,
.pendencia-refazer span {
    display: block;
    margin-block-start: var(--esp-1);
    font-size: 0.875rem;
}
.pendencia-refazer strong {
    color: var(--alarme);
}
.painel-filtro-revisao {
    padding-block: var(--esp-4);
}
.revisao-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    align-items: start;
    gap: var(--esp-5);
}
.painel-filtro-revisao {
    position: sticky;
    inset-block-start: var(--esp-4);
}
.painel-filtro-revisao .botao {
    width: 100%;
}
.painel-filtro-revisao .link-detalhe {
    display: inline-block;
    margin-block-start: var(--esp-4);
}
.revisao-conteudo {
    min-width: 0;
}
.fila-revisao-item {
    padding: 0;
    overflow: hidden;
}
.fila-revisao-resumo {
    display: grid;
    grid-template-columns: minmax(130px, 0.7fr) minmax(220px, 1.5fr) auto;
    align-items: center;
    gap: var(--esp-4);
    padding: var(--esp-4) var(--esp-5);
    cursor: pointer;
    list-style: none;
}
.fila-revisao-resumo::-webkit-details-marker { display: none; }
.fila-revisao-resumo::after {
    content: '+';
    color: var(--informacao);
    font-family: var(--fonte-dado);
    font-size: 1.25rem;
}
.fila-revisao-item[open] .fila-revisao-resumo::after { content: '-'; }
.fila-revisao-detalhe {
    border-top: 1px solid var(--contorno-sutil);
    padding: var(--esp-5);
}
@media (max-width: 760px) {
    .revisao-layout {
        grid-template-columns: 1fr;
    }
    .painel-filtro-revisao {
        position: static;
    }
}
.formulario-remover-imagem {
    margin-block-start: var(--esp-4);
}
.separador-formulario {
    border-top: 1px solid var(--contorno-sutil);
    margin-block: var(--esp-5);
}

/* Execução da atividade */
.execucao-cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--esp-5);
    margin-block-end: var(--esp-4);
}
.execucao-sobretitulo {
    color: var(--informacao);
    font-family: var(--fonte-dado);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.execucao-progresso {
    color: var(--texto-medio);
    font-size: 0.75rem;
    white-space: nowrap;
}
.unifilar-link {
    color: inherit;
    display: contents;
    text-decoration: none;
}
.unifilar-link:hover {
    text-decoration: none;
}
.unifilar-link--bloqueado {
    cursor: not-allowed;
}
.unifilar-item.rascunho .unifilar-chave {
    background-color: var(--contorno);
    border-color: var(--contorno);
}
.execucao-cartao {
    padding: 0;
    overflow: hidden;
}
.execucao-questao-cabecalho {
    align-items: center;
    background-color: var(--superficie-alta);
    border-bottom: 1px solid var(--contorno-sutil);
    padding: var(--esp-4) var(--esp-5);
    margin: 0;
}
.execucao-enunciado-questao,
.execucao-item,
#formResposta {
    padding-inline: var(--esp-5);
}
.execucao-enunciado-questao {
    padding-block: var(--esp-4);
    background-color: rgba(255, 255, 255, 0.018);
    border-bottom: 1px solid var(--contorno-sutil);
    color: var(--texto-medio);
}
.execucao-item {
    padding-block: var(--esp-5) var(--esp-3);
}
.execucao-item-enunciado {
    font-size: 1.05rem;
    margin-block-end: var(--esp-3);
}
.execucao-resposta {
    margin-block: var(--esp-3) var(--esp-5);
}
.campo-sem-borda {
    border: 0;
    padding: 0;
    min-width: 0;
}
.opcoes-resposta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
    margin-block-start: var(--esp-2);
}
.opcoes-resposta--coluna {
    flex-direction: column;
    align-items: stretch;
}
.opcao-resposta {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    background-color: var(--superficie-campo);
    border: 1px solid var(--contorno-sutil);
    padding: var(--esp-3);
    cursor: pointer;
}
.opcao-resposta:has(input:checked) {
    border-color: var(--informacao);
    background-color: rgba(76, 214, 251, 0.07);
}
.etiqueta {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border: 1px solid var(--contorno);
    border-radius: var(--raio-pilula);
    padding-inline: var(--esp-2);
    color: var(--texto-medio);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.etiqueta--informacao {
    border-color: rgba(76, 214, 251, 0.45);
    color: var(--informacao);
}
.etiqueta--pendente,
.etiqueta--aprovada {
    border-color: rgba(57, 255, 20, 0.35);
    color: var(--energizado);
}
.etiqueta--refazer {
    border-color: rgba(255, 180, 171, 0.45);
    color: var(--alarme);
}
.selecao-chaves {
    background: linear-gradient(135deg, rgba(76, 214, 251, 0.08), rgba(12, 14, 17, 0.4));
    border: 1px solid rgba(76, 214, 251, 0.38);
    padding: var(--esp-4);
}
.grade-chaves {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--esp-2);
}
.opcao-chave {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    background-color: var(--superficie-campo);
    border: 1px solid var(--contorno);
    padding: var(--esp-3);
    cursor: pointer;
    transition: border-color 120ms, background-color 120ms, transform 120ms;
}
.opcao-chave:hover {
    border-color: var(--informacao);
    transform: translateY(-1px);
}
.opcao-chave:has(input:checked) {
    border-color: var(--energizado);
    background-color: rgba(57, 255, 20, 0.08);
    box-shadow: inset 3px 0 0 var(--energizado);
}
.opcao-chave input {
    margin-inline-end: var(--esp-2);
    accent-color: var(--energizado);
}
.estado-vazio-chaves {
    border: 1px dashed var(--contorno);
    padding: var(--esp-4);
    text-align: center;
    color: var(--texto-fraco);
}
.selecao-chaves-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    margin-block-start: var(--esp-4);
    padding-block-start: var(--esp-3);
    border-top: 1px solid var(--contorno-sutil);
}
.reserva-confirmada {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    background-color: rgba(57, 255, 20, 0.07);
    border: 1px solid rgba(57, 255, 20, 0.4);
    padding: var(--esp-4);
}
.reserva-confirmada-icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background-color: var(--energizado);
    color: var(--sobre-energizado);
    border-radius: 50%;
}
.reserva-confirmada-rotulo {
    display: block;
    color: var(--texto-medio);
    font-size: 0.75rem;
}
.reserva-confirmada strong {
    display: block;
    color: var(--energizado);
    font-size: 1.25rem;
}
.reserva-confirmada p {
    color: var(--texto-fraco);
    font-size: 0.75rem;
}
.execucao-anexos {
    margin-block: var(--esp-4);
}
.execucao-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    padding-block: var(--esp-4) var(--esp-5);
    border-top: 1px solid var(--contorno-sutil);
}
.execucao-acoes-principais,
.modal-acoes,
.modal-cabecalho {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
}
.modal-acoes {
    justify-content: flex-end;
    margin-block-start: var(--esp-5);
}
.modal-cabecalho {
    justify-content: space-between;
    padding-block-end: var(--esp-3);
    border-bottom: 1px solid var(--contorno-sutil);
}
.modal-cabecalho h4 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--esp-2);
}
.modal-conteudo {
    padding-block-start: var(--esp-4);
}
.modal-ajuda {
    max-width: 800px;
    width: min(90vw, 800px);
}
.modal-confirmacao {
    max-width: 560px;
}
.modal-confirmacao h3 {
    margin-block-end: var(--esp-3);
}
.modal-sinal {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background-color: rgba(76, 214, 251, 0.1);
    color: var(--informacao);
    margin-block-end: var(--esp-3);
}
.imagem-ajuda {
    width: 100%;
    height: auto;
    border-radius: var(--raio);
}

/* Catálogo de atividades */
.atividades-cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--esp-5);
    margin-block-end: var(--esp-5);
}
.atividades-cabecalho-conteudo {
    max-width: 680px;
}
.atividades-cabecalho h2 {
    margin-block: var(--esp-1) 0;
}
.atividades-contexto {
    color: var(--energizado);
    font-family: var(--fonte-dado);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.atividades-subtitulo {
    color: var(--texto-medio);
    margin-block-start: var(--esp-2);
}
.atividades-alerta {
    margin-block-end: var(--esp-5);
}
.atividades-filtros {
    overflow: hidden;
    margin-block-end: var(--esp-6);
    background-color: var(--superficie);
    border: 1px solid var(--contorno-sutil);
    border-radius: var(--raio);
}
.atividades-filtros-cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--esp-5);
    padding: var(--esp-4) var(--esp-5);
    border-bottom: 1px solid var(--contorno-sutil);
}
.atividades-filtros-cabecalho h3 {
    margin-block-start: var(--esp-1);
}
.atividades-filtros-cabecalho p {
    max-width: 54ch;
    color: var(--texto-fraco);
    font-size: 0.8125rem;
    text-align: right;
}
.atividades-secao-rotulo {
    color: var(--texto-medio);
    font-family: var(--fonte-dado);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.atividades-resumo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--esp-3);
    padding: var(--esp-4);
}
.atividade-resumo {
    position: relative;
    min-width: 0;
    padding: var(--esp-4);
    color: inherit;
    background-color: var(--superficie-alta);
    border: 1px solid var(--contorno-sutil);
    border-radius: var(--raio);
    text-decoration: none;
    transition: background-color 120ms, border-color 120ms, box-shadow 120ms, transform 120ms;
}
.atividade-resumo:hover {
    background-color: var(--superficie-topo);
    border-color: var(--contorno);
    transform: translateY(-1px);
}
.atividade-resumo:focus-visible {
    outline: 2px solid var(--energizado);
    outline-offset: 2px;
}
.atividade-resumo--ativo {
    background-color: rgba(57, 255, 20, 0.04);
    border-color: var(--energizado);
    box-shadow: inset 3px 0 0 var(--energizado);
}
.atividade-resumo--ativo::after {
    content: 'Filtro ativo';
    position: absolute;
    inset-inline-end: var(--esp-3);
    inset-block-end: var(--esp-3);
    color: var(--energizado);
    font-family: var(--fonte-dado);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.atividade-resumo-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    margin-block-end: var(--esp-2);
}
.atividade-resumo-valor {
    color: var(--texto);
    font-size: 1.5rem;
    line-height: 1;
}
.atividade-resumo-rotulo {
    color: var(--texto);
    font-family: var(--fonte-dado);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}
.atividade-resumo p {
    color: var(--texto-fraco);
    font-size: 0.8125rem;
    line-height: 1.45;
}
.atividade-resumo--ativo p {
    padding-inline-end: 72px;
}
.atividades-lista-cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--esp-4);
    margin-block-end: var(--esp-3);
}
.atividades-lista-cabecalho h3 {
    margin-block: var(--esp-1);
}
.atividades-lista-cabecalho p,
.atividades-total {
    color: var(--texto-fraco);
    font-size: 0.8125rem;
}
.atividades-total {
    white-space: nowrap;
}
.atividades-lista-meta {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
}
.atividades-limpar-filtro {
    color: var(--informacao);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}
.atividades-limpar-filtro:hover,
.atividades-limpar-filtro:focus-visible {
    color: var(--texto);
}
.tabela-atividades th:first-child {
    width: 34%;
}
.tabela-atividades th:last-child {
    width: 330px;
}
.tabela-atividades td {
    vertical-align: middle;
}
.atividade-identificacao {
    min-width: 250px;
}
.atividade-codigo {
    display: block;
    color: var(--texto-fraco);
    font-size: 0.6875rem;
    margin-block-end: var(--esp-1);
}
.atividade-titulo {
    display: block;
    color: var(--texto);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}
.atividade-titulo:hover,
.atividade-titulo:focus-visible {
    color: var(--energizado);
}
.atividade-descricao {
    display: -webkit-box;
    max-width: 52ch;
    margin-block-start: var(--esp-1);
    overflow: hidden;
    color: var(--texto-fraco);
    font-size: 0.8125rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.atividade-publicos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--esp-2);
    min-width: 124px;
}
.selo-publico {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    min-width: max-content;
    padding: var(--esp-1) var(--esp-2);
    color: var(--texto);
    background-color: var(--superficie-campo);
    border: 1px solid var(--contorno);
    border-radius: var(--raio);
    font-family: var(--fonte-dado);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}
.selo-publico-contagem {
    min-width: 18px;
    padding-inline: var(--esp-1);
    color: var(--texto-medio);
    background-color: var(--superficie-topo);
    border-radius: var(--raio-pilula);
    font-size: 0.6875rem;
    line-height: 18px;
    text-align: center;
}
.publico-indefinido {
    max-width: 18ch;
    color: var(--texto-fraco);
    font-size: 0.75rem;
    line-height: 1.35;
}
.atividade-conteudo {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: var(--esp-1);
    min-width: 90px;
}
.atividade-conteudo strong {
    color: var(--texto);
}
.atividade-conteudo span,
.atividade-conteudo small {
    color: var(--texto-medio);
    font-size: 0.8125rem;
}
.atividade-conteudo small {
    grid-column: 1 / -1;
    margin-block-start: var(--esp-1);
    color: var(--texto-fraco);
}
.tabela-atividades .acoes-tabela {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: var(--esp-2);
    min-width: max-content;
}
.tabela-atividades .botao {
    padding-inline: var(--esp-3);
    white-space: nowrap;
}
.tabela-atividades .acoes-tabela form {
    margin: 0;
}
.tabela-atividades .botao--exclusao-bloqueada {
    opacity: 0.55;
}
.tabela-atividades .botao--exclusao-bloqueada:hover,
.tabela-atividades .botao--exclusao-bloqueada:focus-visible {
    opacity: 1;
    color: var(--atencao);
    border-color: var(--atencao);
    background-color: rgba(255, 180, 171, 0.06);
}
.tabela .atividades-vazio {
    padding-block: var(--esp-8);
    text-align: center;
}
.atividades-vazio strong,
.atividades-vazio span {
    display: block;
}
.atividades-vazio span {
    margin-block-start: var(--esp-2);
    color: var(--texto-fraco);
    font-size: 0.875rem;
}

/* Visão analítica de relatórios */
.relatorio-cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--esp-5);
    margin-block-end: var(--esp-5);
}
.relatorio-cabecalho h2 {
    margin-block: var(--esp-1) 0;
}
.relatorio-contexto,
.relatorio-secao-rotulo {
    color: var(--texto-medio);
    font-family: var(--fonte-dado);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.relatorio-subtitulo {
    max-width: 68ch;
    margin-block-start: var(--esp-2);
    color: var(--texto-medio);
}
.relatorio-cabecalho-acoes {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
}
.relatorio-atualizacao {
    color: var(--texto-fraco);
    font-size: 0.75rem;
    white-space: nowrap;
}
.relatorio-filtros {
    padding: 0;
    overflow: hidden;
}
.relatorio-filtros-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    padding: var(--esp-4) var(--esp-5);
    border-bottom: 1px solid var(--contorno-sutil);
}
.relatorio-filtros-cabecalho h3 {
    margin-block: var(--esp-1) 0;
}
.selo-filtro {
    min-width: max-content;
    padding: var(--esp-1) var(--esp-2);
    color: var(--informacao);
    border: 1px solid var(--informacao);
    border-radius: var(--raio-pilula);
    font-size: 0.6875rem;
}
.relatorio-periodos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
    padding: var(--esp-4) var(--esp-5);
}
.periodo-atalho {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-inline: var(--esp-4);
    color: var(--texto-medio);
    background-color: var(--superficie-campo);
    border: 1px solid var(--contorno-sutil);
    border-radius: var(--raio);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
}
.periodo-atalho:hover {
    color: var(--texto);
    border-color: var(--contorno);
}
.periodo-atalho--ativo {
    color: var(--energizado);
    background-color: rgba(57, 255, 20, 0.07);
    border-color: var(--energizado);
}
.relatorio-filtros-avancados {
    border-top: 1px solid var(--contorno-sutil);
}
.relatorio-filtros-avancados summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    padding: var(--esp-3) var(--esp-5);
    color: var(--texto-medio);
    cursor: pointer;
    list-style-position: inside;
}
.relatorio-filtros-avancados summary:hover {
    background-color: var(--superficie-alta);
    color: var(--texto);
}
.relatorio-filtros-resumo {
    color: var(--texto-fraco);
    font-size: 0.75rem;
}
.relatorio-formulario-filtros {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--esp-4);
    padding: var(--esp-5);
    background-color: var(--superficie-alta);
    border-top: 1px solid var(--contorno-sutil);
}
.relatorio-formulario-filtros .campo-grupo {
    margin-block-end: 0;
}
.relatorio-filtros-acoes {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--esp-2);
}
.relatorio-indicadores {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--esp-3);
    margin-block-end: var(--esp-5);
}
.relatorio-indicador {
    display: flex;
    min-width: 0;
    min-height: 140px;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--esp-4);
    background-color: var(--superficie);
    border: 1px solid var(--contorno-sutil);
    border-radius: var(--raio);
}
.relatorio-indicador--destaque {
    border-block-start: 3px solid var(--energizado);
}
.relatorio-indicador-rotulo {
    color: var(--texto-medio);
    font-size: 0.8125rem;
    font-weight: 500;
}
.relatorio-indicador-valor {
    color: var(--texto);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.15;
}
.relatorio-indicador--destaque .relatorio-indicador-valor {
    color: var(--energizado);
}
.relatorio-indicador-contexto {
    color: var(--texto-fraco);
    font-size: 0.75rem;
    line-height: 1.4;
}
.relatorio-grade-principal {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--esp-4);
    margin-block-end: var(--esp-4);
}
.relatorio-grafico-cartao,
.relatorio-status-cartao,
.relatorio-comparativo,
.relatorio-exportacao {
    min-width: 0;
    margin-block-end: 0;
}
.relatorio-cartao-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--esp-4);
    margin-block-end: var(--esp-5);
}
.relatorio-cartao-cabecalho h3,
.relatorio-exportacao h3,
.relatorio-lista-cabecalho h3 {
    margin-block: var(--esp-1) 0;
}
.relatorio-cartao-cabecalho p,
.relatorio-exportacao p,
.relatorio-lista-cabecalho p {
    margin-block-start: var(--esp-1);
    color: var(--texto-fraco);
    font-size: 0.8125rem;
}
.relatorio-cartao-dado {
    min-width: max-content;
    color: var(--texto-medio);
    font-size: 0.75rem;
}
.relatorio-grafico-area {
    min-height: 260px;
    overflow-x: auto;
}
.relatorio-grafico {
    display: block;
    width: 100%;
    min-width: 620px;
    height: auto;
}
.relatorio-grafico-grade {
    stroke: var(--contorno-sutil);
    stroke-width: 1;
}
.relatorio-grafico-eixo {
    fill: var(--texto-fraco);
    font-family: var(--fonte-dado);
    font-size: 10px;
}
.relatorio-grafico-barra {
    fill: var(--energizado);
    opacity: 0.72;
}
.relatorio-grafico-barra:hover,
.relatorio-grafico-barra:focus {
    opacity: 1;
}
.relatorio-status-lista {
    display: flex;
    flex-direction: column;
    gap: var(--esp-5);
}
.relatorio-status-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--esp-2);
}
.relatorio-status-linha {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
}
.relatorio-status-nome {
    color: var(--texto-medio);
    font-size: 0.8125rem;
}
.relatorio-status-percentual {
    color: var(--texto-fraco);
    font-size: 0.6875rem;
}
.relatorio-progresso {
    width: 100%;
    height: var(--esp-2);
    overflow: hidden;
    appearance: none;
    background-color: var(--superficie-campo);
    border: 0;
    border-radius: var(--raio-pilula);
}
.relatorio-progresso::-webkit-progress-bar {
    background-color: var(--superficie-campo);
    border-radius: var(--raio-pilula);
}
.relatorio-progresso::-webkit-progress-value {
    background-color: var(--texto-fraco);
    border-radius: var(--raio-pilula);
}
.relatorio-progresso::-moz-progress-bar {
    background-color: var(--texto-fraco);
    border-radius: var(--raio-pilula);
}
.relatorio-progresso--aprovada::-webkit-progress-value {
    background-color: var(--energizado);
}
.relatorio-progresso--aprovada::-moz-progress-bar {
    background-color: var(--energizado);
}
.relatorio-progresso--pendente::-webkit-progress-value {
    background-color: var(--atencao);
}
.relatorio-progresso--pendente::-moz-progress-bar {
    background-color: var(--atencao);
}
.relatorio-progresso--refazer::-webkit-progress-value {
    background-color: var(--alarme);
}
.relatorio-progresso--refazer::-moz-progress-bar {
    background-color: var(--alarme);
}
.relatorio-progresso--grupo::-webkit-progress-value {
    background-color: var(--informacao);
}
.relatorio-progresso--grupo::-moz-progress-bar {
    background-color: var(--informacao);
}
.relatorio-grade-secundaria {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: var(--esp-4);
    margin-block-end: var(--esp-6);
}
.relatorio-grupos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--esp-4);
}
.relatorio-grupo {
    padding: var(--esp-4);
    background-color: var(--superficie-alta);
    border: 1px solid var(--contorno-sutil);
    border-radius: var(--raio);
}
.relatorio-grupo-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    margin-block-end: var(--esp-4);
}
.relatorio-grupo-valor {
    color: var(--texto);
    font-size: 1.5rem;
}
.relatorio-grupo-detalhes {
    display: flex;
    justify-content: space-between;
    gap: var(--esp-3);
    margin-block-start: var(--esp-3);
    color: var(--texto-fraco);
    font-size: 0.75rem;
}
.relatorio-grupo-detalhes strong {
    color: var(--texto-medio);
}
.relatorio-exportacao {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--esp-5);
}
.relatorio-exportacao-resumo {
    display: grid;
    gap: var(--esp-2);
}
.relatorio-exportacao-resumo div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--esp-3);
    padding-block-end: var(--esp-2);
    border-bottom: 1px solid var(--contorno-sutil);
}
.relatorio-exportacao-resumo dt {
    color: var(--texto-fraco);
    font-size: 0.75rem;
}
.relatorio-exportacao-resumo dd {
    color: var(--texto-medio);
    font-size: 0.75rem;
    text-align: end;
}
.relatorio-ranking {
    margin-block-end: var(--esp-6);
}
.relatorio-lista-cabecalho {
    margin-block-end: var(--esp-3);
}
.tabela-relatorio-atividades th:not(:first-child),
.tabela-relatorio-atividades td:not(:first-child) {
    text-align: right;
}
.tabela .relatorio-vazio {
    padding-block: var(--esp-8);
    text-align: center;
}
.relatorio-vazio strong,
.relatorio-vazio span {
    display: block;
}
.relatorio-vazio span {
    margin-block-start: var(--esp-2);
    color: var(--texto-fraco);
    font-size: 0.8125rem;
}

/* 8. Utilitários */
.oculto-visual {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.texto-dado {
    font-family: var(--fonte-dado);
}
.margem-bottom-0 {
    margin-block-end: 0 !important;
}
.flex-direita {
    display: flex;
    justify-content: flex-end;
}
.flex-espacado {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-grupo {
    display: flex;
    gap: var(--esp-3);
    align-items: center;
}
.acoes-tabela {
    flex-wrap: wrap;
}
.prosa {
    color: var(--texto-medio);
}
.prosa p {
    margin-block-end: var(--esp-3);
}
.prosa li {
    margin-bottom: 0.5rem;
}

/* Anexos da Resposta */
.lista-anexos-revisao {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cor-borda);
}
.galeria-anexos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
}
.anexo-card {
    width: 140px;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    overflow: hidden;
    background: var(--cor-fundo-suave);
    display: flex;
    flex-direction: column;
}
.anexo-thumb {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}
.anexo-icone-file {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2a2a2a;
    color: #888;
}
.anexo-meta {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.anexo-nome {
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--fonte-mono);
}
.anexo-tam {
    font-size: 0.75em;
    color: #888;
}
.anexo-btn-baixar {
    font-size: 0.8em;
    text-align: center;
    display: inline-block;
    padding: 4px;
    margin-top: 4px;
    background: var(--cor-borda);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}
.anexo-btn-baixar:hover {
    background: #444;
}

/* Preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Responsividade mobile */
@media (max-width: 1200px) {
    .tabela-atividades .acoes-tabela {
        display: flex;
        flex-wrap: wrap;
        min-width: 190px;
    }
    .relatorio-formulario-filtros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .relatorio-indicadores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .relatorio-grade-principal,
    .relatorio-grade-secundaria {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .menu-lateral {
        width: 80px;
        align-items: center;
    }
    .menu-lateral .logo { display: none; }
    .menu-item span { display: none; }
    .menu-item { justify-content: center; padding: var(--esp-3); }
}

@media (max-width: 600px) {
    .app {
        flex-direction: column;
    }
    .menu-lateral {
        width: 100%;
        height: auto;
        flex-direction: row;
        justify-content: space-around;
        padding: var(--esp-2);
        border-right: none;
        border-top: 1px solid var(--contorno-sutil);
        order: 2; /* Ancorar na parte inferior */
    }
    .conteudo {
        order: 1;
        padding: var(--margem-mobile);
    }
    .painel-ajuda {
        display: none; /* Seria um modal deslizante gerido via JS na tela final */
    }
    .tabela-wrapper {
        border: none;
        background: transparent;
    }
    .indicadores {
        grid-template-columns: 1fr;
    }
    .painel-cabecalho,
    .painel-secao-cabecalho,
    .recorte-ativo {
        align-items: flex-start;
        flex-direction: column;
    }
    .painel-periodo,
    .painel-secao-resumo {
        white-space: normal;
    }
    .progresso-cabecalho,
    .filtro-situacao {
        align-items: stretch;
        flex-direction: column;
    }
    .filtro-situacao .campo,
    .filtro-situacao .botao {
        width: 100%;
    }
    .tabela thead {
        display: none;
    }
    .tabela tbody tr {
        display: block;
        background-color: var(--superficie);
        border: 1px solid var(--contorno-sutil);
        border-radius: var(--raio);
        margin-bottom: var(--esp-3);
        padding: var(--esp-3);
    }
    .tabela td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--contorno-sutil);
        padding: var(--esp-2) 0;
    }
    .tabela td::before {
        content: attr(data-label);
        font-weight: 500;
        color: var(--texto-medio);
        margin-right: var(--esp-3);
    }
    .atividades-cabecalho {
        align-items: stretch;
        flex-direction: column;
    }
    .atividades-cabecalho .botao {
        width: 100%;
    }
    .atividades-resumo {
        grid-template-columns: 1fr;
        gap: var(--esp-2);
    }
    .atividades-filtros-cabecalho {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--esp-2);
        padding: var(--esp-4);
    }
    .atividades-filtros-cabecalho p {
        text-align: left;
    }
    .atividades-lista-cabecalho {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--esp-2);
    }
    .atividades-lista-meta {
        justify-content: space-between;
        width: 100%;
    }
    .tabela-atividades td {
        align-items: flex-start;
    }
    .tabela-atividades td[data-label="Atividade"],
    .tabela-atividades td[data-label="Ações"] {
        flex-direction: column;
    }
    .tabela-atividades td[data-label="Atividade"]::before,
    .tabela-atividades td[data-label="Ações"]::before {
        margin-block-end: var(--esp-2);
    }
    .tabela-atividades .atividade-identificacao {
        min-width: 0;
    }
    .tabela-atividades .acoes-tabela,
    .tabela-atividades .acoes-tabela form,
    .tabela-atividades .acoes-tabela .botao {
        width: 100%;
    }
    .tabela-atividades .acoes-tabela {
        align-items: stretch;
        flex-direction: column;
    }
    .tabela-atividades .botao {
        justify-content: center;
    }
    .atividades-vazio::before {
        display: none;
    }
    .tabela-atividades .atividades-vazio {
        align-items: center;
        flex-direction: column;
    }
    .relatorio-cabecalho,
    .relatorio-cabecalho-acoes,
    .relatorio-filtros-cabecalho,
    .relatorio-cartao-cabecalho {
        align-items: stretch;
        flex-direction: column;
    }
    .relatorio-cabecalho-acoes .botao {
        width: 100%;
    }
    .relatorio-atualizacao {
        white-space: normal;
    }
    .relatorio-periodos {
        display: grid;
        grid-template-columns: 1fr;
    }
    .periodo-atalho {
        justify-content: center;
    }
    .relatorio-filtros-avancados summary {
        align-items: flex-start;
        flex-direction: column;
    }
    .relatorio-formulario-filtros,
    .relatorio-indicadores,
    .relatorio-grupos {
        grid-template-columns: 1fr;
    }
    .relatorio-filtros-acoes {
        align-items: stretch;
        flex-direction: column-reverse;
    }
    .relatorio-filtros-acoes .botao {
        width: 100%;
    }
    .relatorio-grafico {
        min-width: 520px;
    }
    .relatorio-grupo-detalhes {
        align-items: flex-start;
        flex-direction: column;
    }
    .tabela-relatorio-atividades th:not(:first-child),
    .tabela-relatorio-atividades td:not(:first-child) {
        text-align: start;
    }
    .tabela-relatorio-atividades .relatorio-vazio {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    .relatorio-vazio::before {
        display: none;
    }
    .editor-cabecalho,
    .editor-item,
    .execucao-cabecalho,
    .execucao-acoes,
    .selecao-chaves-cabecalho,
    .selecao-chaves-rodape {
        align-items: stretch;
        flex-direction: column;
    }
    .editor-cabecalho form,
    .editor-cabecalho .campo,
    .editor-cabecalho .botao {
        width: 100%;
    }
    .acoes-editor {
        justify-content: flex-start;
    }
    .execucao-questao-cabecalho,
    .execucao-enunciado-questao,
    .execucao-item,
    #formResposta {
        padding-inline: var(--esp-4);
    }
    .execucao-acoes-principais,
    .modal-acoes {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }
    .execucao-acoes-principais .botao,
    .modal-acoes .botao,
    .selecao-chaves-rodape .botao {
        width: 100%;
    }
    .grade-chaves {
        grid-template-columns: 1fr;
    }
    .concluida-cartao {
        padding: var(--esp-4);
    }
    .concluida-dados {
        grid-template-columns: 1fr;
    }
    .concluida-acoes {
        flex-direction: column;
        align-items: stretch;
    }
    .concluida-acoes .botao {
        width: 100%;
    }
}

/* 9. @media print */
@media print {
    body {
        background-color: white;
        color: black;
    }
    .menu-lateral, .painel-ajuda, .botao, .alerta, .unifilar-wrapper {
        display: none !important;
    }
    .conteudo {
        padding: 0;
        margin: 1.5cm;
        height: auto;
        overflow: visible;
    }
    .cartao {
    background-color: var(--superficie);
    border: 1px solid #111;
    border-radius: 0;
    padding: var(--esp-5);
    margin-block-end: var(--esp-4);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
    .campo {
        border: 1px solid #000;
    }
    a {
        text-decoration: underline;
        color: black;
    }
    a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

.oculto { display: none !important; }
.botao-ferramenta { flex-direction: column; align-items: center; padding: var(--esp-3); height: auto; gap: var(--esp-2); min-width: 140px; }
.botao-ferramenta svg { width: 24px; height: 24px; }

.painel-ferramentas-grid { display: flex; gap: var(--esp-2); flex-wrap: wrap; margin-bottom: var(--esp-4); }
.mt-4 { margin-top: var(--esp-4); }
.mb-4 { margin-bottom: var(--esp-4); }
.mb-3 { margin-bottom: var(--esp-3); }

.d-none { display: none !important; }
.d-block { display: block !important; }
.flex-col { display: flex; flex-direction: column; gap: var(--esp-3); }
.alerta-horario-box { position: fixed; top: var(--esp-4); right: var(--esp-4); z-index: 1000; width: 320px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.texto-alarme { color: var(--alarme); }
.texto-energizado { color: var(--energizado); }

.ml-auto { margin-left: auto; }
.p-0 { padding: 0; }

.titulo-barra {
    background-color: var(--energizado);
    color: #ffffff !important;
    padding: var(--esp-2) var(--esp-4);
    margin-block-end: var(--esp-4);
    font-size: 1.1rem;
    font-weight: 500;
    border-bottom: 2px solid #2f6900;
}





.barra-topo-adms {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--energizado);
    color: #ffffff;
    padding: var(--esp-3) var(--margem-desktop);
    margin: calc(var(--margem-desktop) * -1) calc(var(--margem-desktop) * -1) var(--esp-6) calc(var(--margem-desktop) * -1);
    border-bottom: 2px solid #2f6900;
}
.barra-topo-adms h1 {
    color: #ffffff !important;
    margin: 0;
    font-size: 1.5rem;
}
@media (max-width: 600px) {
    .barra-topo-adms {
        padding: var(--esp-3) var(--margem-mobile);
        margin: calc(var(--margem-mobile) * -1) calc(var(--margem-mobile) * -1) var(--esp-6) calc(var(--margem-mobile) * -1);
    }
}