/*
 * Checklist ESEN — protótipo (Etapa A)
 * telas/configuracoes.css — #/configuracoes (js/telas/configuracoes.js)
 * Use só tokens de css/base.css e classes de css/componentes.css e css/layout.css (ver docs/contrato.md).
 * Prefixo das classes próprias desta tela: .config-
 */

/* Título do detalhe do modelo (ícone do tipo + nome) */
.config-titulo { display: flex; align-items: center; gap: var(--esp-3); }
.config-titulo > .icone { flex: none; width: 24px; height: 24px; color: var(--cor-texto-2); }
.config-titulo > span { min-width: 0; }

/* Modelo / tipo com ícone na primeira coluna */
.config-modelo, .config-tipo { display: inline-flex; align-items: center; gap: var(--esp-3); max-width: 100%; min-width: 0; color: inherit; text-decoration: none; vertical-align: middle; }
.config-modelo > .icone, .config-tipo > .icone { flex: none; color: var(--cor-texto-2); }
.config-modelo:hover > .celula-dupla > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.config-tipo > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Lista de modelos */
.config-tabela-modelos .config-col-versao { width: 80px; }
.config-tabela-modelos .config-col-conteudo { width: 200px; }
.config-tabela-modelos .config-col-fotos { width: 140px; }
.config-tabela-modelos .config-col-validacao { width: 240px; }
.config-tabela-modelos .config-col-uso { width: 88px; }
.config-tabela-modelos .config-col-acoes { width: 52px; }

/* Células com texto longo quebram linha (".tabela td" é mais específico que ".tabela__quebrar") */
.config td.tabela__quebrar { white-space: normal; overflow: visible; text-overflow: clip; }

/* Itens do modelo: linhas de altura livre (texto quebra) */
.config-tabela-itens .config-col-num { width: 64px; }
.config-tabela-itens .config-col-resposta { width: 26%; }
.config-tabela-itens .config-col-regras { width: 24%; }
.config-tabela-itens tbody td { height: auto; padding-top: var(--esp-3); padding-bottom: var(--esp-3); vertical-align: top; }
.config-num { color: var(--cor-texto-2); }
.config-item { min-width: 0; }
.config-item__texto { display: block; color: var(--cor-texto); }
.config-item__ajuda { display: block; margin-top: 2px; font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); }
.config-regras { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); color: var(--cor-texto-2); }
.config-regras__obrigatorio { font-weight: var(--peso-forte); color: var(--cor-texto); }

/* Tipos de serviço */
.config-tabela-tipos .config-col-tipo { width: 300px; }
.config-tabela-tipos .config-col-modelo { width: 104px; }
.config-tabela-tipos .config-col-validacao { width: 264px; }
.config-tabela-tipos .config-col-uso2 { width: 136px; }
.config-tabela-tipos tbody td { height: auto; padding-top: var(--esp-3); padding-bottom: var(--esp-3); }
.config-uso-sec { display: block; font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); }

/* Fotografias por modelo */
.config-tabela-fotos .config-col-tipo-curto { width: 180px; }
.config-tabela-fotos tbody td { height: auto; padding-top: var(--esp-3); padding-bottom: var(--esp-3); vertical-align: top; }
.config-foto-min { display: block; font-weight: var(--peso-forte); color: var(--cor-texto); }
.config-foto-orient { display: block; margin-top: 2px; font-size: var(--fs-rotulo); line-height: 18px; color: var(--cor-texto-2); }

@media (max-width: 1023px) {
  .config-item__ajuda { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .config-regras { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .config-foto-orient { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .config-tabela-itens tbody td, .config-tabela-tipos tbody td, .config-tabela-fotos tbody td { padding: 0; }
}

/* Etapas do manual */
.config-etapas { gap: var(--esp-3); }
.config-etapa { padding: var(--esp-4) var(--esp-5); background: var(--cor-superficie); border: var(--borda-largura) solid var(--cor-borda); border-radius: var(--raio-2); }
.config-etapa--critica { border-left: var(--borda-marcador) solid var(--cor-perigo); }
.config-etapa__cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.config-etapa__id { color: var(--cor-texto-2); }
.config-etapa__titulo { font-size: var(--fs-corpo); font-weight: var(--peso-forte); margin: 0; }
.config-etapa__chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-left: auto; }
.config-etapa__dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3) var(--esp-5); margin: var(--esp-3) 0 0; }
.config-etapa__dados dt { font-size: var(--fs-legenda); font-weight: var(--peso-forte); color: var(--cor-texto-3); }
.config-etapa__dados dd { margin: 2px 0 0; color: var(--cor-texto); overflow-wrap: anywhere; }
.config-fontes { margin: 0; padding: 0; list-style: none; }
.config-sg { margin: 0; padding: 0; list-style: none; }
.config-sg__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--esp-3); padding: var(--esp-3) var(--esp-5); border-bottom: var(--borda-largura) solid var(--cor-borda-sutil); }
.config-sg__item--na { opacity: .7; }
.config-sg__titulo { font-weight: var(--peso-forte); margin: 0; }
@media (max-width: 1023px) { .config-etapa { padding: var(--esp-4); } .config-etapa__dados { grid-template-columns: minmax(0, 1fr); } .config-etapa__chips { margin-left: 0; } .config-sg__item { padding: var(--esp-3) var(--esp-4); } }