@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@import url(./frameworks/bootstrap.css);
@import url(./frameworks/bootstrap-icons.css);

@import url(./normalize.css);
@import url(./reset.css);
@import url(./cores.css);
@import url(./variaveis.css);

@import url(./componentes/no-script.css);
@import url(./componentes/loader.css);

@import url(./elementos/div-flutuante.css);
@import url(./elementos/modo-visualizacao.css);

:root {
  --bs-font-sans-serif: 'Inter', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
}

input::placeholder {
  font-size: inherit;
}

/* TODO - refatorar esses codigos, para usar as classes do bootstrap */
header.container .header-principal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;

  div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
}

main#capa :where(p, span, b) {
  font-size: 13pt !important;
}

div.principal {
  font-family: 'Arial', sans-serif !important;
}

.principal {
  width: 21cm;
  max-width: 21cm;
  height: 26.5cm;
  max-height: 26.5cm;
  display: grid;
  grid-template-columns: 200px auto;
  grid-gap: 1rem;
}

.container-esquerda img {
  width: 100%;
  width: 150px;
}

.container-direita {
  margin-top: calc(25px + 1rem);
  max-width: 550px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grupo-footer {
  display: flex;
  justify-content: space-between;
}

.grupo-footer img {
  margin-top: 1rem;
  width: 200px;
  height: 150px;
  object-fit: contain;
  display: block;
  right: 0;
}

.grupo {
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  padding-left: 1rem;
  padding-bottom: 1rem;
  text-transform: uppercase;
  line-height: 1.4;
}

main b {
  font-weight: 600;
}

.grupo b:not(:first-child) {
  margin-top: 0.25rem;
}

.grupo b span {
  margin-right: 0.25rem;
}

.grupo b span:first-child::after {
  content: ":";
}

.grupo:not(:first-child) {
  margin-top: 1rem;
}

.tabela-dados-bancarios,
.modal-ultimos-registros-salvos table {
  text-transform: none;
}

.tabela-dados-bancarios,
.tabela-dados-bancarios tbody {
  display: block;
}

.tabela-dados-bancarios th {
  text-align: left;
}

.tabela-dados-bancarios tbody tr {
  display: flex;
  justify-content: space-between;
}

#modal-ultimos-registros-salvos table:has(th, td) {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

#modal-ultimos-registros-salvos table,
#modal-ultimos-registros-salvos .alert {
  margin-bottom: 0;
}

:where(footer, div, .modal) {
  font-size: 16px;
}

:where(footer, .modal) {
  width: 100%;
}

button i {
  margin-right: 0.5rem;
}

button[data-action="copiar-titulo-processo"] i,
button[data-action="apagar-registro"] i,
button[data-action="recuperar-registro"] i,
button[data-action="exibir-ultimos-registros"] i,
button[data-action="limpar-tudo"] i,
button[data-action="enviar-para-ateste"] i,
button[data-action="copiar-nome-capa"] i,
button[data-action="baixar-capas-armazenadas"] i,
button i.no-margin,
.some-icon i {
  margin: 0;
}

address {
  border-top: 1px solid #000;
  margin-top: 2rem;
  padding-top: 1rem;
  font-style: normal;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

address > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

address div a i {
  font-size: 1.5rem;
}

address div a:not(:first-child) {
  margin-left: 0.5rem;
}

a {
  text-decoration: none;
  outline: none;
  color: #000;
}

a:is(:hover, :focus, :active),
address a b {
  text-decoration: underline;
}

.text-gray {
  color: #808080;
  font-weight: 600;
}

#valores-imovel {
  text-transform: none;
}

.tabela-propostas-comerciais {
  /* width: 100%; */
  text-transform: none;
}

.tabela-propostas-comerciais input[type=checkbox] {
  margin: 0.25rem 0.05rem;
  border-radius: 0;
  width: 15px;
  height: 15px;
}

.tabela-propostas-comerciais .checkbox-proposta {
  display: block;
  height: 15px;
  width: 15px;
  padding-bottom: 100%;
  z-index: 1;
  position: relative;
}

.tabela-propostas-comerciais .checkbox-proposta[checked=false] {
  background: url(../img/checkbox-nochecked.png) center / contain no-repeat;
}

.tabela-propostas-comerciais .checkbox-proposta[show="true"],
.tabela-propostas-comerciais .checkbox-proposta[show="false"] {
  background: #FFF;
}

.tabela-propostas-comerciais .checkbox-proposta[show="true"]::before {
  content: "\2612";
  display: block;
  font-family: "bootstrap-icons";
  font-size: inherit;
  text-rendering: auto;
  position: absolute;
  font-size: 20px;

  top: -50%;
  left: -50%;
  transform: translate(40%, -7%);

  z-index: 1;
}

.tabela-propostas-comerciais .checkbox-proposta[show="false"]::before {
  content: "\2610";
  display: block;
  font-family: "bootstrap-icons";
  font-size: inherit;
  text-rendering: auto;
  position: absolute;
  font-size: 20px;

  top: -50%;
  left: -50%;
  transform: translate(40%, -7%);

  z-index: 1;
}

.tabela-propostas-comerciais .checkbox-proposta[checked=true] {
  background: url(../img/checkbox-checked.png) center / contain no-repeat;
}

.tabela-propostas-comerciais tr td,
.tabela-propostas-comerciais tr th {
  border: 1px solid #000;
  padding: 0 0.5rem;
}

.tabela-propostas-comerciais tr th {
  border-bottom: unset;
}

.no-bold {
  font-weight: normal;
}

.btn-light {
  cursor: pointer;
  outline: none;
  outline: none !important;
  border: 1px solid #CCC;
  background-color: #CCC;
}

.btn-light:hover {
  background-color: #BBB;
  border-color: #BBB;
}

.area-validation-CPF {
  position: relative;
}

.icon-invalid-CPF {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translate(0%, -50%);
  color: #FF0000;
}

.tooltip-CPF-invalido {
  --bs-tooltip-bg: #FF0000 !important;
}

.custom-tooltip {
  --bs-tooltip-bg: #FF0 !important;
  --bs-tooltip-color: #000 !important;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-margin: 1rem;
}

.nome-props {
  --bs-tooltip-bg: #0A58CA;
  --bs-tooltip-opacity: 1;
  font-size: 14px !important;
}

ul.pagination {
  flex-wrap: wrap;

  .page-item {
    margin: 0.25rem 0;
  }
}

.list-group-item {
  display: flex;
  gap: 0.5rem;

  /* Expandindo espaço do label para que o click seja mais fácil */

  [for] {
    flex-grow: 2;
  }
}

@media screen and (max-width: 600px) {
  #modal-editar-informacoes .modal-body form > .row {
    display: block;
  }
}

.none {
  display: none;
}

.block {
  display: block;
}

.font-inter {
  font-family: "Inter", sans-serif;
}

.button-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.swal2-html-container {
  font-size: 1rem !important;
}

@media screen and (max-width: 768px) {
  .grupo-footer img {
    position: relative;
  }
}

@media print {
  .div-flutuante,
  .modo-visualizacao-logo-cca {
    display: none !important;
  }

  .principal {
    overflow: hidden !important;
  }

  /* Se a logo padrão estiver na capa, no momento da impressão ela é ocultada */
  [src="./assets/img/logo-padrao.png"] {
    visibility: hidden;
  }
}