/* ==========================================================================
   Painel de landing pages · Dizer o Direito
   Cores, raios, sombras, espaços e tipografia vivem só nos tokens abaixo.
   ========================================================================== */
:root {
    /* Cores: azul DOD (primário) */
    --cor-destaque: #2D71E4;
    --cor-destaque-escuro: #1E52A8;
    --cor-destaque-claro: #EAF1FD;
    --cor-destaque-borda: #BFD3F7;
    --cor-link-hover: #163F85;
    /* Vermelho DOD Cast: só acento e base do perigo suave */
    --cor-acento: #E13F37;
    --cor-acento-escuro: #872F2C;
    /* Superfícies e texto */
    --cor-fundo: #F4F6FA;
    --cor-fundo-hover: #F8FAFD;
    --cor-superficie: #FFFFFF;
    --cor-texto: #1B2433;
    --cor-texto-suave: #566170;
    --cor-borda: #D5DBE5;
    --cor-borda-forte: #7A8699;
    /* Estados */
    --cor-sucesso: #1B7A43;
    --cor-sucesso-fundo: #E4F5EB;
    --cor-sucesso-borda: #B3DEC4;
    --cor-aviso: #8A5300;
    --cor-aviso-fundo: #FFF3DC;
    --cor-aviso-borda: #F2D595;
    --cor-perigo: #B3261E;
    --cor-perigo-escuro: #8F1D17;
    --cor-perigo-fundo: #FDECEB;
    --cor-perigo-fundo-hover: #FAD9D6;
    --cor-perigo-borda: #F2BDB9;
    --cor-neutra: #566170;
    --cor-neutra-fundo: #ECEFF4;
    --cor-sobreposicao: rgba(20, 28, 43, .5);
    /* Editor de código (CodeMirror, RF-32) */
    --cor-codigo-selecao: #D3E2FB;
    --cor-codigo-linha-ativa: rgba(45, 113, 228, .05);
    --cor-codigo-gutter-ativo: rgba(45, 113, 228, .08);
    --cor-codigo-numero: #667183;
    --cor-codigo-realce: #DCE8FC;
    --cor-codigo-busca: #FFF1CC;
    --cor-codigo-busca-atual: #FCDD8B;
    /* Raios */
    --raio-sm: 6px;
    --raio: 10px;
    --raio-lg: 16px;
    --raio-pilula: 999px;
    /* Sombras */
    --sombra-1: 0 1px 2px rgba(20, 28, 43, .06), 0 1px 3px rgba(20, 28, 43, .05);
    --sombra-2: 0 8px 24px rgba(20, 28, 43, .14), 0 2px 6px rgba(20, 28, 43, .08);
    --sombra-3: 0 24px 64px rgba(20, 28, 43, .28), 0 4px 12px rgba(20, 28, 43, .12);
    /* Espaçamentos */
    --esp-1: .25rem;
    --esp-2: .5rem;
    --esp-3: .75rem;
    --esp-4: 1rem;
    --esp-5: 1.5rem;
    --esp-6: 2rem;
    --esp-7: 3rem;
    --esp-8: 4rem;
    /* Tipografia */
    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --texto-xs: .75rem;
    --texto-sm: .875rem;
    --texto-md: 1rem;
    --texto-lg: 1.2rem;
    --texto-xl: 1.6rem;
    /* Foco e movimento */
    /* Um único foco fino: borda 1px no primário + halo de 3px em azul a ~18% */
    --cor-foco-halo: color-mix(in srgb, var(--cor-destaque) 18%, transparent);
    --anel-foco: 0 0 0 1px var(--cor-destaque), 0 0 0 4px var(--cor-foco-halo);
    --anel-foco-campo: 0 0 0 3px var(--cor-foco-halo);
    --duracao: .16s;
    --altura-topo: 4rem;
}

* { box-sizing: border-box; }
/* [hidden] sempre esconde, mesmo em componentes com display próprio (flex, grid...) */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: var(--texto-md);
    line-height: 1.5;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--texto-xl); line-height: 1.25; margin: 0 0 var(--esp-4); letter-spacing: -.01em; }
