/* dicode.ai — Excel para CSV (/excel-para-csv): o visual é o comum das páginas de CSV (_csv.css).
   Tela: assets/js/ferramentas/telas/excel-para-csv.js; opções: templates/ferramentas/excel-para-csv.html. */
/* dicode.ai — visual comum de Consertar CSV e Excel para CSV (importado por consertar-csv.css e
   excel-para-csv.css). Só os tokens do design system, cantos retos, sem sombra nem gradiente,
   linhas de 1px, alvos de toque de 44px. A tabela e o texto cru rolam para o lado dentro da
   própria caixa (a página nunca rola para o lado). */

.csv { display: grid; gap: 20px; min-width: 0; }
.csv-estado { margin: 0; font-family: var(--fonte-mono); font-size: 13px; color: var(--cinza); }
.csv-estado:empty { display: none; }
.csv-diagnostico { display: grid; gap: 20px; min-width: 0; }
.csv-diagnostico[hidden] { display: none; }

/* Faixa "o que a ferramenta achou": rótulo em mono, valor em negrito, Mudar sublinhado */
.csv-faixa {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  border-top: 1px solid var(--preto);
}
.csv-faixa dt, .csv-faixa dd {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  min-height: 44px;
}
.csv-faixa dt { padding-right: 20px; font-family: var(--fonte-mono); font-size: 13px; color: var(--cinza); }
.csv-faixa dd { flex-wrap: wrap; gap: 4px 12px; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.csv-mudar, .csv-aviso-botao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.csv-mudar { font-weight: 500; }

.csv-avisos, .csv-perguntas { display: grid; gap: 12px; min-width: 0; }
.csv-avisos:empty, .csv-perguntas:empty { display: none; }
.csv-aviso { flex-wrap: wrap; margin: 0; }
.csv-aviso-texto { flex: 1 1 260px; }
.csv-pergunta { padding: 16px 20px; border: 1px solid var(--preto); }
.csv-pergunta > legend { float: left; width: 100%; margin: 0 0 10px; color: var(--preto); font-family: var(--fonte); font-size: 16px; font-weight: 600; }
.csv-opcao { align-items: flex-start; padding: 10px 0; }
.csv-opcao input { margin-top: 3px; }

/* Prévia em colunas: altura máxima fixa, rola nos dois sentidos dentro da caixa */
.csv-previa-bloco { display: grid; gap: 8px; min-width: 0; }
.csv-previa-titulo, .csv-previa-rodape { margin: 0; }
.csv-previa {
  max-height: 420px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--preto);
  background: var(--branco);
}
.csv-previa:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }
.csv-tabela { border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.csv-tabela th, .csv-tabela td {
  padding: 8px 14px 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linha);
  border-right: 1px solid var(--linha);
  max-width: 22em;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.csv-tabela td, .csv-tabela th { min-width: 8em; }
.csv-tabela th {
  position: sticky;
  top: 0;
  background: var(--superficie);
  border-bottom: 1px solid var(--preto);
  font-weight: 600;
}
.csv-th-nome { display: block; }
.csv-th-tipo { display: block; font-family: var(--fonte-mono); font-size: 12px; font-weight: 400; color: var(--cinza); }

/* Revisar colunas */
.csv-colunas { display: grid; gap: 14px; min-width: 0; }
.csv-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}
.csv-col-nome { font-weight: 600; overflow-wrap: anywhere; }
.csv-col-ex { overflow-wrap: anywhere; }
@media (min-width: 720px) {
  .csv-col { grid-template-columns: minmax(0, 12em) minmax(0, 20em) minmax(0, 1fr); align-items: center; }
}

/* Campos do CSV de saída (_csv-saida.html) */
.csv-saida { display: grid; gap: 12px; min-width: 0; }
.csv-grade { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .csv-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Texto cru do CSV, como o sistema vai ler (Excel para CSV) */
.csv-cru {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px 14px;
  border: 1px solid var(--preto);
  background: var(--superficie);
  font-family: var(--fonte-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
  tab-size: 6;
}
.csv-cru:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }

.xcsv-aba { max-width: 480px; }