/* Botoes */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 8px 14px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda);
  background: var(--branco);
  color: var(--texto);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--fundo); }

.btn-primary {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--texto-sobre-cor-primaria);
  font-weight: 600;
}
.btn-primary:hover { background: var(--cor-primaria-hover); border-color: var(--cor-primaria-hover); color: var(--texto-sobre-cor-primaria); }

.btn-sm { height: 32px; padding: 6px 10px; font-size: 12px; }

.btn-perigo { color: var(--erro); border-color: rgba(231, 76, 60, 0.4); }
.btn-perigo:hover { background: rgba(231, 76, 60, 0.1); }

/* Padrao_Convite_de_Acesso: card por convite aberto, nunca linha de tabela */
.convites-lista { display: flex; flex-direction: column; gap: 10px; }
.convite-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}
.convite-card-meta { color: var(--texto-secundario); font-size: 12px; margin-top: 2px; }
.convite-card-acoes { display: flex; gap: 8px; flex-shrink: 0; }
.convite-card-acoes form { display: inline-flex; align-items: center; }

@media (max-width: 720px) {
  .btn { min-height: 44px; padding: 11px 16px; }
}

/* Pagina de erro (standalone) */
.pagina-erro {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-5);
}
.pagina-erro-icone { font-size: 48px; color: var(--erro); }
.pagina-erro-icone.icone-neutro { color: var(--texto-fraco); }

/* Pagina de login (standalone) */
.pagina-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: var(--fundo);
}
.card-auth {
  width: 100%;
  max-width: 360px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}
.auth-marca { font-family: var(--font-titulo); font-weight: 700; font-size: var(--fs-xl); color: var(--cor-primaria-texto); }
.auth-sub { font-size: var(--fs-sm); color: var(--texto-fraco); margin: 0 0 var(--sp-5); }

.alerta { border-radius: var(--raio-sm); padding: var(--sp-3); font-size: var(--fs-sm); margin-bottom: var(--sp-4); text-align: left; }
.alerta-erro { background: rgba(231, 76, 60, 0.1); color: var(--erro); border: 1px solid rgba(231, 76, 60, 0.3); }
.alerta-info { background: rgba(241, 196, 15, 0.12); color: #8a6d00; border: 1px solid rgba(241, 196, 15, 0.35); }

.form-group { text-align: left; margin-bottom: var(--sp-4); }
.form-label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--texto-secundario); margin-bottom: var(--sp-1); }
.form-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font-size: var(--fs-base);
  font-family: var(--font);
  color: var(--texto);
  background: var(--branco);
}
.form-input:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px var(--cor-primaria-soft); }

.btn-auth-submit { width: 100%; justify-content: center; height: 44px; margin-top: var(--sp-2); }

/* Card generico de conteudo (Fase 3+) */
.card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.card:last-child { margin-bottom: 0; }
.card h3 { margin: 0 0 var(--sp-4); font-size: var(--fs-lg); }
.card-estreita { max-width: 480px; }
.card-media { max-width: 560px; }
.card-auth-media { max-width: 420px; }
.card-larga { max-width: 900px; }

/* Breadcrumb (Empresa > Macroprocesso > Processo > Atividade) */
.migalhas { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.migalhas a { color: var(--texto-secundario); text-decoration: none; }
.migalhas a:hover { color: var(--cor-primaria); text-decoration: underline; }
.migalhas i { color: var(--texto-fraco); font-size: 12px; }
.migalha-atual { color: var(--texto); font-weight: 600; }

/* Padrao_Tabs: sublinhado, nunca pilula (isso e Padrao_Toggle_Tipos) */
.pc-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--borda); margin-bottom: var(--sp-4); }
.pc-tab {
  padding: 10px 16px; font-size: var(--fs-sm); font-weight: 600;
  color: var(--texto-secundario); cursor: pointer; border: none; background: transparent;
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
}
.pc-tab:hover { color: var(--texto); }
.pc-tab.ativo { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }
.pc-pane { display: none; }
.pc-pane.ativo { display: block; }

