/*
 * Fluxus Regulatório
 * Acompanhamento de Processo
 * Referência: fluxus_regulatorio_processos_mockup (3).html
 */

.fx-reg-acomp {
  --acomp-line: #d9e4e8;
  --acomp-soft: #f7fafb;
  --acomp-teal: #087f81;

  color: #25394b;

  font:
    13px
    "Segoe UI",
    Arial,
    sans-serif;

  background: #fff;

  border:
    1px solid #d2dce0;

  border-radius: 8px;

  overflow: hidden;
}


.fx-reg-acomp-header {
  padding:
    15px
    20px
    0;

  background: #fff;
}


.fx-reg-acomp-headrow {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;
}


.fx-reg-acomp h1 {
  margin: 0;

  color: #17374b;

  font-size: 18px;

  font-weight: 700;
}


.fx-reg-acomp-sub {
  margin-top: 3px;

  color: #738795;

  font-size: 11px;
}


.fx-reg-acomp-status {
  padding:
    5px
    9px;

  border:
    1px solid #bfe8d9;

  border-radius: 20px;

  background: #e9f7f1;

  color: #17675f;

  font-size: 11px;

  font-weight: 650;

  white-space: nowrap;
}


.fx-reg-acomp-status.warning {
  border-color: #efd9a9;

  background: #fff6e6;

  color: #93630c;
}


.fx-reg-acomp-status.gray {
  border-color: #d6dde1;

  background: #eef0f2;

  color: #607382;
}


.fx-reg-acomp-tabs {
  display: flex;

  gap: 5px;

  margin-top: 15px;

  border-bottom:
    1px solid
    var(--acomp-line);
}


.fx-reg-acomp-tabs button {
  padding:
    10px
    15px;

  border: 0;

  border-bottom:
    3px solid transparent;

  background: transparent;

  color: #536b78;

  font:
    600
    12px
    "Segoe UI",
    Arial,
    sans-serif;

  cursor: pointer;
}


.fx-reg-acomp-tabs button.active {
  border-bottom-color: #078c92;

  background: #f6fbfb;

  color: #037b87;
}


.fx-reg-acomp-body {
  min-height: 427px;

  padding:
    14px
    16px
    16px;

  background:
    var(--acomp-soft);
}


.fx-reg-acomp-panel {
  display: none;
}


.fx-reg-acomp-panel.active {
  display: block;
}


.fx-reg-acomp-section {
  margin-bottom: 11px;

  padding:
    15px
    17px;

  border:
    1px solid
    var(--acomp-line);

  border-radius: 7px;

  background: #fff;
}


.fx-reg-acomp-section-title {
  display: flex;

  align-items: center;

  gap: 5px;

  margin-bottom: 12px;

  color: #264e5b;

  font-size: 12px;

  font-weight: 700;
}


.fx-reg-acomp-grid {
  display: grid;

  grid-template-columns:
    repeat(
      12,
      minmax(0, 1fr)
    );

  column-gap: 13px;

  row-gap: 11px;
}


.fx-reg-acomp .c3 {
  grid-column: span 3;
}


.fx-reg-acomp .c4 {
  grid-column: span 4;
}


.fx-reg-acomp .c5 {
  grid-column: span 5;
}


.fx-reg-acomp .c6 {
  grid-column: span 6;
}


.fx-reg-acomp .c7 {
  grid-column: span 7;
}


.fx-reg-acomp .c8 {
  grid-column: span 8;
}


.fx-reg-acomp .c9 {
  grid-column: span 9;
}


.fx-reg-acomp .c12 {
  grid-column: span 12;
}


.fx-reg-acomp-field {
  min-width: 0;
}


.fx-reg-acomp-field label {
  display: block;

  margin-bottom: 5px;

  color: #5d7481;

  font-size: 11px;

  font-weight: 600;
}


