@import "./reset.css";
@import "./general.css";

#emissoes, #documentos-emissao {  
  background-color: #FBFBFB;
  padding: 4rem 1rem;  
  margin-bottom: 0;  
}
#emissoes .cardsContainer {
  display: grid; 
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(338px, 1fr));
  justify-content: center;
}
#emissoes .card {
  border: 1px solid #C7CFD9;
  padding: 1rem;
  border-radius: .5rem;
}
#emissoes .card .label{
  display: flex;
  justify-content: space-between;
  padding: .5rem 1rem;
}
#emissoes .card .label.bgAzul{ background-color: #F2F8FF; }
#emissoes .card .label p {
  font-size: 1rem;
  line-height: 1.5em;
  align-self: center;
  color: #455A73;
}  
#emissoes .card .label p:first-of-type { 
  font-weight: 600;
  color: #00224B;
}
#emissoes .card .label .status {
  background-color:#1854FF;
  padding: .125rem .75rem;
  border-radius: 1rem;
  color: #fff;
}
#emissoes .card .label .status.ativo { background-color:#019257; }
#emissoes .card button{
  position: relative;
  display: flex; 
  width: 100%;
  padding: 1rem;
  margin-top: 1rem;
  
  font-family: 'DM Sans';
  font-size: .9375rem;
  line-height: 1.25em;
  font-weight: 500;
  color: #003FF2;

  background-color: transparent;
  border: 1px solid #C1E0FF;
  border-radius: .5rem;
  font-style: normal;

  transition: .3s;
  cursor: pointer;
}
#emissoes .card button::after{
  content: ' ';
  display: block;
  position: absolute;
  background-image: url('../../images/Icon-arrow-right.svg');
  background-size: contain;
  width: 1.25rem;
  aspect-ratio: 1/1;
  right: 1rem;
  transition: .3s;
}
#emissoes .card button:hover{
  background-color: #003FF2;
  color: #fff;
}
#emissoes .card button:hover:after{ 
  background-image: url('../../images/Icon-arrow-right-alt.svg'); 
  right: .75rem;
}
#documentos-emissao {display: none;}
#documentos-emissao button{ 
  display: flex;
  width: 40px;
  aspect-ratio: 1/1;
  margin-bottom: 1.5rem;

  background: url('../../images/Icon-arrow-right.svg') no-repeat center;  
  border: 1px solid #C1E0FF;
  border-radius: .5rem;

  transform: rotate(180deg); 
  cursor: pointer;
  transition: background-color .3s;  
}
#documentos-emissao button:hover{
  background-color: #003FF2;
  background-image: url('../../images/Icon-arrow-right-alt.svg');  
}
#documentos-emissao .headerMenu {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;

  background: #fff;
  border-radius: .5rem;
  border-bottom: 1px solid #C7CFD9;

  overflow: hidden;
}
#documentos-emissao .headerMenu li{
  margin: 0 auto;
  text-align: center;
  padding: 1rem;

  color: #455A73;
  font-size: 1rem;
  line-height: 1.25em;  
  font-weight: 500;
  
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
#documentos-emissao .headerMenu li.active{
  color: #00224B;
  font-size: 1.1rem;
  line-height: 1.25rem;
  font-weight: 600;
  background-color: #F2F8FF;
  border-bottom-color: #3697ED;
  transition: border-bottom-color .5s;
}
#documentos-emissao .filesList {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  
  gap: .5rem;
  background-color: white;
  border-radius: .5rem;
  padding: 1.5rem;
  border: 1px solid #C7CFD9; 
}