/* Blocos de cadastro da atividade: cada bloco e um card com salvamento
   proprio (Padrao_Loading_Estado adaptado a salvamento inline, sem redirect) */
.bloco-card { position: relative; }
.bloco-card .form-group:last-child { margin-bottom: 0; }
.bloco-salvo { font-size: var(--fs-xs); color: var(--sucesso); margin-left: var(--sp-2); opacity: 0; transition: opacity .2s; }
.bloco-salvo.visivel { opacity: 1; }

/* Padrao_Toggle_Tipos, tipo 1 (multi opcoes): filtro de nivel na listagem de
   processos. Suave com borda no selecionado, nunca solido (isso e tipo 2). */
.pr-presets {
  display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap;
  min-height: 38px; padding: 3px; border: 1px solid var(--borda);
  border-radius: var(--raio-sm); background: var(--branco); margin-bottom: var(--sp-4);
}
.pr-presets button {
  height: 30px; border: 1px solid transparent; background: var(--branco);
  border-radius: 5px; padding: 0 12px; font-size: var(--fs-sm); font-weight: 600;
  color: var(--texto-secundario); cursor: pointer; font-family: inherit;
}
.pr-presets button:hover { color: var(--cor-primaria); }
.pr-presets button.on { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }

.pr-filtros { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.pr-filtros .form-group { min-width: 200px; margin-bottom: 0; }

/* Padrao_Toggle_Tipos, tipo 2 (exatamente 2 opcoes): escolha de nivel no
   formulario de criacao. Solido invertido, nunca suave (isso e tipo 1). */
.pr-nivel {
  display: inline-flex; height: 38px; padding: 3px; border: 1px solid var(--borda);
  border-radius: var(--raio-sm); background: var(--fundo); margin-bottom: 4px;
}
.pr-nivel button {
  height: 30px; border: none; background: transparent; border-radius: 5px;
  padding: 0 16px; font-size: var(--fs-sm); font-weight: 600;
  color: var(--texto-secundario); cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.pr-nivel button.on { background: var(--cor-primaria); color: var(--branco); }

.item-cab { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.item-grid p { margin: 2px 0 0; }
.acoes-fluxo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: var(--sp-4); }
.acoes-fluxo form { display: inline-flex; }

.mapa-macro { padding: var(--sp-3) 0; border-top: 1px solid var(--borda); }
.mapa-macro:first-of-type { border-top: none; padding-top: var(--sp-2); }
.mapa-macro-nome { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--texto); }
.mapa-macro-nome:hover { color: var(--cor-primaria); }
.mapa-processos { list-style: none; margin: var(--sp-2) 0 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: 4px; }
.mapa-vazio { margin: var(--sp-2) 0 0 var(--sp-5); }

.alerta-sucesso { background: rgba(22, 163, 74, 0.1); color: var(--sucesso); border: 1px solid rgba(22, 163, 74, .3); }

.texto-fraco-xs { color: var(--texto-fraco); font-size: var(--fs-xs); }
.col-estreita { width: 90px; }
.check-linha { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 0; font-size: var(--fs-sm); }
.oc-pag-botoes-fim { justify-self: end; }
.textarea-obs { height: 70px; resize: vertical; }

/* KPI (Listagens_sem_KPI: so na visao geral, nunca em tela de listagem;
   Padrao_KPI_Dashboard: grid 6/3/2, faixa de 3px no topo do card) */
.mg-kpi {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 880px) { .mg-kpi { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .mg-kpi { grid-template-columns: repeat(2, 1fr); } }
.kpi-card {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-4);
  overflow: hidden;
}
.kpi-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cor-primaria);
}
.kpi-label { font-size: var(--fs-sm); color: var(--texto-secundario); margin-bottom: var(--sp-1); min-height: 25px; }
.kpi-sub { font-size: var(--fs-xs); color: var(--texto-fraco); margin-top: 2px; }