.fx-reg-acomp-field input,
.fx-reg-acomp-field select,
.fx-reg-acomp-field textarea {
  box-sizing: border-box;

  width: 100%;

  height: 34px;

  padding:
    8px
    9px;

  border:
    1px solid #cfdde4;

  border-radius: 5px;

  outline: none;

  background: #fff;

  color: #253b48;

  font:
    12px
    "Segoe UI",
    Arial,
    sans-serif;
}


.fx-reg-acomp-field textarea {
  min-height: 67px;

  height: 67px;

  resize: vertical;

  line-height: 1.5;
}


.fx-reg-acomp-field input:focus,
.fx-reg-acomp-field select:focus,
.fx-reg-acomp-field textarea:focus {
  border-color: #0c919a;

  box-shadow:
    0 0 0 2px
    #cceff055;
}


.fx-reg-acomp-field input:disabled,
.fx-reg-acomp-field select:disabled,
.fx-reg-acomp-field textarea:disabled {
  background: #f1f5f6;

  color: #566d79;

  opacity: 1;
}


.fx-reg-acomp-hint {
  color: #7a8d98;

  font-size: 11px;

  font-weight: 400;
}


.fx-reg-acomp-formhead {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;

  margin-bottom: 11px;
}


.fx-reg-acomp-formhead
.fx-reg-acomp-section-title {
  margin: 0;
}


.fx-reg-acomp-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 6px;

  padding:
    8px
    11px;

  border:
    1px solid #cbdbe1;

  border-radius: 5px;

  background: #fff;

  color: #41606e;

  font:
    600
    12px
    "Segoe UI",
    Arial,
    sans-serif;

  white-space: nowrap;

  cursor: pointer;
}


.fx-reg-acomp-btn.primary {
  border-color: #087e88;

  background: #087e88;

  color: #fff;
}


.fx-reg-acomp-btn.danger,
.fx-reg-acomp-mini.danger {
  color: #a93a43;
}


.fx-reg-acomp-btn:disabled,
.fx-reg-acomp-mini:disabled {
  opacity: .45;

  cursor: not-allowed;
}


.fx-reg-acomp-actions {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 6px;
}


.fx-reg-acomp-inline-form,
.fx-reg-acomp-doc-form {
  margin-bottom: 13px;
}


.fx-reg-acomp-tablewrap {
  overflow: auto;

  border:
    1px solid
    var(--acomp-line);

  border-radius: 6px;
}


.fx-reg-acomp-table {
  width: 100%;

  border-collapse: collapse;

  font-size: 12px;
}


.fx-reg-acomp-table th {
  padding: 10px;

  border-bottom:
    1px solid
    var(--acomp-line);

  background: #f1f6f7;

  color: #4d6b79;

  text-align: left;

  font-weight: 700;

  white-space: nowrap;
}


.fx-reg-acomp-table td {
  padding: 10px;

  border-bottom:
    1px solid #e6eef1;

  vertical-align: middle;
}


.fx-reg-acomp-table
tr:last-child
td {
  border-bottom: 0;
}


.fx-reg-acomp-empty {
  padding:
    25px
    8px !important;

  color: #8495a0;

  text-align: center;
}


.fx-reg-acomp-history-text {
  white-space: pre-wrap;

  overflow-wrap: anywhere;
}


.fx-reg-acomp-row-actions {
  text-align: right;

  white-space: nowrap;
}


.fx-reg-acomp-mini {
  padding:
    4px
    7px;

  border:
    1px solid #cbdbe1;

  border-radius: 4px;

  background: #fff;

  color: #41606e;

  font-size: 11px;

  cursor: pointer;
}


.fx-reg-acomp-notice {
  margin-top: 9px;

  color: #708692;

  font-size: 11px;
}


.fx-reg-acomp-filearea {
  padding: 15px;

  border:
    1px dashed #91bac0;

  border-radius: 6px;

  background: #f8fcfc;

  color: #5b7986;

  text-align: center;

  cursor: pointer;
}