h2 { font-size: var(--texto-lg); margin: 0 0 var(--esp-3); }
a { color: var(--cor-destaque-escuro); }
a:hover { color: var(--cor-link-hover); }
:focus-visible { outline: none; box-shadow: var(--anel-foco); border-radius: var(--raio-sm); }

.icone { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.2em; }
.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.texto-suave { color: var(--cor-texto-suave); }
.mono { font-family: var(--mono); }

/* Pular para o conteúdo */
.pular-conteudo {
    position: absolute; left: var(--esp-3); top: var(--esp-3); z-index: 100;
    padding: var(--esp-2) var(--esp-4); background: var(--cor-superficie); color: var(--cor-destaque-escuro);
    font-weight: 600; border-radius: var(--raio);
    transform: translateY(-200%); transition: transform var(--duracao);
}
.pular-conteudo:focus { transform: none; box-shadow: var(--sombra-2), var(--anel-foco); }

/* Cabeçalho e container */
.topo { background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); box-shadow: var(--sombra-1); position: relative; z-index: 70; }
.topo-interno {
    max-width: 1200px; margin: 0 auto; padding: 0 var(--esp-4); min-height: var(--altura-topo);
    display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
}
.marca { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.marca-link { display: inline-flex; border-radius: var(--raio-sm); }
.marca-logo { display: block; height: 32px; width: auto; }
.marca-texto {
    display: flex; flex-direction: column; line-height: 1.25; font-size: var(--texto-xs); color: var(--cor-texto-suave);
    padding-left: var(--esp-3); border-left: 1px solid var(--cor-borda); white-space: nowrap;
}
.marca-texto strong { font-size: var(--texto-sm); color: var(--cor-texto); font-weight: 700; }
.conteudo { max-width: 1200px; margin: 0 auto; padding: var(--esp-5) var(--esp-4) var(--esp-7); outline: none; }

/* Menu do usuário */
.menu-usuario { position: relative; }
.menu-usuario-botao {
    display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--esp-1) var(--esp-3) var(--esp-1) var(--esp-1);
    font: inherit; color: var(--cor-texto); background: var(--cor-superficie);
    border: 1px solid var(--cor-borda); border-radius: var(--raio-pilula); cursor: pointer;
    transition: background var(--duracao), border-color var(--duracao);
}
.menu-usuario-botao:hover { background: var(--cor-destaque-claro); border-color: var(--cor-destaque-borda); }
.menu-usuario-botao[aria-expanded="true"] { background: var(--cor-destaque-claro); border-color: var(--cor-destaque-borda); }
.menu-usuario-botao:focus-visible { border-radius: var(--raio-pilula); }
.menu-usuario-botao[aria-expanded="true"]:focus-visible { box-shadow: none; }
.avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
    border-radius: 50%; background: var(--cor-destaque); color: var(--cor-superficie);
    font-size: var(--texto-xs); font-weight: 700; letter-spacing: .02em;
}
.menu-usuario-nome { font-size: var(--texto-sm); font-weight: 600; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-usuario-seta {
    width: .45rem; height: .45rem; margin: 0 var(--esp-1) .2rem 0; border-right: 2px solid var(--cor-texto-suave);
    border-bottom: 2px solid var(--cor-texto-suave); transform: rotate(45deg); transition: transform var(--duracao);
}
.menu-usuario-botao[aria-expanded="true"] .menu-usuario-seta { transform: rotate(225deg); margin-bottom: 0; }
.menu-usuario-painel {
    position: absolute; right: 0; top: calc(100% + var(--esp-2)); z-index: 30; width: 18rem; max-width: calc(100vw - 1.5rem);
    background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
    box-shadow: var(--sombra-2); padding: var(--esp-3);
}
.menu-usuario-dados { display: flex; flex-direction: column; gap: 2px; padding: var(--esp-1) var(--esp-1) var(--esp-3); border-bottom: 1px solid var(--cor-borda); margin-bottom: var(--esp-3); }
.menu-usuario-dados strong { overflow-wrap: anywhere; }
.menu-usuario-email { font-size: var(--texto-sm); color: var(--cor-texto-suave); overflow-wrap: anywhere; }
.menu-usuario-acesso { font-size: var(--texto-xs); color: var(--cor-texto-suave); margin-top: var(--esp-1); }
.menu-usuario-sair { margin: 0; }

/* Cartões */
.cartao {
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg); box-shadow: var(--sombra-1); padding: var(--esp-5); margin-bottom: var(--esp-4);
}

