/* Triagem de erros no mundo do carnê: visões na lombada da folha, lista de canhotos com
   carimbos e sparkline, ficha do grupo com ações e linha do tempo. Tudo sob .em. */
.wrap.em-wrap { max-width: 1320px; }
.em { color: var(--tinta); container: em / inline-size; }
.em * { box-sizing: border-box; }
.em-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.em button, .em input, .em select, .em textarea { font: inherit; }
.em :focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.em a { color: var(--acao); text-underline-offset: 3px; }

/* Cabeçalho e preferências */
.em-head { display: flex; align-items: end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.em-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.em-head p { color: var(--tinta-3); margin: 6px 0 0; font-size: 14.5px; max-width: 62ch; }
.em-head-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.em-prefs { margin: 16px 0 0; padding: 16px 20px; background: var(--folha); border: 1px solid var(--filete); border-radius: var(--raio); }
.em-prefs h2 { margin: 0; font-size: 16.5px; font-weight: 800; }
.em-prefs-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 20px; margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--filete); }
.em-pref { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 14px; cursor: pointer; }
.em-pref input { width: 18px; height: 18px; accent-color: var(--acao); margin: 0; }
.em-nota { color: var(--tinta-3); font-size: 13px; margin: 4px 0 0; }

/* Botões */
.em-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--filete-forte); border-radius: var(--raio);
  background: var(--folha); color: var(--tinta);
  font-size: 14px !important; font-weight: 650 !important; line-height: 1.2;
  cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.em-btn:hover { background: var(--folha-2); border-color: var(--tinta-2); }
.em-btn:active { transform: translateY(1px); }
.em-btn:disabled { opacity: 0.55; cursor: wait; }
.em-btn-primario { background: var(--acao); border-color: var(--acao); color: #fff; }
.em-btn-primario:hover { background: var(--acao-hover); border-color: var(--acao-hover); }
.em-btn-ghost { border-color: transparent; background: transparent; }
.em-btn-ghost:hover { background: var(--folha-2); border-color: var(--filete); }
.em-kbd { display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--filete-forte); border-radius: 3px; background: var(--folha-2); color: var(--tinta-2); font: 600 12px/18px var(--mono); text-align: center; }
.em-btn-primario .em-kbd { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.em-caret { flex: none; margin-left: 1px; }

/* Área de trabalho: visões | lista | detalhe */
.em-workspace {
  display: grid; grid-template-columns: 196px minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 20px; background: var(--folha); border: 1px solid var(--filete); border-radius: var(--raio); min-height: 600px;
}
.em-visoes { padding: 12px 10px 16px; background: var(--folha-2); border-right: 1.5px dashed var(--filete-forte); border-radius: var(--raio) 0 0 var(--raio); }
.em-visoes-bloco { margin: 10px 8px 6px; font-size: 12.5px; font-weight: 700; color: var(--tinta-3); }
.em-visoes-bloco:first-child { margin-top: 2px; }
.em-visao {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 36px; padding: 6px 9px; border-radius: var(--raio-sm);
  color: var(--tinta-2) !important; text-decoration: none; font-size: 14px; font-weight: 600;
}
.em-visao:hover { background: var(--folha); color: var(--tinta) !important; }
.em-visao.is-on { background: var(--acao-fundo); color: var(--tinta) !important; font-weight: 800; }
.em-conta { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--neutro-fundo); color: var(--tinta-2); font-size: 12.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.em-conta.is-urgente { background: var(--erro); color: #fff; }

.em-lista { min-width: 0; border-right: 2px dashed var(--filete-forte); }
.em-filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; border-bottom: 1.5px dashed var(--filete); }
.em-campo { display: block; margin: 0; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--tinta-2); }
.em-campo span { display: block; margin-bottom: 4px; }
.em-campo select, .em-campo input { width: 100%; min-height: 36px; }
.em-busca { grid-column: 1 / -1; }
.em-lista-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1.5px dashed var(--filete); background: var(--folha-2); }
.em-lista-head h2 { margin: 0; font-size: 16.5px; font-weight: 800; }
.em-lista-head > span { margin-left: auto; color: var(--tinta-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.em-todos { display: inline-flex; margin: 0; }
.em input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--acao); cursor: pointer; }

