.simol-recibos-mensais {
  --salario-destaque: #007e52;
  --salario-destaque-escuro: #006845;
  --salario-linha: #d8f7ed;
  margin-block-start: 0;
}

.simol-rm-topo { margin-bottom: 7px; }
.simol-rm-topo .form-control { width: auto; }
.simol-rm-campo { display: block; margin: 0; color: #3a6b58; font-size: 13px; font-weight: 400; }
.simol-rm-campo > .form-control { margin-top: 4px; }

.simol-recibos-mensais .form-control {
  border: 1px solid var(--salario-destaque);
  border-radius: 2.5px;
  background: #fff;
  box-shadow: none;
  color: #254737;
}

.simol-recibos-mensais .form-control[aria-invalid="true"] { border-color: #a52e24; }
.simol-recibos-mensais .form-control:focus-visible { outline: 2px solid var(--salario-destaque); outline-offset: 1px; }
.simol-recibos-mensais .form-control[aria-invalid="true"]:focus-visible { outline-color: #a52e24; }
.simol-rm-mes { margin-top: 9px; }

.simol-rm-topo-mes,
.simol-rm-guardar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
}

.simol-rm-topo-mes { justify-content: space-between; padding-block: 4px 8px; border-bottom: 1px solid var(--salario-linha); }
.simol-recibos-mensais .simol-rm-topo-mes .main-header-title { margin: 0; padding: 0; color: #017d51; }
.simol-rm-vazio { margin: 12px 0; color: #406658; }
.simol-rm-empregador { margin-block: 12px; }
.simol-rm-empregador h4 { margin: 0 0 7px; color: #006845; font-size: 15px; }
.simol-rm-empregador h4 small { margin-inline-start: 8px; color: #406658; white-space: nowrap; }

.simol-recibos-mensais .simol-rm-tabela {
  margin: 0;
  border-block: 2px solid var(--salario-destaque);
  table-layout: fixed;
}

.simol-rm-tabela > thead th { color: #2a624f; vertical-align: middle; }
.simol-rm-tabela > tbody > .simol-rm-pagamento > td { vertical-align: middle; }
.simol-rm-tabela > thead th:first-child { width: 18%; }
.simol-rm-tabela > thead th:nth-child(2) { width: 16%; }
.simol-rm-tabela > thead th:last-child { width: 17%; }
.simol-rm-pagamento td { overflow-wrap: anywhere; }
.simol-rm-tabela > thead th:nth-child(n+3):nth-child(-n+5),
.simol-rm-pagamento td:nth-child(n+3):nth-child(-n+5) { text-align: right; }
.simol-rm-montante { text-align: right; font-variant-numeric: tabular-nums; }
.simol-rm-pendente { color: #7d4c16; font-size: 12px; }
.simol-rm-estado { display: block; margin-top: 2px; color: #446357; }
.simol-rm-acoes { text-align: right; }
.simol-rm-acoes .btn { margin-inline-start: 4px; }

.simol-rm-acao-texto.btn,
.simol-rm-remover.btn {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-transform: none;
}

.simol-rm-acao-texto.btn { color: #006845; }
.simol-rm-remover.btn { margin-inline-start: auto; color: #8d281f; }
.simol-rm-tabela > tbody > .simol-rm-linha-detalhe > td,
.simol-rm-tabela > tbody > .simol-rm-linha-editor > td { padding: 12px 0; background: #f6fbf9; }

.simol-rm-papel {
  container: simol-folha / inline-size;
  box-sizing: border-box;
  --recibo-tinta: #264737;
  --recibo-linha: #86a095;
  --recibo-divisoria: #d3e2dc;
  width: min(100%, 855px);
  margin-inline: auto;
  padding: clamp(10px, 2.5cqw, 22px);
  border: 1px solid var(--recibo-linha);
  background: #fff;
  color: var(--recibo-tinta);
  overflow-wrap: anywhere;
}

.simol-rm-papel-cabecalho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 12px 24px;
  margin-block-end: 14px;
}

.simol-rm-papel :is(h5, p) { margin: 0; }
.simol-rm-papel h5 { margin-block-end: 4px; color: var(--recibo-tinta); font-weight: 700; font-size: 14px; }
.simol-rm-papel-ficha h5 { font-size: 16px; }
.simol-rm-papel-cabecalho-unico { grid-template-columns: minmax(0, 1fr); }
.simol-rm-papel-ficha .simol-rm-papel-subtitulo { grid-column: 1 / -1; color: #406658; }
.simol-rm-papel-titular { margin-top: 13px; }
.simol-rm-papel-periodo,
.simol-rm-papel-totais {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 10px;
}

.simol-rm-papel .simol-rm-campo { min-width: 0; color: var(--recibo-tinta); font-size: 12px; }
.simol-rm-papel .simol-rm-campo > .form-control { margin-top: 0; }
.simol-rm-papel .form-control {
  min-width: 0;
  border: 1px solid transparent;
  border-block-end-color: var(--recibo-linha);
  border-radius: 0;
  padding-inline: 4px;
  box-shadow: inset 0 -1px var(--recibo-divisoria);
}
.simol-rm-papel .form-control:is(:hover, :focus-visible) { border-color: var(--salario-destaque); }
.simol-rm-papel-empresa > .simol-rm-campo { margin-block-end: 3px; }
.simol-rm-papel-empresa > .simol-rm-campo:nth-of-type(2) { max-width: 14em; }
.simol-rm-papel-ficha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 10px;
}
.simol-rm-papel-ficha h5, .simol-rm-papel-periodo { grid-column: 1 / -1; }
.simol-rm-papel-totais {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block: 9px;
  padding-block: 5px;
  border-block: 1px solid var(--recibo-divisoria);
}
.simol-rm-papel-totais > label { font-weight: 600; }
.simol-rm-papel-leitura .simol-rm-papel-totais { grid-template-columns: repeat(auto-fit, minmax(min(100%, 105px), 1fr)); }
.simol-rm-valor-leitura > strong { display: block; font-size: 13px; }
.simol-rm-valor-destaque > strong { color: #006845; font-size: 16px; }
.simol-rm-papel .simol-rm-papel-nota { margin-block-start: 6px; color: #406658; font-size: 12px; }

.simol-rm-rubricas {
  width: 100%;
  border: 1px solid var(--recibo-linha);
  border-collapse: collapse;
  table-layout: fixed;
}
.simol-rm-rubricas th { color: var(--recibo-tinta); font-size: 12px; }
.simol-rm-papel .simol-rm-rubricas :is(thead, tbody, tfoot) > tr > :is(th, td) { border-bottom: 1px solid var(--recibo-divisoria); padding: 1px 4px; }
.simol-rm-papel .simol-rm-rubricas > thead > tr > th { border-bottom-color: var(--recibo-linha); padding-block: 4px; }
.simol-rm-rubricas thead [data-campo="codigo"] { width: 10%; }
.simol-rm-rubricas thead :is([data-campo="quantidade"], [data-campo="unidade"]) { width: 11%; }
.simol-rm-rubricas thead :is([data-campo="valorUnitario"], [data-campo="valorTotal"]) { width: 16%; }
.simol-rm-rubricas-simples thead [data-campo="valorTotal"] { width: 26%; }
.simol-rm-rubricas thead [data-campo="acao"] { width: 30px; }
.simol-rm-rubricas :is([data-campo="valorUnitario"], [data-campo="valorTotal"]) { text-align: right; }
.simol-rm-papel-leitura .simol-rm-rubricas :is(th, td) { padding-block: 4px; }
.simol-rm-rubricas .form-control { border-block-end-color: transparent; box-shadow: none; }
.simol-rm-rubricas .form-control:placeholder-shown { box-shadow: inset 0 -1px var(--recibo-divisoria); }
.simol-rm-rubricas tfoot .form-control { box-shadow: inset 0 -1px var(--recibo-divisoria); }
.simol-rm-rubricas .form-control:is(:hover, :focus-visible) { border-color: var(--salario-destaque); }
.simol-rm-papel .form-control[aria-invalid="true"] { border-color: #a52e24; }
.simol-rm-papel .simol-rm-rubricas > tfoot > tr { border-bottom: 1px solid var(--recibo-divisoria); }
.simol-rm-rubricas tfoot tr:first-child > * { border-top: 1px solid var(--recibo-linha); }
.simol-rm-rubricas tfoot .form-control { width: 100%; }
.simol-rm-rubricas td .btn {
  min-width: 22px;
  padding-inline: 2px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: #8d281f;
  font-size: 15px;
}

.simol-rm-edicao-detalhe { margin-top: 7px; }
.simol-rm-adicionar-rubrica { margin-block-start: 5px; }
.simol-rm-guardar { margin-top: 7px; }
.simol-rm-erro { margin: 8px 0; padding: 7px 10px; color: #902a20; background: #fbefed; border-left: 3px solid #a52e24; }

.simol-rm-saldos h4 { margin: 7px 0 5px; color: #006845; font-size: 14px; }
.simol-rm-saldos-lista { margin: 0; border-top: 1px solid var(--salario-linha); }
.simol-rm-saldos-lista > div { display: flex; justify-content: space-between; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--salario-linha); }
.simol-rm-saldos-lista dt { color: #406658; font-weight: 400; }
.simol-rm-saldos-lista dd { margin: 0; font-weight: 700; white-space: nowrap; }
.simol-rm-saldos .simol-rm-nota { margin: 5px 0 0; color: #406658; }

@container simol-salario (max-width: 780px) {
  .simol-rm-tabela > thead th, .simol-rm-tabela > tbody > .simol-rm-pagamento > td { font-size: 12px; }
  .simol-rm-acoes .btn { padding-inline: 3px; }
}

@container simol-salario (max-width: 650px) {
  .simol-rm-empregador h4 { overflow-wrap: anywhere; }
  .simol-recibos-mensais .simol-rm-tabela { display: block; }
  .simol-rm-tabela > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .simol-rm-tabela > tbody { display: block; border-top: 1px solid var(--salario-linha) !important; }
  .simol-rm-pagamento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px 8px; padding: 6px; }
  .simol-rm-tabela .simol-rm-pagamento > td { display: block; grid-column: span 2; min-width: 0; padding: 0; border: 0; text-align: left; }
  .simol-rm-pagamento > td:nth-child(-n+2) { grid-column: span 3; }
  .simol-rm-pagamento > td:nth-child(6) { grid-column: 1 / -1; }
  .simol-rm-pagamento > td[data-coluna]:not([data-coluna=""])::before { display: block; content: attr(data-coluna); color: #3a6b58; font-size: 11px; font-weight: 600; }
  .simol-rm-pagamento > td:nth-child(6):empty { display: none; }
  .simol-rm-tabela .simol-rm-linha-detalhe:not([hidden]), .simol-rm-linha-detalhe > td { display: block; }
  .simol-rm-tabela > tbody > .simol-rm-linha-editor, .simol-rm-tabela > tbody > .simol-rm-linha-editor > td { display: block; }
  .simol-rm-saldos-lista dd { min-width: 0; text-align: end; white-space: normal; overflow-wrap: anywhere; }
}

@container simol-salario (max-width: 300px) {
  .simol-rm-tabela .simol-rm-pagamento > td:nth-child(n+3):nth-child(-n+5) { grid-column: span 3; }
}

@container simol-folha (max-width: 520px) {
  .simol-rm-edicao .form-control { min-height: 34px; font-size: 16px; }
  .simol-rm-papel-cabecalho { grid-template-columns: minmax(0, 1fr); }
  .simol-rm-papel-cabecalho:not(.simol-rm-papel-cabecalho-unico) .simol-rm-papel-ficha > .simol-rm-campo:first-of-type { grid-column: 1 / -1; }
  .simol-rm-papel-totais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .simol-rm-rubricas, .simol-rm-rubricas :is(tbody, tfoot) { display: block; }
  .simol-rm-rubricas > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .simol-rm-rubrica {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 3px 6px;
    padding: 5px;
    border-bottom: 1px solid var(--recibo-linha);
  }
  .simol-rm-papel .simol-rm-rubricas > tbody > .simol-rm-rubrica > td { display: block; min-width: 0; padding: 0; border: 0; }
  .simol-rm-rubrica > td { grid-column: span 3; }
  .simol-rm-rubrica > :is([data-campo="codigo"], [data-campo="acao"]) { grid-column: span 2; }
  .simol-rm-rubrica > [data-campo="descricao"] { grid-column: span 4; }
  .simol-rm-rubrica > td[data-coluna]:not([data-coluna=""])::before { display: block; content: attr(data-coluna); color: var(--recibo-tinta); font-size: 11px; }
  .simol-rm-papel-leitura .simol-rm-rubrica > td:empty { display: none; }
  .simol-rm-papel-leitura .simol-rm-rubrica > [data-campo="descricao"]:first-child { grid-column: 1 / -1; }
  .simol-rm-rubricas-simples .simol-rm-rubrica { grid-template-columns: minmax(0, 1fr) auto; }
  .simol-rm-papel-leitura .simol-rm-rubricas-simples .simol-rm-rubrica > td[data-campo] { grid-column: auto; }
  .simol-rm-rubricas-simples .simol-rm-rubrica > td[data-coluna]::before { display: none; }
  .simol-rm-rubricas > tfoot > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .simol-rm-rubricas > tfoot > tr > * { display: block; }
}

@container simol-folha (max-width: 250px) {
  .simol-rm-edicao :is(.simol-rm-papel-ficha, .simol-rm-papel-periodo) { grid-template-columns: minmax(0, 1fr); }
  .simol-rm-edicao .simol-rm-rubrica > td:is([data-campo="codigo"], [data-campo="descricao"], [data-campo="valorUnitario"], [data-campo="valorTotal"]) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) and (pointer: coarse) {
  .simol-recibos-mensais .btn { min-height: 44px; }
  .simol-rm-acoes .btn { min-width: 44px; padding-inline: 8px; }
  .simol-rm-rubrica > [data-campo="acao"] .btn { min-width: 44px; }
  .simol-recibos-mensais .form-control { min-height: 44px; font-size: 16px; }
}