/* Botões */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
    padding: .6rem 1.1rem; border: 1px solid transparent; border-radius: var(--raio);
    font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; text-align: center;
    box-shadow: var(--sombra-1);
    transition: background var(--duracao), border-color var(--duracao), color var(--duracao), box-shadow var(--duracao);
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn:focus-visible { box-shadow: var(--anel-foco); border-radius: var(--raio); }
.btn[disabled], .btn.desabilitado, .btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; }
.btn-primario { background: var(--cor-destaque); color: var(--cor-superficie); }
.btn-primario:hover { background: var(--cor-destaque-escuro); color: var(--cor-superficie); }
.btn-secundario, .editor-cm .cm-button { background: var(--cor-superficie); color: var(--cor-destaque-escuro); border-color: var(--cor-borda); }
.btn-secundario:hover, .editor-cm .cm-button:hover { background: var(--cor-destaque-claro); border-color: var(--cor-destaque-borda); color: var(--cor-destaque-escuro); }
.btn-fantasma { background: transparent; color: var(--cor-destaque-escuro); box-shadow: none; }
.btn-fantasma:hover { background: var(--cor-destaque-claro); color: var(--cor-destaque-escuro); }
.btn-perigo-suave { background: var(--cor-perigo-fundo); color: var(--cor-acento-escuro); border-color: var(--cor-perigo-borda); }
.btn-perigo-suave:hover { background: var(--cor-perigo-fundo-hover); color: var(--cor-acento-escuro); }
.btn-perigo { background: var(--cor-perigo); color: var(--cor-superficie); }
.btn-perigo:hover { background: var(--cor-perigo-escuro); color: var(--cor-superficie); }
.btn-pequeno { padding: .35rem .7rem; font-size: var(--texto-sm); }
.btn-icone { padding: .5rem; width: 2.5rem; height: 2.5rem; }
.btn-icone.btn-pequeno { width: 2rem; height: 2rem; padding: .3rem; }
.btn-bloco { width: 100%; }
.btn-link {
    background: none; border: 0; padding: 0; font: inherit; color: var(--cor-destaque-escuro);
    text-decoration: underline; cursor: pointer;
}
.btn[aria-busy="true"]::before {
    content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Formulários */
.form-campo { display: flex; flex-direction: column; gap: var(--esp-1); margin-bottom: var(--esp-4); min-width: 0; }
.form-campo label { font-weight: 600; font-size: var(--texto-sm); }
.form-campo input, .form-campo select, .form-campo textarea {
    width: 100%; padding: .6rem .75rem; font: inherit; color: inherit;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio);
    transition: border-color var(--duracao), box-shadow var(--duracao);
}
.form-campo input:hover, .form-campo select:hover, .form-campo textarea:hover { border-color: var(--cor-texto-suave); }
.form-campo input:focus, .form-campo select:focus, .form-campo textarea:focus, .editor-cm .cm-textfield:focus {
    outline: none; border-color: var(--cor-destaque); box-shadow: var(--anel-foco-campo);
}
.form-campo .ajuda { font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.form-campo .erro-campo, .linha-arquivo-mensagens .erro-campo, .editor-erro { font-size: var(--texto-sm); color: var(--cor-perigo); font-weight: 500; }
.form-campo.com-erro input, .form-campo.com-erro select, .form-campo.com-erro textarea { border-color: var(--cor-perigo); }
.form-linha { display: flex; gap: var(--esp-4); align-items: flex-end; }
.form-linha > .form-campo { flex: 1; }

/* Interruptor (switch) */
.interruptor { display: inline-flex; align-items: center; gap: var(--esp-3); cursor: pointer; position: relative; font-weight: 600; font-size: var(--texto-sm); }
.interruptor input {
    position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; overflow: hidden; clip: rect(0, 0, 0, 0);
}
.interruptor-trilho {
    position: relative; width: 2.6rem; height: 1.5rem; flex: none; border-radius: var(--raio-pilula);
    background: var(--cor-borda-forte); transition: background var(--duracao);
}
.interruptor-trilho::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px);
    border-radius: 50%; background: var(--cor-superficie); box-shadow: var(--sombra-1); transition: transform var(--duracao);
}
.interruptor input:checked + .interruptor-trilho { background: var(--cor-destaque); }
.interruptor input:checked + .interruptor-trilho::after { transform: translateX(1.1rem); }
.interruptor input:focus-visible + .interruptor-trilho { box-shadow: var(--anel-foco); }
.interruptor input:disabled + .interruptor-trilho { opacity: .55; }
.interruptor:hover .interruptor-trilho { filter: brightness(.95); }