/* Icone de acao por linha (Matriz_VER_EDITAR): nunca some, so esmaece */
.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--raio-sm);
  color: var(--texto-secundario);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
}
.btn-icone:hover { background: var(--fundo); color: var(--texto); }
.btn-icone.desabilitado { color: var(--texto-fraco); opacity: .45; cursor: not-allowed; pointer-events: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--raio-full);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.badge-sucesso { background: rgba(22, 163, 74, 0.12); color: var(--sucesso); }
.badge-neutro { background: var(--fundo); color: var(--texto-secundario); }
.badge-erro { background: var(--vermelho-suave); color: var(--erro); }
.badge-alerta { background: rgba(241, 196, 15, 0.18); color: #8a6d00; }
/* Criticidade (Fase 6, regra local 6): cores semanticas, nunca a cor da marca.
   badge-erro/badge-alerta acima ja cobrem vermelho/amarelo; faltavam laranja
   (alta) e cinza (nao_avaliada, distinto do cinza-neutro de badge-neutro). */
.badge-laranja { background: rgba(234, 88, 12, 0.14); color: #c2410c; }
.badge-cinza { background: rgba(100, 116, 139, 0.12); color: #64748b; }

/* Toggle on/off (Padrao_Toggle_OnOff): persiste sozinho no onchange */
.cv-sw {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.cv-sw input { opacity: 0; width: 0; height: 0; }
.cv-sw .cv-sw-pista {
  position: absolute;
  inset: 0;
  background: var(--borda);
  border-radius: var(--raio-full);
  transition: background .15s ease;
  cursor: pointer;
}
.cv-sw .cv-sw-pista::before {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: var(--branco);
  border-radius: var(--raio-full);
  transition: transform .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.cv-sw input:checked + .cv-sw-pista { background: var(--sucesso); }
.cv-sw input:checked + .cv-sw-pista::before { transform: translateX(18px); }
.cv-sw input:disabled + .cv-sw-pista { opacity: .5; cursor: not-allowed; }

/* Tabela server-side (Padrao_Paginacao_Servidor) */
.tabela-wrap {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: visible; /* nunca overflow:hidden: corta o painel do selectbusca/menu */
}
.tabela-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  flex-wrap: wrap;
}
.tabela-cab-titulo { font-family: var(--font-titulo); font-weight: 700; font-size: var(--fs-lg); }
.tabela-cab-acoes { position: relative; display: flex; align-items: center; gap: var(--sp-2); }

.tabela-scroll { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tabela th, .tabela td {
  padding: 10px var(--sp-3);
  text-align: left;
  border-top: 1px solid var(--borda);
  white-space: nowrap;
}
.tabela thead .tabela-cab-cols th {
  border-top: none;
  border-bottom: 1px solid var(--borda);
  font-weight: 600;
  color: var(--texto-secundario);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tabela th.th-ordenavel { cursor: pointer; user-select: none; }
.tabela th.th-ordenavel::after { content: "\2195"; margin-left: 5px; color: var(--texto-fraco); }
.tabela th.th-asc::after { content: "\2191"; color: var(--cor-primaria); }
.tabela th.th-desc::after { content: "\2193"; color: var(--cor-primaria); }
.tabela tbody tr:hover { background: var(--fundo); }

.th-filtro-row th { padding: 6px var(--sp-3); border-top: none; }
.th-filtro {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font-size: var(--fs-xs);
  font-family: var(--font);
}

/* Menu sanduiche da tabela: ordem fixa (Filtro / Ordenar / Linhas por pagina;
   Colunas e Exportar ficam de fora nesta fase, ver CONFORMIDADE_VAULT) */
.tab-menu-btn { width: 32px; }
.tab-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-md);
  padding: var(--sp-2);
  z-index: var(--z-dropdown);
}
.tab-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--texto);
  border-radius: var(--raio-sm);
  cursor: pointer;
}
.tab-menu button:hover { background: var(--fundo); }
.tab-menu-sep { height: 1px; background: var(--borda); margin: 6px 2px; }
.tab-menu-linhas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--texto-secundario);
}
.tab-menu-ordenar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 10px 10px;
}
/* tamanho/ordenar do menu sanduiche sao .selectbusca (Sem_Select_Nativo),
   so encolhidos pra caber no painel */