/* Linha (canhoto) */
.em-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 16px; border-bottom: 1.5px dashed var(--filete); transition: background-color 0.15s var(--ease); }
.em-item:hover { background: #f3f8f4; }
.em-item.is-marcado { background: var(--folha-2); }
.em-item.is-ativo { background: var(--acao-fundo); }
.em-item > input { margin-top: 3px !important; }
.em-item-link { display: grid; grid-template-columns: minmax(0, 1fr) 34px 46px 26px; gap: 10px; align-items: center; color: inherit !important; text-decoration: none; border-radius: var(--raio-sm); }
.em-item-link:hover .em-item-titulo { text-decoration: underline; text-underline-offset: 3px; }
.em-item-main { min-width: 0; }
.em-selos { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.em-tempo { color: var(--tinta-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.em-item-titulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 3px; font-size: 14px; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
.em-item-sub { display: block; overflow: hidden; color: var(--tinta-3); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.em-item-total { color: var(--tinta); font-size: 13.5px; font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
.em-spark { display: block; }
.em-spark rect { fill: var(--filete-forte); }
.em-spark rect.em-spark-zero { fill: var(--filete); }
.is-quente .em-spark rect { fill: var(--alerta-borda); }
.is-quente .em-spark rect.em-spark-zero { fill: var(--filete); }
.em-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--lombada); color: #fff; font-size: 12px; font-weight: 800; }
.em-avatar.is-vazio { background: transparent; border: 1.5px dashed var(--filete-forte); }
.em-mais { width: calc(100% - 32px); justify-content: center; margin: 16px; }
.em-vazio { padding: 48px 22px; text-align: center; color: var(--tinta-3); }
.em-vazio h3 { margin: 0 0 6px; color: var(--tinta); font-size: 16px; }
.em-vazio p { max-width: 36ch; margin: 0 auto; line-height: 1.5; }

/* Carimbos */
.em-selo {
  display: inline-flex; align-items: center; padding: 1px 7px;
  border: 1.5px solid currentColor; border-radius: var(--raio-sm);
  font-size: 12px; font-weight: 800; line-height: 1.35; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  color: var(--erro); background: var(--erro-fundo);
}
.em-selo-regressao { color: #fff; background: var(--erro); border-color: var(--erro); box-shadow: inset 0 0 0 1px #fff; }
.em-selo-andamento { color: var(--alerta); background: var(--alerta-fundo); border-style: dashed; border-color: var(--alerta-borda); }
.em-selo-pico { color: var(--alerta); background: var(--alerta-fundo); border-color: var(--alerta); }
.em-selo-deploy { color: var(--pago); background: var(--pago-fundo); border-style: dashed; }
.em-selo-verificando { color: var(--pago); background: var(--pago-fundo); }
.em-selo-resolvido { color: #fff; background: var(--pago); border-color: var(--pago); box-shadow: inset 0 0 0 1px #fff; }
.em-selo-silenciado { color: var(--neutro); background: var(--neutro-fundo); }
.em-selo-info { color: var(--tinta-2); background: var(--folha-2); border-color: var(--filete-forte); }

/* Detalhe */
.em-detalhe { min-width: 0; padding: 20px 24px 32px; }
.em-detalhe-vazio { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--tinta-3); }
.em-detalhe-vazio h2 { margin: 0 0 6px; color: var(--tinta); font-size: 19px; font-weight: 800; }
.em-detalhe-vazio p { max-width: 32ch; margin: 0; line-height: 1.6; }
.em-det-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.em-fechar { font-size: 13.5px; font-weight: 700; }
.em-detalhe h2#em-det-titulo { margin: 10px 0 6px; font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; overflow-wrap: anywhere; scroll-margin-top: 80px; }
.em-det-meta { margin: 0; color: var(--tinta-3); font-size: 13px; overflow-wrap: anywhere; }
.em-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; padding: 14px 0; border-top: 1.5px dashed var(--filete); border-bottom: 1.5px dashed var(--filete); }
.em-menu-wrap { position: relative; }
.em-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 260px; max-width: min(320px, 86vw);
  max-height: 340px; overflow-y: auto; padding: 4px;
  background: var(--folha); border: 1px solid var(--filete-forte); border-radius: var(--raio);
  box-shadow: 0 12px 28px -14px rgba(14, 33, 25, 0.4);
}
.em-menu[hidden] { display: none; }
.em-menu-item { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--raio-sm); background: transparent; color: var(--tinta); text-align: left; cursor: pointer; }
.em-menu-item > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 650; }
.em-menu-item small { display: block; margin-top: 2px; color: var(--tinta-3); font-size: 12.5px; line-height: 1.4; }
.em-menu-item:hover, .em-menu-item:focus-visible { background: var(--acao-fundo); outline-offset: -2px; }
.em-menu-item:disabled { color: var(--tinta-3); cursor: default; background: transparent; }

.em-caixa { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--filete); border-radius: var(--raio-sm); background: var(--folha-2); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.em-caixa-erro { background: var(--erro-fundo); border-color: rgba(179, 38, 30, 0.38); }
.em-caixa-erro b { color: var(--erro); }
.em-caixa-alerta { background: var(--alerta-fundo); border-style: dashed; border-color: var(--alerta-borda); }
.em-caixa-pago { background: var(--pago-fundo); border-color: rgba(29, 79, 156, 0.3); }
.em-sintomas { margin: 6px 0 0; padding-left: 18px; }
.em-sintomas li { padding: 2px 0; }
.em-sintomas span { color: var(--tinta-3); font-size: 12.5px; }

.em-detalhe h3 { margin: 22px 0 10px; font-size: 16px; font-weight: 800; }
.em-impacto { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0; margin: 0; border: 1px solid var(--filete); border-radius: var(--raio-sm); background-color: var(--seguranca); background-image: var(--guilhoche-img); background-size: 160px 28px; }
.em-impacto div { min-width: 0; padding: 10px 12px; border-left: 1.5px dashed var(--filete-forte); }
.em-impacto div:first-child { border-left: 0; }
.em-impacto dt { color: var(--tinta-2); font-size: 12.5px; font-weight: 700; }
.em-impacto dd { margin: 3px 0 0; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.em-impacto small { display: block; margin-top: 2px; color: var(--tinta-2); font-size: 12px; font-weight: 500; }

.em-comentar { display: grid; gap: 6px; }
.em-comentar label { font-size: 12.5px; font-weight: 700; color: var(--tinta-2); display: flex; align-items: center; gap: 6px; }
.em-comentar textarea { width: 100%; min-height: 64px; padding: 8px 11px; border: 1px solid var(--filete-forte); border-radius: var(--raio-sm); background: var(--folha); color: var(--tinta); resize: vertical; font-size: 14px; line-height: 1.45; }
.em-comentar textarea:focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 3px rgba(23, 96, 63, 0.18); }
.em-comentar-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.em-comentar-pe .em-nota { margin: 0; font-variant-numeric: tabular-nums; }
.em-tempo-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.em-tempo-lista li { padding: 10px 0; border-top: 1.5px dashed var(--filete); }
.em-tempo-meta { display: block; color: var(--tinta-3); font-size: 12.5px; }
.em-tempo-meta b { color: var(--tinta-2); }
.em-tempo-lista p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.em-tempo-lista .em-comentario-texto { padding: 8px 10px; background: var(--folha-2); border: 1px solid var(--filete); border-radius: var(--raio-sm); white-space: pre-wrap; }

.em-ocorrencia { border-top: 1.5px dashed var(--filete); }
.em-ocorrencia:last-of-type { border-bottom: 1.5px dashed var(--filete); }
.em-ocorrencia summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 1px; color: var(--tinta-2); font-size: 13.5px; cursor: pointer; list-style: none; font-variant-numeric: tabular-nums; }
.em-ocorrencia summary::-webkit-details-marker { display: none; }
.em-ocorrencia summary:after { content: '+'; margin-left: 6px; color: var(--acao); font: 700 18px/1 var(--font); }
.em-ocorrencia[open] summary:after { content: '\2212'; }
.em-ocorrencia summary b { margin-left: auto; color: var(--tinta); font-weight: 750; }
.em-ocorrencia dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.em-ocorrencia dt { color: var(--tinta-3); font-size: 12px; font-weight: 700; }
.em-ocorrencia dd { margin: 3px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }
.em-ocorrencia pre { max-height: 380px; overflow: auto; padding: 14px; border-radius: var(--raio); background: var(--lombada); color: #dcefe3; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.em-trilha { padding-top: 10px; border-top: 1px dashed var(--filete); color: var(--tinta-2); font-size: 13px; }
.em-trilha ol { margin: 6px 0 12px; padding-left: 20px; }
.em-trilha li { padding: 2px 0; overflow-wrap: anywhere; }

/* Barra de lote (flutua sobre a página) */
.em-lote {
  position: sticky; bottom: 14px; z-index: 25; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px; padding: 10px 14px; border-radius: var(--raio);
  background: var(--lombada); color: #fff; box-shadow: 0 14px 30px -16px rgba(14, 33, 25, 0.6);
}
.em-lote-conta { margin-right: auto; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.em-lote .em-btn-ghost { color: #fff; }
.em-lote .em-btn-ghost:hover { background: var(--lombada-2); border-color: var(--lombada-3); }
.em-lote :focus-visible { outline-color: #fff; }
.em-lote .em-menu { top: auto; bottom: calc(100% + 6px); }
.em-lote .em-menu-item:focus-visible { outline-color: var(--acao); }
.em-rodape { margin: 14px 0 0; color: var(--tinta-3); font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) { .em-item, .em-btn { transition: none; } .em-btn:active { transform: none; } }

/* Painel estreito (até 1120 px de largura útil): visões viram seletor horizontal acima da lista. */
@container em (max-width: 1120px) {
  .em-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .em-visoes { grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; border-right: 0; border-bottom: 1.5px dashed var(--filete-forte); border-radius: var(--raio) var(--raio) 0 0; scrollbar-width: thin; }
  .em-visoes-bloco { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .em-visao { flex: none; min-height: 36px; border: 1px solid var(--filete); background: var(--folha); white-space: nowrap; }
  .em-visao.is-on { border-color: var(--acao); }
  .em-detalhe { padding: 20px; }
}
@media (max-width: 740px) {
  .em-workspace { display: flex; flex-direction: column; }
  .em-lista { border-right: 0; border-bottom: 2px dashed var(--filete-forte); }
  .em-detalhe-vazio { display: none; }
  .em-detalhe-vazio.is-aviso { display: flex; }
  .em-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .em-item { padding: 10px 12px; }
  .em-lista-head { padding: 12px; }
  .em-item-link { grid-template-columns: minmax(0, 1fr) 34px 40px 26px; gap: 8px; }
  .em-btn .em-kbd, .em-menu-item .em-kbd, .em-comentar .em-kbd, #em-atalhos { display: none; }
  .em-detalhe { padding: 18px 14px 26px; }
  .em-ocorrencia dl { grid-template-columns: 1fr; }
  .em-lote { bottom: 8px; }
}
@media (max-width: 440px) {
  .em-filtros { grid-template-columns: 1fr; }
  .em-item-link { grid-template-columns: minmax(0, 1fr) 40px 26px; }
  .em-item-spark { display: none; }
}