.fx-reg-acomp-filearea:hover {
  background: #effafa;
}


.fx-reg-acomp-filename {
  margin-top: 3px;

  color: #066b75;

  font-weight: 600;
}


/*
 * Correção autorizada:
 * mais espaço para Arquivo,
 * menos espaço desperdiçado no Título.
 */
.fx-reg-acomp-doc-table {
  table-layout: fixed;
}


.fx-reg-acomp-doc-table
.col-doc-title {
  width: 29%;
}


.fx-reg-acomp-doc-table
.col-doc-date {
  width: 13%;
}


.fx-reg-acomp-doc-table
.col-doc-file {
  width: 42%;
}


.fx-reg-acomp-doc-table
.col-doc-actions {
  width: 16%;
}


.fx-reg-acomp-file-name {
  overflow-wrap: anywhere;
}


.fx-reg-acomp-toast {
  position: fixed;

  right: 25px;
  bottom: 22px;

  z-index: 10100;

  padding:
    11px
    17px;

  border-radius: 6px;

  background: #173f4e;

  color: #fff;

  box-shadow:
    0 7px 24px #173f4e33;

  opacity: 0;

  transform:
    translateY(8px);

  transition: .18s;

  pointer-events: none;
}


.fx-reg-acomp-toast.show {
  opacity: 1;

  transform:
    translateY(0);
}


.fx-reg-acomp-modalback {
  position: fixed;

  inset: 0;

  z-index: 10110;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 16px;

  background: #122d3a80;
}


.fx-reg-acomp-modalback[hidden] {
  display: none;
}


.fx-reg-acomp-confirm {
  width: 100%;

  max-width: 430px;

  padding: 20px;

  border-radius: 9px;

  background: #fff;

  box-shadow:
    0 18px 50px #0002;
}


.fx-reg-acomp-confirm h3 {
  margin:
    0
    0
    10px;
}


.fx-reg-acomp-confirm p {
  line-height: 1.5;
}


/* Barra lateral do Fluxus durante o acompanhamento */

#shell.fx-reg-acomp-mode
.fx-actions
[data-acomp-action] {
  display: flex !important;
}


#shell.fx-reg-acomp-mode
.fx-actions
.fx-reg-acomp-primary {
  border-color: #087e88 !important;

  background: #087e88 !important;

  color: #fff !important;
}


@media (max-width: 750px) {

  .fx-reg-acomp-header {
    padding:
      13px
      12px
      0;
  }

  .fx-reg-acomp-body {
    padding: 10px;
  }

  .fx-reg-acomp-grid {
    column-gap: 9px;
  }

  .fx-reg-acomp .c3,
  .fx-reg-acomp .c4,
  .fx-reg-acomp .c5,
  .fx-reg-acomp .c6,
  .fx-reg-acomp .c7,
  .fx-reg-acomp .c8,
  .fx-reg-acomp .c9 {
    grid-column:
      span 6;
  }

}


@media (max-width: 440px) {

  .fx-reg-acomp .c3,
  .fx-reg-acomp .c4,
  .fx-reg-acomp .c5,
  .fx-reg-acomp .c6,
  .fx-reg-acomp .c7,
  .fx-reg-acomp .c8,
  .fx-reg-acomp .c9 {
    grid-column:
      span 12;
  }

}


@media print {

  .fx-reg-acomp-tabs,
  .fx-actions,
  .fx-reg-acomp-formhead
  button,
  .fx-reg-acomp-row-actions {
    display: none !important;
  }

  .fx-reg-acomp-panel {
    display: block !important;

    margin-bottom: 15px;
  }

}


/* ============================================================
   REG_ACOMP_SCROLL_INTERNO_V1
   Mantém cabeçalho/abas visíveis e permite rolagem do conteúdo.
   ============================================================ */