/* Período (nova landing e edição) */
.campos-periodo { border: 0; margin: 0 0 var(--esp-4); padding: 0; min-width: 0; }
.campos-periodo .ajuda, .campo-status .ajuda { margin: var(--esp-2) 0 0; font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.campos-periodo .erro-campo, .campo-status .erro-campo { display: block; margin-top: var(--esp-2); font-size: var(--texto-sm); font-weight: 500; color: var(--cor-perigo); }
.campos-periodo.com-erro input[type="date"] { border-color: var(--cor-perigo); }
.periodo-datas { margin-top: var(--esp-3); }
.periodo-datas > .form-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); align-items: start; gap: var(--esp-4); }
.periodo-datas > .form-linha > .form-campo { margin-bottom: 0; }
.periodo-resumo { display: flex; align-items: flex-start; gap: var(--esp-2); margin: var(--esp-3) 0 0; font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.periodo-resumo .icone { margin-top: .15rem; }

/* Zona de arquivo */
.zona-arquivo { position: relative; }
.zona-arquivo-input, .linha-arquivo-input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; clip: rect(0, 0, 0, 0); }
.form-campo .zona-arquivo-alvo {
    display: flex; flex-direction: column; align-items: center; gap: var(--esp-1); text-align: center;
    padding: var(--esp-5) var(--esp-4); font-weight: 400; font-size: var(--texto-md); color: var(--cor-texto-suave);
    border: 2px dashed var(--cor-borda-forte); border-radius: var(--raio-lg); background: var(--cor-fundo-hover); cursor: pointer;
    transition: background var(--duracao), border-color var(--duracao);
}
.zona-arquivo-alvo .icone { width: 1.8rem; height: 1.8rem; color: var(--cor-destaque); margin-bottom: var(--esp-1); }
.zona-arquivo-alvo strong { color: var(--cor-texto); }
.zona-arquivo-alvo:hover, .zona-arquivo.arrastando .zona-arquivo-alvo { border-color: var(--cor-destaque); background: var(--cor-destaque-claro); }
.zona-arquivo.arrastando .zona-arquivo-alvo { border-style: solid; }
.form-campo .zona-arquivo-input { width: 1px; padding: 0; border: 0; }
.form-campo .rotulo-campo { font-weight: 600; font-size: var(--texto-sm); }
.zona-arquivo-input:focus-visible + .zona-arquivo-alvo { border-color: var(--cor-destaque); box-shadow: var(--anel-foco); }
.zona-arquivo-escolhido {
    display: flex; align-items: center; gap: var(--esp-2); margin: var(--esp-2) 0 0; padding: var(--esp-2) var(--esp-3);
    font-size: var(--texto-sm); font-weight: 600; background: var(--cor-destaque-claro); border-radius: var(--raio); overflow-wrap: anywhere;
}
.zona-arquivo-escolhido.excedeu { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
.form-campo.com-erro .zona-arquivo-alvo { border-color: var(--cor-perigo); background: var(--cor-perigo-fundo); }

/* Segmentado (rádios ou botões em forma de abas) */
.segmentado { display: inline-flex; padding: 3px; gap: 2px; background: var(--cor-neutra-fundo); border-radius: var(--raio); max-width: 100%; }
.segmentado label, .segmentado button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); padding: .4rem .9rem;
    font: inherit; font-size: var(--texto-sm); font-weight: 600; color: var(--cor-texto-suave);
    background: transparent; border: 0; border-radius: var(--raio-sm); cursor: pointer; position: relative;
    transition: background var(--duracao), color var(--duracao);
}
.segmentado label:hover, .segmentado button:hover { color: var(--cor-texto); }
.segmentado-input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); }
.segmentado label:has(.segmentado-input:checked), .segmentado button[aria-pressed="true"] {
    background: var(--cor-superficie); color: var(--cor-destaque-escuro); box-shadow: var(--sombra-1);
}
.segmentado label:has(.segmentado-input:focus-visible), .segmentado button:focus-visible { box-shadow: var(--anel-foco); }