.tab-menu .selectbusca .sb-display { height: 30px; font-size: var(--fs-xs); padding: 0 8px; }

/* Paginador de 5 controles, nunca so prev/next */
.oc-pag {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--borda);
}
.oc-pag-esquerda { display: flex; align-items: center; gap: var(--sp-3); justify-self: start; }
.oc-pag-total { font-size: var(--fs-sm); color: var(--texto-secundario); white-space: nowrap; }
.oc-pag-botoes { display: flex; gap: 4px; }
.oc-pag-info { justify-self: center; font-size: var(--fs-sm); color: var(--texto-secundario); white-space: nowrap; }
.oc-pag button {
  width: 30px; height: 30px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--branco);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.oc-pag button:hover:not(:disabled) { background: var(--fundo); }
.oc-pag button:disabled { opacity: .4; cursor: not-allowed; }

/* Estado vazio. [hidden] explicito: sem isso, .vz{display:flex} e [hidden] do
   navegador empatam em especificidade e a ordem do cascade deixa o vazio
   aparecendo por baixo da tabela mesmo com o atributo hidden presente. */
.vz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 300px;
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--texto-fraco);
}
.vz[hidden] { display: none; }
.vz i { font-size: 40px; }
.vz-inline { padding: var(--sp-4); font-size: var(--fs-sm); }

/* SelectBusca */
.selectbusca { position: relative; }
.sb-display {
  height: 40px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--branco);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  font-size: var(--fs-base);
}
.sb-label.sb-placeholder { color: var(--texto-fraco); }
.selectbusca.open .sb-display { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px var(--cor-primaria-soft); }
.sb-panel {
  display: none;
  position: fixed;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-md);
  z-index: var(--z-dropdown);
  max-height: 260px;
  overflow-y: auto;
}
.selectbusca.open .sb-panel { display: block; }
.sb-search {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: none;
  border-bottom: 1px solid var(--borda);
  font-size: var(--fs-sm);
  font-family: var(--font);
}
.sb-search:focus { outline: none; }
.sb-opt { padding: 9px 12px; font-size: var(--fs-sm); cursor: pointer; }
.sb-opt:hover { background: var(--fundo); }
.sb-vazio { padding: 10px 12px; font-size: var(--fs-sm); color: var(--texto-fraco); display: none; }

/* Modal (tamanhos em vw/vh, razao Fibonacci; ESC e backdrop NAO fecham) */
.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.modal-bg.aberto { display: flex; }
.modal-caixa {
  background: var(--branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  display: flex;
  flex-direction: column;
  max-width: 92vw;
  max-height: 92vh;
}
.modal-sm { width: 34vw; min-height: 42vh; }
.modal-md { width: 55vw; min-height: 70vh; }
.modal-lg { width: 89vw; min-height: 90vh; }
.modal-confirm { width: 34vw; min-height: 0; }
@media (max-width: 720px) {
  .modal-sm, .modal-md, .modal-lg, .modal-confirm { width: 94vw; }
}
.modal-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--borda);
}
.modal-titulo { font-family: var(--font-titulo); font-weight: 700; font-size: var(--fs-lg); }
.modal-fechar {
  background: none; border: none; cursor: pointer;
  font-size: 20px; color: var(--texto-fraco); line-height: 1;
  padding: 4px;
}
.modal-fechar:hover { color: var(--texto); }
.modal-corpo { padding: var(--sp-5); overflow-y: auto; flex: 1; }
.modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--borda);
}
.modal-erro[role="alert"] {
  background: var(--vermelho-suave);
  color: var(--erro);
  border: 1px solid rgba(231, 76, 60, .3);
  border-radius: var(--raio-sm);
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.form-input.invalido, .selectbusca.invalido .sb-display { border-color: var(--erro); }

/* Padrao_Loading_Estado: spinner sempre fora do <button>, nunca "Carregando..." generico */
.loading-alvo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--texto-secundario);
}
.loading-alvo[hidden] { display: none; }
.spinner-carregar {
  width: 44px;
  height: 44px;
  border: 4px solid var(--cor-primaria-suave);
  border-top-color: var(--cor-primaria);
  border-radius: 50%;
  animation: girar-spinner .6s linear infinite;
  flex-shrink: 0;
}
@keyframes girar-spinner { to { transform: rotate(360deg); } }