#shell.fx-reg-acomp-mode
.fx-reg-acomp {
  display: flex !important;
  flex-direction: column !important;

  height: calc(100vh - 152px) !important;
  max-height: calc(100vh - 152px) !important;

  min-height: 0 !important;

  overflow: hidden !important;
}


/*
 * Cabeçalho e abas permanecem fixos
 * dentro da tela de acompanhamento.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-header {
  flex: 0 0 auto !important;
}


/*
 * Somente a área com os dados das abas rola.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-body {
  flex: 1 1 auto !important;

  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  scrollbar-gutter: stable;
}


/*
 * As abas podem crescer verticalmente;
 * o conteúdo não será cortado.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-panel {
  min-height: min-content;
}


/*
 * Barra de rolagem discreta.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-body::-webkit-scrollbar {
  width: 9px;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp-body::-webkit-scrollbar-track {
  background: #f2f6f7;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp-body::-webkit-scrollbar-thumb {
  border:
    2px solid #f2f6f7;

  border-radius: 8px;

  background: #b4c6ca;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp-body::-webkit-scrollbar-thumb:hover {
  background: #91a9ae;
}



/* ============================================================
   REG_ACOMP_COMPACTACAO_V1
   Compactação da tela para melhor aproveitamento vertical.
   ============================================================ */


/*
 * Remove a altura forçada e a rolagem interna implantada
 * anteriormente. A tela volta a usar a altura natural.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp {
  display: block !important;

  height: auto !important;
  max-height: none !important;

  min-height: 0 !important;

  overflow: visible !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp-header {
  flex: none !important;

  padding:
    8px
    12px
    0 !important;
}


/*
 * Cabeçalho mais compacto.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-headrow {
  gap: 5px !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp h1 {
  font-size: 16px !important;
  line-height: 1.15 !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp-sub {
  margin-top: 1px !important;

  font-size: 10px !important;
  line-height: 1.15 !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp-status {
  padding:
    3px
    7px !important;

  font-size: 10px !important;
}


/*
 * Abas mais próximas do cabeçalho.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-tabs {
  margin-top: 7px !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp-tabs button {
  padding:
    7px
    12px !important;

  font-size: 11px !important;
}


/*
 * Área de conteúdo sem rolagem própria.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-body {
  min-height: 0 !important;

  padding:
    7px
    9px
    8px !important;

  overflow: visible !important;

  scrollbar-gutter: auto !important;
}


/*
 * Painéis internos mais enxutos.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-section {
  margin-bottom: 6px !important;

  padding:
    8px
    10px !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp-section-title {
  margin-bottom: 7px !important;

  font-size: 11px !important;
}


/*
 * Redução do espaço entre linhas e colunas.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-grid {
  column-gap: 10px !important;
  row-gap: 6px !important;
}


/*
 * Rótulos mais compactos.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-field label {
  margin-bottom: 3px !important;

  font-size: 10px !important;
}


/*
 * Campos menores, mantendo legibilidade.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-field input,
#shell.fx-reg-acomp-mode
.fx-reg-acomp-field select {
  height: 30px !important;

  padding:
    5px
    8px !important;

  font-size: 11px !important;
}


/*
 * Textarea também compactada.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-field textarea {
  min-height: 52px !important;
  height: 52px !important;

  padding:
    6px
    8px !important;

  font-size: 11px !important;
}


/*
 * Cabeçalhos internos com menor altura.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-formhead {
  margin-bottom: 7px !important;
}


/*
 * Botões internos compactos.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-btn {
  padding:
    6px
    9px !important;

  font-size: 11px !important;
}


/*
 * Tabelas compactas.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-table th {
  padding: 7px !important;

  font-size: 11px !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp-table td {
  padding: 7px !important;

  font-size: 11px !important;
}


/*
 * Formulários auxiliares ocupam menos altura.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-inline-form,
#shell.fx-reg-acomp-mode
.fx-reg-acomp-doc-form {
  margin-bottom: 8px !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp-filearea {
  padding: 10px !important;

  font-size: 11px !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp-notice {
  margin-top: 5px !important;

  font-size: 10px !important;
}


/*
 * Remove comportamento visual do scroll interno anterior.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-body::-webkit-scrollbar {
  width: initial !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp-body::-webkit-scrollbar-track {
  background: initial !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp-body::-webkit-scrollbar-thumb {
  border: initial !important;

  border-radius: initial !important;

  background: initial !important;
}



/* ============================================================
   REG_ACOMP_ENCAMINHAMENTOS_REFINADO_CSS_V3
   Mockups aprovados.
   ============================================================ */