/* Rodapé de formulário: separador e botões de envio */
.acoes-form { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; width: 100%; margin-top: var(--esp-2); padding-top: var(--esp-4); border-top: 1px solid var(--cor-borda); }
.acoes-form .btn { min-height: 2.75rem; }

/* Alertas fixos dentro das telas */
.alerta { padding: var(--esp-3) var(--esp-4); border-radius: var(--raio); margin-bottom: var(--esp-4); border: 1px solid transparent; }
.alerta-sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); border-color: var(--cor-sucesso-borda); }
.alerta-aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso); border-color: var(--cor-aviso-borda); }
.alerta-erro { background: var(--cor-perigo-fundo); color: var(--cor-acento-escuro); border-color: var(--cor-perigo-borda); }

/* Toasts */
.toasts {
    position: fixed; top: calc(var(--altura-topo) + var(--esp-3)); right: var(--esp-4); z-index: 60;
    display: flex; flex-direction: column; gap: var(--esp-2); width: min(24rem, calc(100vw - 2rem)); pointer-events: none;
}
.toast {
    pointer-events: auto; display: flex; align-items: flex-start; gap: var(--esp-3); padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-4);
    background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-left-width: 4px; border-radius: var(--raio);
    box-shadow: var(--sombra-2); animation: toast-entra var(--duracao) ease-out;
    transition: opacity var(--duracao), transform var(--duracao);
}
.toast.saindo { opacity: 0; transform: translateX(1rem); }
.toast-icone { width: 1.3rem; height: 1.3rem; margin-top: 1px; }
.toast-msg { flex: 1; margin: 0; font-size: var(--texto-sm); line-height: 1.45; overflow-wrap: anywhere; padding-top: 2px; }
.toast-sucesso { border-left-color: var(--cor-sucesso); }
.toast-sucesso .toast-icone { color: var(--cor-sucesso); }
.toast-aviso { border-left-color: var(--cor-aviso); }
.toast-aviso .toast-icone { color: var(--cor-aviso); }
.toast-erro { border-left-color: var(--cor-perigo); }
.toast-erro .toast-icone { color: var(--cor-perigo); }
.toast-fechar {
    display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; flex: none;
    padding: 0; color: var(--cor-texto-suave); background: transparent; border: 0; border-radius: var(--raio-sm); cursor: pointer;
}
.toast-fechar:hover { background: var(--cor-neutra-fundo); color: var(--cor-texto); }
@keyframes toast-entra { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } }

/* Modal */
.modal {
    width: min(32rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0;
    border-radius: var(--raio-lg); background: var(--cor-superficie); color: var(--cor-texto); box-shadow: var(--sombra-3);
    overflow: visible;
}
.modal[open] { animation: modal-entra var(--duracao) ease-out; }
.modal::backdrop { background: var(--cor-sobreposicao); }
.modal-caixa { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
.modal-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4) var(--esp-4) var(--esp-2) var(--esp-5); }
.modal-topo h2 { margin: 0; }
.modal-corpo { padding: var(--esp-2) var(--esp-5) var(--esp-4); overflow: auto; color: var(--cor-texto-suave); }
.modal-corpo p { margin: 0; }
.modal-rodape { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--esp-2); padding: var(--esp-3) var(--esp-5) var(--esp-4); border-top: 1px solid var(--cor-borda); }
.modal-grande { width: min(1200px, calc(100vw - 1.5rem)); height: min(90vh, 900px); }
.modal-grande .modal-caixa { height: 100%; max-height: none; }
.modal-grande .modal-corpo { flex: 1; min-height: 0; padding: 0 var(--esp-5) var(--esp-3); color: var(--cor-texto); }
body.modal-aberto { overflow: hidden; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(.5rem) scale(.98); } to { opacity: 1; transform: none; } }