/* Padrao_Formulario: barra horizontal de 40px pra criar registro em linha
   (uma etapa, uma medicao, um participante), sem abrir modal pra cada item. */
.ra-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-4);
  background: var(--fundo);
  border-radius: var(--raio-sm);
  margin-bottom: var(--sp-4);
}
.ra-bar .form-group { margin-bottom: 0; min-width: 160px; }
.ra-bar .form-label { font-size: var(--fs-sm); font-weight: 600; text-transform: none; }
.ra-bar label.rotulo-fantasma { display: block; margin-bottom: var(--sp-1); height: 17px; }

/* Nav entre a atividade e suas sub-paginas (participantes/etapas/medicoes/evidencias) */
.at-nav { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-4) 0; }
.at-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  color: var(--texto-secundario); font-size: var(--fs-sm); font-weight: 500;
}
.at-nav a:hover { background: var(--fundo); color: var(--texto); text-decoration: none; }
.at-nav a.ativo { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); border-color: transparent; }

/* Padrao_Upload_Arquivo: label[for] + input escondido, 3 estados visuais,
   nunca alert() nativo -- feedback sempre em .im-acao / .bloco-erro. */
.im-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 140px;
  padding: var(--sp-5);
  border: 2px dashed var(--borda);
  border-radius: var(--raio-sm);
  text-align: center;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.im-drop i { font-size: 32px; color: var(--texto-fraco); }
.im-drop:hover, .im-drop.arrastando { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.im-drop.arrastando i { color: var(--cor-primaria); }
.im-drop.carregado { border-style: solid; border-color: var(--sucesso); background: rgba(22, 163, 74, .06); color: var(--sucesso); }
.im-drop.carregado i { color: var(--sucesso); }
.im-inp { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.im-acao { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.im-acao .im-msg { margin-right: auto; font-size: var(--fs-sm); color: var(--texto-secundario); }
.im-acao .im-msg.im-msg-erro { color: var(--erro); }

/* Utilitarios pontuais (CSP style-src 'self' bloqueia style="" inline, entao
   larguras/margens ad-hoc de formularios em .ra-bar viram classe, nao atributo). */
.in-w-sm { width: 110px; }
.in-w-md { width: 120px; }
.in-w-lg { width: 150px; }
.in-w-xl { width: 160px; }
.in-w-xxl { width: 220px; }
.mt-4 { margin-top: var(--sp-4); }
.badge-btn { border: none; cursor: pointer; }

/* Fase 7 (fluxograma): o SVG e servido por rota propria (core/fluxo.py), embutido
   via <object> para os links <a> internos do SVG continuarem clicaveis (um <img>
   nao executa navegacao). Cor/tipografia do desenho ficam no <style> do proprio
   SVG (Padrao_Espacamento_e_Respiro: "style so dentro do SVG servido, nunca no
   template HTML"); aqui so o encaixe no layout do card. */
.fluxo-svg { display: block; width: 100%; max-width: 100%; border: none; }