/*
 * A tag visual "Em andamento" continua no DOM apenas
 * por compatibilidade interna, mas não aparece na interface.
 */
#shell.fx-reg-acomp-mode
.fx-reg-acomp-status {
  display: none !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-acomp-headrow {
  justify-content: flex-start !important;
}


/* ------------------------------------------------------------
   Encaminhamento e situação
   ------------------------------------------------------------ */

#shell.fx-reg-acomp-mode
.fx-reg-enc-controls {
  margin-bottom: 10px;

  padding:
    10px
    12px;

  border:
    1px solid #e2e9ec;

  border-radius: 7px;

  background: #fff;
}


#shell.fx-reg-acomp-mode
.fx-reg-enc-controls-grid {
  display: grid;

  grid-template-columns:
    minmax(240px, 360px)
    minmax(210px, 300px);

  align-items: end;

  gap: 16px;
}


#shell.fx-reg-acomp-mode
.fx-reg-enc-controls
.fx-reg-acomp-field label {
  margin-bottom: 4px !important;

  color: #526b77;

  font-size: 10px !important;

  font-weight: 600;
}


#shell.fx-reg-acomp-mode
.fx-reg-enc-controls
.fx-reg-acomp-field select {
  height: 30px !important;

  padding:
    4px
    8px !important;

  border-color: #cbdbe1;

  background: #fff;

  font-size: 11px !important;
}


/* ------------------------------------------------------------
   Histórico
   ------------------------------------------------------------ */

#shell.fx-reg-acomp-mode
.fx-reg-history {
  overflow: hidden;

  border:
    1px solid #e4eaed;

  border-radius: 7px;

  background: #fff;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  min-height: 44px;

  padding:
    8px
    12px;

  gap: 10px;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-heading {
  display: flex;

  align-items: center;

  gap: 8px;

  min-width: 0;

  color: #17374b;

  font-size: 13px;

  font-weight: 700;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  border-radius: 50%;

  background: #eaf6f6;

  color: #087e88;

  font-size: 17px;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-count {
  color: #84959e;

  font-size: 10px;

  font-weight: 400;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-add {
  min-width: 138px;

  height: 30px !important;

  padding:
    4px
    11px !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table-wrap {
  width: 100%;

  overflow-x: auto;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table {
  width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

  font-size: 11px;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table thead th {
  height: 30px;

  padding:
    6px
    11px;

  border-top:
    1px solid #edf2f4;

  border-bottom:
    1px solid #edf2f4;

  background: #f7f9fa;

  color: #5a707c;

  text-align: left;

  font-size: 10px;

  font-weight: 650;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table tbody td {
  padding:
    7px
    11px;

  border-bottom:
    1px solid #eef3f5;

  vertical-align: middle;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table tbody tr:last-child td {
  border-bottom: 0;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-date-col {
  width: 120px;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-actions-col {
  width: 82px;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-actions-th {
  text-align: right !important;
}


/* ------------------------------------------------------------
   Histórico vazio
   ------------------------------------------------------------ */

#shell.fx-reg-acomp-mode
.fx-reg-history-empty {
  height: 170px;

  padding:
    22px
    18px !important;

  text-align: center;

  color: #657d89;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-empty-symbol {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  margin:
    0
    auto
    9px;

  border-radius: 50%;

  background: #f0f5f7;

  color: #647c88;

  font-size: 22px;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-empty strong {
  display: block;

  margin-bottom: 3px;

  color: #4d6571;

  font-size: 11px;

  font-weight: 600;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-empty span {
  display: block;

  color: #899aa3;

  font-size: 10px;
}


/* ------------------------------------------------------------
   Modal Adicionar registro
   ------------------------------------------------------------ */

#shell.fx-reg-acomp-mode
.fx-reg-history-modal-backdrop {
  position: fixed;

  inset: 0;

  z-index: 12000;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 20px;

  background:
    rgba(24, 45, 58, .48);
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-backdrop[hidden] {
  display: none !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal {
  width:
    min(
      540px,
      calc(100vw - 40px)
    );

  overflow: hidden;

  border:
    1px solid #d8e3e7;

  border-radius: 9px;

  background: #fff;

  box-shadow:
    0
    18px
    48px
    rgba(18, 43, 58, .23);
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  min-height: 55px;

  padding:
    11px
    15px;

  border-bottom:
    1px solid #edf2f4;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-title {
  display: flex;

  align-items: center;

  gap: 10px;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-title h2 {
  margin: 0;

  color: #17374b;

  font-size: 16px;

  font-weight: 700;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-symbol {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  border-radius: 7px;

  background: #e7f5f5;

  color: #087e88;

  font-size: 20px;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-x {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border: 0;

  border-radius: 5px;

  background: transparent;

  color: #526c79;

  font-size: 21px;

  cursor: pointer;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-x:hover {
  background: #f1f5f6;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-body {
  padding:
    15px
    17px
    17px;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-body
.fx-reg-acomp-field {
  margin-bottom: 12px;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-body
.fx-reg-acomp-field:last-child {
  margin-bottom: 0;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-body label {
  margin-bottom: 5px !important;

  color: #405e6d;

  font-size: 11px !important;

  font-weight: 650;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-body label b {
  color: #c13e49;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-date-field {
  max-width: 205px;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-body input {
  height: 33px !important;

  padding:
    5px
    8px !important;

  font-size: 11px !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-body textarea {
  min-height: 105px !important;
  height: 105px !important;

  padding:
    8px
    9px !important;

  font-size: 11px !important;

  line-height: 1.45;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-footer {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 8px;

  padding:
    10px
    15px;

  border-top:
    1px solid #edf2f4;

  background: #fbfcfc;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-footer
.fx-reg-acomp-btn {
  min-width: 100px;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-modal-footer
.fx-reg-acomp-btn.primary {
  min-width: 140px;
}


@media (max-width: 700px) {

  #shell.fx-reg-acomp-mode
  .fx-reg-enc-controls-grid {
    grid-template-columns: 1fr;
  }

  #shell.fx-reg-acomp-mode
  .fx-reg-history-header {
    align-items: stretch;
    flex-direction: column;
  }

  #shell.fx-reg-acomp-mode
  .fx-reg-history-add {
    width: 100%;
  }

}



/* ============================================================
   REG_ACOMP_ADD_MOVEMENT_TOP_CSS_V2
   Encaminhamento | Situação | Adicionar registro
   ============================================================ */


#shell.fx-reg-acomp-mode
.fx-reg-enc-controls-grid {
  grid-template-columns:
    minmax(250px, 1.30fr)
    minmax(210px, .95fr)
    auto !important;

  align-items: end !important;

  gap: 12px !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-enc-add-action {
  display: flex;

  align-items: flex-end;
  justify-content: flex-end;

  min-width: 0;
}


#shell.fx-reg-acomp-mode
.fx-reg-enc-add-action
.fx-reg-history-add {
  width: auto !important;

  min-width: 155px !important;

  height: 30px !important;

  margin: 0 !important;

  opacity: 1 !important;

  cursor: pointer !important;
}


/*
 * O cabeçalho do histórico não precisa mais
 * reservar espaço para o botão.
 */
#shell.fx-reg-acomp-mode
.fx-reg-history-header {
  justify-content: flex-start !important;
}


@media (max-width: 800px) {

  #shell.fx-reg-acomp-mode
  .fx-reg-enc-controls-grid {
    grid-template-columns:
      1fr
      1fr !important;
  }

  #shell.fx-reg-acomp-mode
  .fx-reg-enc-add-action {
    grid-column:
      1 / -1;

    justify-content: flex-end;
  }

}


@media (max-width: 560px) {

  #shell.fx-reg-acomp-mode
  .fx-reg-enc-controls-grid {
    grid-template-columns:
      1fr !important;
  }

  #shell.fx-reg-acomp-mode
  .fx-reg-enc-add-action {
    grid-column: auto;
  }

  #shell.fx-reg-acomp-mode
  .fx-reg-enc-add-action
  .fx-reg-history-add {
    width: 100% !important;
  }

}



/* ============================================================
   REG_ACOMP_HISTORY_SELECTION_CSS_V1
   Histórico compacto + linha selecionável.
   ============================================================ */


#shell.fx-reg-acomp-mode
.fx-reg-history-table thead th {
  height: 27px !important;

  padding:
    4px
    10px !important;

  line-height: 1.15 !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table tbody td {
  height: 30px !important;

  padding:
    4px
    10px !important;

  line-height: 1.2 !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table
tbody tr[data-history-row] {
  height: 30px !important;

  cursor: pointer;

  transition:
    background-color .12s ease,
    box-shadow .12s ease;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table
tbody tr[data-history-row]:hover {
  background: #f5fafa;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table
tbody tr[data-history-row].is-selected {
  background: #e8f5f5;

  box-shadow:
    inset 3px 0 0 #0b8588;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table
tbody tr[data-history-row].is-selected td {
  color: #173f4b;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table
tbody tr[data-history-row]:focus {
  outline: none;

  background: #edf7f7;
}


/*
 * Coluna Ações não faz mais parte da grade.
 */
#shell.fx-reg-acomp-mode
.fx-reg-history-actions-col,
#shell.fx-reg-acomp-mode
.fx-reg-history-actions-th {
  display: none !important;
}



/* ============================================================
   REG_ACOMP_HISTORY_ZEBRA_SCROLL_V1
   Linhas alternadas + cabeçalho fixo + rolagem no histórico.
   ============================================================ */


/*
 * A área do histórico passa a ter altura controlada.
 * O cabeçalho da tabela permanece visível.
 */
#shell.fx-reg-acomp-mode
.fx-reg-history-table-wrap {
  max-height: 245px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  position: relative;
}


/*
 * Cabeçalho fixo durante a rolagem.
 */
#shell.fx-reg-acomp-mode
.fx-reg-history-table thead th {
  position: sticky;

  top: 0;

  z-index: 4;

  background: #f4f7f8 !important;

  box-shadow:
    0 1px 0 #dfe7ea;
}


/*
 * Alternância visual das linhas.
 */
#shell.fx-reg-acomp-mode
.fx-reg-history-table
tbody tr[data-history-row]:nth-child(odd) {
  background: #ffffff;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table
tbody tr[data-history-row]:nth-child(even) {
  background: #f7f9fa;
}


/*
 * Hover preserva leitura sem ficar pesado.
 */
#shell.fx-reg-acomp-mode
.fx-reg-history-table
tbody tr[data-history-row]:hover {
  background: #eef7f7 !important;
}


/*
 * Seleção continua tendo prioridade sobre zebra/hover.
 */
#shell.fx-reg-acomp-mode
.fx-reg-history-table
tbody tr[data-history-row].is-selected {
  background: #e4f3f3 !important;

  box-shadow:
    inset 3px 0 0 #0b8588;
}


/*
 * Scroll discreto.
 */
#shell.fx-reg-acomp-mode
.fx-reg-history-table-wrap::-webkit-scrollbar {
  width: 8px;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table-wrap::-webkit-scrollbar-track {
  background: #f3f6f7;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table-wrap::-webkit-scrollbar-thumb {
  border:
    2px solid #f3f6f7;

  border-radius: 8px;

  background: #b7c7cb;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #97adb2;
}


/* ============================================================
   REG_ACOMP_SCROLL_HISTORICO_MOV_V1
   Rolagem interna do histórico de movimentações.
   ============================================================ */

#shell.fx-reg-acomp-mode
.fx-reg-history-table-wrap {
  display: block !important;
  max-height: 170px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-top: 1px solid #e5ecef;
}

#shell.fx-reg-acomp-mode
.fx-reg-history-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#shell.fx-reg-acomp-mode
.fx-reg-history-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  background: #f4f7f8 !important;
}

#shell.fx-reg-acomp-mode
.fx-reg-history-table-wrap::-webkit-scrollbar {
  width: 8px;
}

#shell.fx-reg-acomp-mode
.fx-reg-history-table-wrap::-webkit-scrollbar-track {
  background: #f3f6f7;
}

#shell.fx-reg-acomp-mode
.fx-reg-history-table-wrap::-webkit-scrollbar-thumb {
  background: #bccacf;
  border-radius: 8px;
  border: 2px solid #f3f6f7;
}

#shell.fx-reg-acomp-mode
.fx-reg-history-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #9fb1b7;
}



/* ============================================================
   REG_ACOMP_ANDAMENTO_UNIFICADO_CSS_V1
   Histórico | Andamento | Situação | Adicionar registro
   ============================================================ */


#shell.fx-reg-acomp-mode
.fx-reg-history-header.fx-reg-history-unified {
  display: grid !important;

  grid-template-columns:
    minmax(245px, 1fr)
    minmax(480px, 1.7fr) !important;

  align-items: end !important;

  gap: 14px !important;

  min-height: 54px !important;

  padding:
    7px
    12px !important;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-unified
.fx-reg-history-heading {
  align-self: center;

  white-space: nowrap;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-toolbar {
  display: grid;

  grid-template-columns:
    minmax(175px, 1fr)
    minmax(175px, .9fr)
    auto;

  align-items: end;

  gap: 10px;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-field {
  min-width: 0;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-field label {
  margin-bottom: 3px !important;

  color: #526b77;

  font-size: 9px !important;

  font-weight: 600;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-field select {
  width: 100%;

  height: 29px !important;

  padding:
    3px
    7px !important;

  font-size: 10px !important;

  border-color: #cbdbe1;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-add-wrap {
  display: flex;

  align-items: flex-end;
}


#shell.fx-reg-acomp-mode
.fx-reg-history-add-wrap
.fx-reg-history-add {
  min-width: 145px !important;

  height: 29px !important;

  margin: 0 !important;
}


/*
 * Bloco separado antigo deixa de participar,
 * caso alguma regra antiga ainda exista no CSS.
 */
#shell.fx-reg-acomp-mode
.fx-reg-enc-controls {
  display: none !important;
}


/*
 * Contador antigo não deve aparecer mesmo
 * se alguma referência residual existir.
 */
#shell.fx-reg-acomp-mode
[data-history-count] {
  display: none !important;
}


@media (max-width: 850px) {

  #shell.fx-reg-acomp-mode
  .fx-reg-history-header.fx-reg-history-unified {
    grid-template-columns:
      1fr !important;
  }


  #shell.fx-reg-acomp-mode
  .fx-reg-history-toolbar {
    grid-template-columns:
      1fr
      1fr
      auto;
  }

}


@media (max-width: 620px) {

  #shell.fx-reg-acomp-mode
  .fx-reg-history-toolbar {
    grid-template-columns:
      1fr !important;
  }


  #shell.fx-reg-acomp-mode
  .fx-reg-history-add-wrap
  .fx-reg-history-add {
    width: 100% !important;
  }

}