/* Cabeçalho de página e utilitários de tela */
.cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; margin-bottom: var(--esp-4); }
.cabecalho-pagina h1 { margin: 0; }
.cabecalho-texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); min-width: 0; }
.link-voltar { display: inline-flex; align-items: center; gap: var(--esp-1); min-height: 2rem; font-size: var(--texto-sm); font-weight: 600; text-decoration: none; }
.link-voltar:hover { text-decoration: underline; }

/* Tabela */
.tabela-rolagem { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); }
.tabela { width: 100%; border-collapse: collapse; background: var(--cor-superficie); }
.tabela th, .tabela td { padding: var(--esp-3) var(--esp-4); text-align: left; border-bottom: 1px solid var(--cor-borda); vertical-align: middle; }
.tabela th { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-suave); white-space: nowrap; background: var(--cor-fundo-hover); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--cor-fundo-hover); }

/* Badges */
.badge { display: inline-block; padding: .15rem .65rem; border-radius: var(--raio-pilula); font-size: var(--texto-xs); font-weight: 600; white-space: nowrap; }
.badge-ativado { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.badge-desativado { background: var(--cor-neutra-fundo); color: var(--cor-neutra); }
.badge-removido { background: var(--cor-perigo-fundo); color: var(--cor-acento-escuro); }
.badge-agendada { background: var(--cor-destaque-claro); color: var(--cor-destaque-escuro); }
.badge-expirada { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }

/* Paginação */
.paginacao { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: center; align-items: center; margin-top: var(--esp-4); }
.paginacao a, .paginacao span {
    min-width: 2.2rem; padding: .4rem .8rem; text-align: center; border-radius: var(--raio);
    border: 1px solid var(--cor-borda); background: var(--cor-superficie); text-decoration: none; font-size: var(--texto-sm);
}
.paginacao a:hover { background: var(--cor-destaque-claro); border-color: var(--cor-destaque-borda); }
.paginacao .atual { background: var(--cor-destaque); color: var(--cor-superficie); border-color: var(--cor-destaque); }
.paginacao .inativo { color: var(--cor-texto-suave); opacity: .7; }

/* Estado vazio */
.vazio { text-align: center; padding: var(--esp-7) var(--esp-4); color: var(--cor-texto-suave); }
.vazio h2 { color: var(--cor-texto); }

.acoes { display: inline-flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.acoes form { margin: 0; }

@media (max-width: 640px) {
    .form-linha { flex-direction: column; align-items: stretch; gap: 0; }
    .conteudo { padding: var(--esp-4) var(--esp-3) var(--esp-6); }
    .topo-interno { padding: 0 var(--esp-3); }
    .marca-logo { height: 28px; }
    .marca { gap: var(--esp-2); }
    .marca-texto { padding-left: var(--esp-2); white-space: normal; }
    .marca-texto strong { font-size: var(--texto-xs); line-height: 1.2; max-width: 6rem; }
    .menu-usuario-nome, .menu-usuario-seta { display: none; }
    /* Celular: toast compacto sobre a faixa do cabeçalho */
    .toasts { top: var(--esp-2); right: var(--esp-3); left: var(--esp-3); width: auto; z-index: 80; }
    .toast { padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-3); gap: var(--esp-2); }
    .toast-msg { line-height: 1.35; padding-top: 0; align-self: center; }
    .toast-fechar { width: 2.5rem; height: 2.5rem; margin: -.25rem 0; }
    .cartao { padding: var(--esp-4); }
    .tabela th, .tabela td { padding: var(--esp-2) var(--esp-3); }
    .modal-rodape .btn { flex: 1; }
    /* Alvos de toque de pelo menos 40px */
    .marca-link, .btn-pequeno, .link-voltar, .interruptor, .segmentado label, .segmentado button, .paginacao a, .paginacao span { min-height: 2.5rem; }
    .marca-link { align-items: center; }
    .menu-usuario-botao { padding: 4px; }
    .paginacao a, .paginacao span { display: inline-flex; align-items: center; justify-content: center; }
    .acoes-form { flex-direction: column; align-items: stretch; }
    .acoes-form .btn { width: 100%; }
}

/* Rótulo que vira só ícone em tela estreita: continua para leitores de tela (como o .sr-only) */
@media (max-width: 760px) {
    .sr-only-estreito {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}