@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* =========================================================================
   AutoLuiz NPS — folha de estilo única e organizada.
   Substitui o antigo global.css (que era a concatenação dos <style> de cada
   página e vazava regras de body/header/main entre as telas).
   O tipo de layout de cada tela é detectado pelo conteúdo com :has(),
   então não é preciso adicionar classes no HTML.
   ========================================================================= */

:root {
    --red: #e01b1b;
    --red-dark: #a40d0d;
    --bg: #0b0b0d;
    --surface: #16161a;
    --surface-2: #1d1d22;
    --line: #2a2a30;
    --line-soft: #232329;
    --text: #f2f2f4;
    --muted: #8b8b93;
    --radius: 14px;
    --shadow: 0 10px 30px -12px rgba(0, 0, 0, .7);
    --shadow-lg: 0 18px 40px -16px rgba(0, 0, 0, .8);
}

/* ---------- Reset ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: #303036;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #3d3d45; background-clip: padding-box; }

/* ---------- Base ---------- */
body {
    display: block;
    min-height: 100vh;
    background: radial-gradient(1200px 620px at 50% -12%, #1a1a20 0%, #101014 52%, #08080a 100%) fixed;
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .1px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scrollbar-width: thin;
    scrollbar-color: #33333a transparent;
}

::selection { background: rgba(224, 27, 27, .35); color: #fff; }

h1 { color: #fff; font-size: 26px; }
h2 { color: #fff; font-size: 18px; }
a { color: var(--red); }

.subtitulo,
p.subtitulo { color: var(--muted); font-size: 14px; margin-bottom: 20px; }

.vazio { color: var(--muted); font-size: 14px; text-align: center; padding: 20px; }
.campo-alterado { color: #f59e0b; font-weight: 600; }

/* ---------- App shell: cabeçalho + navegação ---------- */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 32px;
    background: rgba(17, 17, 20, .82);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid rgba(224, 27, 27, .35);
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .8);
}

header h1 { 
    font-size: 20px; 
}

/* ADICIONE ESTE BLOCO PARA TRAVAR O TAMANHO DA LOGO */
header h1 img {
    height: 28px; /* Ajuste este valor se quiser a logo um pouco maior ou menor */
    width: auto;  /* Garante que a imagem não fique esticada/distorcida */
    display: block;
}

nav { display: flex; gap: 22px; flex-wrap: wrap; }

nav a {
    position: relative;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 2px;
    transition: color .2s;
}

nav a:hover { color: #fff; }
nav a.ativo { color: var(--red); font-weight: 600; }

nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 2px;
    width: 100%;
    background: var(--red);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}
nav a:hover::after,
nav a.ativo::after { transform: scaleX(1); }

/* Botão de contorno do cabeçalho (Sair) */
header button {
    background: transparent;
    border: 1px solid var(--red);
    color: var(--red);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all .2s;
}
header button:hover { background: var(--red); color: #fff; }

/* ---------- Conteúdo: layout por tipo de tela (via :has, sem tocar no HTML) ---------- */
main { padding: 32px; }

/* Formulários (novo/editar cliente e pós-venda, avaliação) — cartão centralizado */
main:has(.form-group),
main:has(.pergunta),
main:has(.notas) {
    max-width: 620px;
    margin: 40px auto;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Histórico do cliente — coluna centralizada mais larga */
main:has(.card-cliente) { max-width: 860px; margin: 0 auto; }

/* Importar — coluna centralizada estreita */
main:has(.upload-area) { max-width: 620px; margin: 0 auto; }

/* ---------- Cartões / painéis ---------- */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.card,
.secao,
.card-cliente,
.historico {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
}

.card {
    border-left: 4px solid var(--red);
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.card h3 {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.card p { color: #fff; font-size: 36px; font-weight: 700; }

.secao { margin-bottom: 24px; }
.secao h3 { font-size: 16px; color: var(--red); margin-bottom: 16px; }

.card-cliente { border-left: 4px solid var(--red); margin-bottom: 24px; }
.card-cliente h2 { font-size: 20px; margin-bottom: 16px; }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.info-item label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }
.info-item span { font-size: 14px; color: var(--text); }

.historico { border-left: 4px solid var(--red); }
.historico h3 { color: var(--red); margin-bottom: 16px; }
.historico p { color: #ccc; font-size: 14px; margin-bottom: 8px; }
.historico span { color: #fff; font-weight: 600; }

.card-bloqueio {
    display: none;
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 24px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.card-bloqueio.sugestao { background: #2a1a00; border-left: 4px solid #f59e0b; }
.card-bloqueio.bloqueado { background: #2a0000; border-left: 4px solid var(--red); }
.card-bloqueio p { font-size: 14px; color: var(--text); }
.card-bloqueio button {
    border: none; border-radius: 8px; padding: 10px 18px;
    font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: all .2s;
}

/* ---------- Tabelas ---------- */
.table-container { overflow-x: auto; border-radius: var(--radius); }

table { width: 100%; min-width: 700px; border-collapse: collapse; table-layout: fixed; }

thead th {
    background: linear-gradient(180deg, #d81a1a 0%, #b81111 100%);
    color: #fff;
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

tbody tr { border-bottom: 1px solid var(--line); transition: background .15s ease; }
tbody tr:hover { background: rgba(224, 27, 27, .06); }
tbody td { padding: 12px 16px; font-size: 14px; color: #cccccc; word-break: break-word; }
tbody td:last-child { white-space: nowrap; }

/* ---------- Botões ---------- */
button { cursor: pointer; font-family: inherit; transition: all .18s ease; }

.btn-primario,
.btn-novo,
.btn-salvar,
.btn-bloquear,
.busca button,
button.enviar,
button.proximo,
button[type="submit"] {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 6px 18px -6px rgba(224, 27, 27, .55);
}
.btn-novo:hover,
.btn-salvar:hover,
.btn-bloquear:hover,
.busca button:hover,
button.enviar:hover,
button.proximo:hover,
button[type="submit"]:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(224, 27, 27, .7);
}
button[type="submit"]:active,
.btn-novo:active { transform: translateY(0); filter: brightness(.96); }

.btn-novo { padding: 10px 20px; font-size: 14px; }

/* Ajuste completo para botões de formulário/salvar/cadastrar */
.btn-salvar,
button[type="submit"] {
    display: inline-block;
    padding: 12px 28px;        /* Espaçamento interno amplo para o texto respirar */
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;       /* Cantos suavemente arredondados */
    margin-top: 20px;
    width: auto;               /* Garante que ele não estique a menos que esteja no login */
}

.busca button { padding: 12px 20px; font-size: 14px; }

/* Botões de ação em tabela / secundários (contorno) */
.btn-ver, .btn-editar, .btn-deletar, .btn-desbloquear {
    background: transparent;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid;
    transition: all .18s ease;
}
.btn-ver { border-color: var(--red); color: var(--red); }
.btn-ver:hover { background: var(--red); color: #fff; transform: translateY(-1px); }
.btn-editar { border-color: #38bdf8; color: #38bdf8; margin-left: 6px; }
.btn-editar:hover { background: #38bdf8; color: #0a0a0a; transform: translateY(-1px); }
.btn-deletar { border-color: #888; color: #888; margin-left: 6px; }
.btn-deletar:hover { border-color: var(--red); color: var(--red); transform: translateY(-1px); }
.btn-bloquear { background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); color: #fff; }
.btn-desbloquear { border-color: var(--red); color: var(--red); }
.btn-desbloquear:hover { background: var(--red); color: #fff; }

.btn-link-add {
    background: transparent; border: none; color: #38bdf8;
    font-size: 12px; cursor: pointer; font-weight: 600; text-decoration: underline;
}
.btn-link-add:hover { color: #7dd3fc; }

/* ---------- Formulários ---------- */
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.form-group { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.label-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }

input, select, textarea {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    padding: 12px 16px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
select { cursor: pointer; }
textarea { resize: vertical; min-height: 90px; }
input[type="date"] { color-scheme: dark; }
input[type="file"] { display: none; }

input:focus, select:focus, textarea:focus,
.input-wrapper:focus-within {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(224, 27, 27, .18);
}

/* Campos ocupam a largura toda dentro de formulários e das buscas */
main:has(.form-group) input,
main:has(.form-group) select,
main:has(.form-group) textarea,
main:has(.pergunta) input[type="text"],
main:has(.pergunta) textarea,
.form-group input,
.form-group select,
.form-group textarea { width: 100%; }

.filtros { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.busca { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 24px; }
.busca input { width: 250px; }

/* Foco visível por teclado (acessibilidade) */
/* Foco visível por teclado (acessibilidade) */
a:focus-visible, button:focus-visible {
    outline: 2px solid rgba(224, 27, 27, .7);
    outline-offset: 2px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
}
/* Container que coloca os botões lado a lado com um pequeno espaço */
.tipo-doc-toggle { 
    display: flex; 
    gap: 8px; 
    margin-bottom: 16px; 
}

/* Estilo base do botão (fundo escuro, borda discreta) */
.tipo-doc-btn {
    flex: 1; /* Faz os botões dividirem o espaço igualmente (50% cada) */
    padding: 10px; 
    background: var(--surface);
    border: 1px solid var(--line); 
    border-radius: 8px;
    color: var(--muted); 
    font-size: 13px; 
    cursor: pointer; 
    transition: all .2s ease;
}

/* Estilo do botão quando está selecionado (borda e texto vermelhos) */
.tipo-doc-btn.ativo { 
    border-color: var(--red); 
    color: var(--red); 
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { font-size: 12px; margin-bottom: 4px; }
.form-grid input, .form-grid textarea {
    width: 100%; padding: 10px 12px; background: var(--bg);
    border: 1px solid var(--line); border-radius: 8px; color: var(--text);
    font-size: 13px; font-family: inherit; outline: none;
}
.form-grid textarea { resize: vertical; min-height: 60px; }
.form-secao {
    grid-column: 1 / -1; font-size: 11px; color: var(--red);
    text-transform: uppercase; letter-spacing: 1px; margin-top: 8px; margin-bottom: -4px;
}

.cliente-info {
    display: none; margin-top: 8px; padding: 10px 14px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
    font-size: 13px; color: #ccc;
}
.cliente-info strong { color: var(--text); }

/* Autocomplete */
.autocomplete-wrapper { position: relative; }
.autocomplete-lista {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 10px; max-height: 220px; overflow-y: auto; z-index: 10;
    box-shadow: var(--shadow);
}
.autocomplete-item {
    padding: 10px 14px; cursor: pointer; font-size: 14px;
    color: var(--text); border-bottom: 1px solid #1a1a1a;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover,
.autocomplete-item.ativo { background: #24242b; }
.autocomplete-item span { display: block; font-size: 12px; color: var(--muted); }
.autocomplete-item-add {
    background: #1a1a2e; color: #38bdf8; font-weight: 600; border-top: 1px solid var(--line);
}
.autocomplete-item-add:hover { background: #252545; }

/* ---------- Importar ---------- */
.upload-area {
    border: 2px dashed var(--line); border-radius: 12px;
    padding: 40px 20px; cursor: pointer; transition: border-color .2s;
}
.upload-area:hover, .upload-area.dragover { border-color: var(--red); }
.upload-area p { margin: 0; }
button.enviar { width: 100%; padding: 14px; margin-top: 20px; font-size: 15px; border-radius: 10px; }
button.enviar:disabled { background: #2a2a2a; color: #555; cursor: not-allowed; box-shadow: none; filter: none; }
#nome-arquivo { color: #00cc66; font-size: 14px; margin-top: 12px; }
.card + .card { margin-top: 24px; }
#resultado-sincronizacao { color: var(--muted); font-size: 13px; margin-top: 16px; white-space: pre-line; }

/* ---------- Badges ---------- */
.badge {
    font-weight: 600; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; display: inline-block;
}
.badge-create { color: #00cc66; border: 1px solid #00cc66; }
.badge-update { color: #38bdf8; border: 1px solid #38bdf8; }
.badge-delete { color: var(--red); border: 1px solid var(--red); }

/* ---------- Spinner ---------- */
.spinner {
    width: 40px; height: 40px; border: 4px solid var(--line);
    border-top: 4px solid var(--red); border-radius: 50%;
    animation: spin .8s linear infinite; margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Modais ---------- */
.modal-fundo {
    display: none; position: fixed; inset: 0; z-index: 100;
    background: rgba(0, 0, 0, .7); align-items: center; justify-content: center; padding: 24px;
}
.modal-fundo.ativo { display: flex; }
.modal-caixa {
    background: var(--surface); border: 1px solid var(--line);
    border-top: 3px solid var(--red); border-radius: var(--radius);
    max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 24px;
    box-shadow: var(--shadow-lg);
}
.modal-caixa h3 { font-size: 17px; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.modal-caixa .subtitulo { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.modal-caixa table { min-width: 0; border-spacing: 0; }
.modal-caixa thead th { background: #1a1a1a; color: var(--muted); font-size: 11px; }
.modal-caixa tbody td { font-size: 13px; padding: 10px 16px; }
.modal-caixa tbody tr:nth-child(even) { background: #111113; }
.modal-caixa textarea {
    width: 100%; min-height: 100px; padding: 12px 14px; background: var(--bg);
    border: 1px solid var(--line); border-radius: 8px; color: var(--text);
    font-size: 14px; font-family: inherit; resize: vertical; outline: none;
}
.modal-fechar {
    float: right; background: transparent; border: none; color: var(--muted);
    font-size: 20px; cursor: pointer; line-height: 1;
}
.modal-fechar:hover { color: var(--red); }
.modal-secao { margin-bottom: 20px; }
.modal-secao h4 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.comentario-item {
    background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
    padding: 12px 14px; margin-bottom: 8px; font-size: 13px; color: #ccc;
}
.comentario-item .data { color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.comentario-item p { margin-bottom: 6px; }
.comentario-item p:last-child { margin-bottom: 0; }

/* ---------- Formulário de avaliação (fluxo por etapas) ---------- */
.progresso { display: flex; gap: 6px; margin-bottom: 28px; }
.progresso .bola { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background .2s; }
.progresso .bola.ativa { background: var(--red); }

.etapa { display: none; }
.etapa.ativa { display: block; }

.pergunta { margin-bottom: 24px; }
.pergunta label { display: block; font-size: 14px; color: var(--text); margin-bottom: 12px; line-height: 1.5; }
.pergunta .categoria {
    display: inline-block; background: #2a0a0a; color: #ff6b6b;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    padding: 3px 10px; border-radius: 4px; margin-bottom: 8px;
}

.notas { display: flex; gap: 8px; flex-wrap: wrap; }
.nota {
    width: 48px; height: 48px; border-radius: 8px; border: 2px solid var(--line);
    background: transparent; color: var(--text); font-size: 16px; font-weight: 600;
    cursor: pointer; transition: all .2s;
}
.nota:hover { border-color: var(--red); color: var(--red); }
.nota.selecionada { background: var(--red); border-color: var(--red); color: #fff; }
.nota-texto { width: auto; padding: 0 16px; font-size: 14px; }
.notas.faltando { border: 2px solid var(--red); border-radius: 8px; padding: 8px; animation: piscar 1s ease-in-out 2; }
@keyframes piscar { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 4px rgba(204, 0, 0, .4); } }
.legenda { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 8px; }

.botoes { display: flex; justify-content: space-between; margin-top: 32px; gap: 12px; }
button.nav { flex: 1; padding: 14px; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
button.anterior { background: transparent; border: 1px solid var(--line); color: var(--muted); }
button.anterior:hover { border-color: var(--red); color: var(--red); }

#agradecimento { display: none; text-align: center; padding: 40px; }
#agradecimento h2 { color: #00cc66; margin-bottom: 12px; }
#agradecimento p { color: var(--muted); }

/* ---------- Login / Registro (tela dividida) ---------- */
body:has(.lado-esquerdo) {
    display: flex;
    height: 100vh;
    min-height: auto;
    overflow: hidden;
    background: var(--bg);
}
.lado-esquerdo { width: 40%; position: relative; overflow: hidden; flex-shrink: 0; }
.lado-esquerdo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lado-esquerdo .overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, .85) 100%); }
.lado-esquerdo .marca { position: absolute; bottom: 32px; left: 32px; }
.lado-esquerdo .marca .linha { width: 36px; height: 4px; background: var(--red); border-radius: 2px; margin-bottom: 12px; }
.lado-esquerdo .marca h2 { color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.lado-esquerdo .marca p { color: var(--muted); font-size: 13px; }

.lado-direito {
    width: 60%; background: var(--bg);
    display: flex; justify-content: center; align-items: center; padding: 40px;
}
.login-container { width: 100%; max-width: 380px; }
.login-container h1 { margin-bottom: 8px; }
.login-container .subtitulo { margin-bottom: 32px; }

.input-wrapper {
    display: flex; align-items: center; background: var(--surface);
    border: 1px solid var(--line); border-radius: 10px; padding: 0 16px;
    height: 50px; gap: 10px; margin-bottom: 14px; transition: border-color .2s;
}
.input-wrapper i { color: #555; font-size: 18px; }
.input-wrapper input {
    background: transparent; border: none; outline: none; color: var(--text);
    font-size: 14px; width: 100%; padding: 0; margin: 0;
}
.login-container button {
    width: 100%; padding: 14px; margin-top: 8px;
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600;
    cursor: pointer; box-shadow: 0 6px 18px -6px rgba(224, 27, 27, .55); transition: all .18s ease;
}

.login-container button:hover { filter: brightness(1.08); transform: translateY(-1px); }

#erro-login, #erro-registro { color: #f87171; font-size: 13px; margin-top: 12px; text-align: center; }
.link-registro, .link-login { color: var(--muted); font-size: 13px; text-align: center; margin-top: 20px; }
.link-registro a, .link-login a { color: var(--red); text-decoration: none; font-weight: 600; }
.link-registro a:hover, .link-login a:hover { text-decoration: underline; }

/* =========================================================================
   Responsivo
   ========================================================================= */
@media (max-width: 900px) {
    header { flex-wrap: wrap; row-gap: 12px; padding: 16px 20px; }
    nav { order: 3; width: 100%; flex-wrap: wrap; row-gap: 10px; }
    main { padding: 20px; }
}

@media (max-width: 1000px) {
    .form-row,
    .info-grid,
    .form-grid,
    .grid-2col { grid-template-columns: 1fr; }

    /* Tabelas de Clientes/Pós-venda/Histórico viram cartões empilhados.
       Cada <td> usa data-label como rótulo do campo. */
    .table-container table,
    .secao table { min-width: 0; }

    .table-container table, .table-container thead, .table-container tbody,
    .table-container th, .table-container td, .table-container tr,
    .secao table, .secao thead, .secao tbody,
    .secao th, .secao td, .secao tr { display: block; }

    .table-container thead tr,
    .secao thead tr {
        position: absolute; width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }

    .table-container tbody tr,
    .secao tbody tr {
        margin-bottom: 14px; background: var(--surface);
        border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
    }

    .table-container td,
    .secao td {
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
        text-align: right; border-bottom: 1px solid #1f1f1f; white-space: normal;
    }

    .table-container tr:last-child td:last-child,
    .secao tr:last-child td:last-child,
    .table-container td:last-child,
    .secao td:last-child { border-bottom: none; }

    .table-container td::before,
    .secao td::before {
        content: attr(data-label); font-weight: 600; color: var(--muted);
        text-align: left; flex-shrink: 0;
    }

    .table-container td[data-label="Ações"],
    .secao td[data-label="Ações"] { flex-wrap: wrap; justify-content: flex-end; }
}