/* =========================================================
   CONFIGURAÇÕES GERAIS
========================================================= */

:root {

  --primary: #135fa7;
  --primary-dark: #0d477e;
  --primary-light: #eaf4ff;

  --help: #137caa;
  --help-light: #edf9ff;

  --background: #f4f8fc;

  --white: #ffffff;

  --text: #1d2b3a;
  --text-light: #667789;

  --border: #d9e4ef;

  --shadow:
    0 8px 25px rgba(27, 70, 110, 0.09);

  --shadow-hover:
    0 14px 35px rgba(27, 70, 110, 0.17);

  --radius: 16px;

}



/* =========================================================
   RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



html {
  scroll-behavior: smooth;
}



body {

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

  background:
    linear-gradient(
      180deg,
      #eef5fb 0%,
      #f8fbfe 45%,
      #f4f8fc 100%
    );

  color: var(--text);

  min-height: 100vh;

}



button,
a {

  font-family: inherit;

}



/* =========================================================
   ESTRUTURA
========================================================= */

.page-wrapper {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



/* =========================================================
   CABEÇALHO
========================================================= */

.header {

  background:
    linear-gradient(
      135deg,
      #0d477e,
      #176ab3
    );

  color: white;

  box-shadow:
    0 4px 18px
    rgba(14, 57, 94, 0.20);

}



.header-content {

  width: min(
    1500px,
    calc(100% - 60px)
  );

  margin: auto;

  min-height: 105px;

  display: flex;

  align-items: center;

  gap: 25px;

}



/* =========================================================
   LOGO
========================================================= */

.logo-area {

  width: 155px;

  height: 68px;

  border-radius: 10px;

  background: white;

  border:
    1px solid
    rgba(255,255,255,0.5);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #8b9bad;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 1px;

}



.logo-area img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

}



.header-text h1 {

  font-size: 27px;

  font-weight: 700;

  letter-spacing: -0.5px;

}



.header-text p {

  margin-top: 5px;

  color:
    rgba(255,255,255,0.82);

  font-size: 14px;

}



/* =========================================================
   CONTEÚDO
========================================================= */

.main-content {

  flex: 1;

  width: min(
    1500px,
    calc(100% - 60px)
  );

  margin: 0 auto;

  padding:
    35px 0
    45px;

}



/* =========================================================
   CABEÇALHO DAS SEÇÕES
========================================================= */

.section-header {

  margin-bottom: 17px;

}



.section-header h2 {

  font-size: 21px;

  font-weight: 700;

  color: var(--text);

}



.section-header p {

  margin-top: 4px;

  font-size: 13px;

  color: var(--text-light);

}



.help-title {

  margin-top: 38px;

}



/* =========================================================
   GRID
========================================================= */

.systems-grid {

  display: grid;

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

  gap: 18px;

}



/* =========================================================
   CARDS
========================================================= */

.system-card {

  position: relative;

  min-height: 135px;

  padding: 21px;

  overflow: hidden;

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

  border-radius:
    var(--radius);

  background:
    rgba(255,255,255,0.95);

  box-shadow:
    var(--shadow);

  color:
    var(--text);

  text-align: left;

  text-decoration: none;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 16px;

  transition:
    transform 0.20s ease,
    box-shadow 0.20s ease,
    border-color 0.20s ease,
    background 0.20s ease;

}



.system-card:hover {

  transform:
    translateY(-4px);

  box-shadow:
    var(--shadow-hover);

  border-color:
    #9cc5e8;

  background:
    #ffffff;

}



/* =========================================================
   ÍCONE DOS CARDS
========================================================= */

.card-icon {

  width: 52px;

  height: 52px;

  min-width: 52px;

  border-radius: 13px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    var(--primary-light);

  color:
    var(--primary);

  font-size: 14px;

  font-weight: 800;

  letter-spacing: 0.5px;

}



/* =========================================================
   CONTEÚDO DO CARD
========================================================= */

.card-content {

  flex: 1;

}



.card-label {

  display: block;

  margin-bottom: 6px;

  color:
    var(--primary);

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.8px;

}



.card-content h3 {

  font-size: 16px;

  line-height: 1.3;

  font-weight: 650;

}



/* =========================================================
   SETA
========================================================= */

.card-arrow {

  font-size: 23px;

  font-weight: 300;

  color:
    #9baaba;

  transition:
    transform .2s ease,
    color .2s ease;

}



.system-card:hover
.card-arrow {

  transform:
    translateX(3px);

  color:
    var(--primary);

}



/* =========================================================
   CENTRAL DE AJUDA
========================================================= */

.help-card {

  background:
    linear-gradient(
      135deg,
      #ffffff,
      var(--help-light)
    );

}



.help-card
.card-icon {

  background:
    #e3f5fc;

  color:
    var(--help);

}



.help-card
.card-label {

  color:
    var(--help);

}



/* =========================================================
   ÁREA DO SISTEMA
========================================================= */

.system-area {

  width: 100%;

}



.hidden {

  display: none !important;

}



/* =========================================================
   BARRA SUPERIOR DO SISTEMA
========================================================= */

.system-toolbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  margin-bottom: 18px;

  padding: 15px 18px;

  background: white;

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

  border-radius: 14px;

  box-shadow:
    var(--shadow);

}



.toolbar-left {

  display: flex;

  align-items: center;

  gap: 22px;

}



.btn-back,
.btn-external {

  border: none;

  border-radius: 9px;

  padding: 11px 16px;

  cursor: pointer;

  font-size: 13px;

  font-weight: 600;

  transition: .2s ease;

}



.btn-back {

  background:
    var(--primary-light);

  color:
    var(--primary);

}



.btn-back:hover {

  background:
    #dceeff;

}



.btn-external {

  background:
    var(--primary);

  color:
    white;

}



.btn-external:hover {

  background:
    var(--primary-dark);

}



.system-title-area span {

  display: block;

  margin-bottom: 2px;

  font-size: 11px;

  color: var(--text-light);

  text-transform: uppercase;

  letter-spacing: .6px;

}



.system-title-area h2 {

  font-size: 18px;

}



/* =========================================================
   IFRAME
========================================================= */

.iframe-container {

  width: 100%;

  height:
    calc(100vh - 230px);

  min-height: 650px;

  overflow: hidden;

  background: white;

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

  border-radius:
    14px;

  box-shadow:
    var(--shadow);

}



.iframe-container iframe {

  width: 100%;

  height: 100%;

  border: none;

  display: block;

}



/* =========================================================
   RODAPÉ
========================================================= */

.footer {

  margin-top: auto;

  background:
    #0d3152;

  color:
    rgba(255,255,255,0.82);

}



.footer-content {

  width: min(
    1500px,
    calc(100% - 60px)
  );

  margin: auto;

  padding:
    18px 0;

}



.footer-info {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 9px;

  font-size: 12px;

}



.footer a {

  color:
    #a9d7ff;

  text-decoration: none;

}



.footer a:hover {

  text-decoration: underline;

}



.separator {

  color:
    rgba(255,255,255,0.25);

}



.footer-bottom {

  margin-top: 9px;

  padding-top: 9px;

  border-top:
    1px solid
    rgba(255,255,255,0.12);

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 11px;

}



/* =========================================================
   RESPONSIVO
========================================================= */

@media
(max-width: 1100px) {

  .systems-grid {

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

  }

}



@media
(max-width: 700px) {

  .header-content,
  .main-content,
  .footer-content {

    width:
      calc(100% - 30px);

  }


  .header-content {

    min-height: 95px;

  }


  .logo-area {

    width: 115px;

    height: 58px;

  }


  .header-text h1 {

    font-size: 20px;

  }


  .systems-grid {

    grid-template-columns: 1fr;

  }


  .system-card {

    min-height: 105px;

    padding: 17px;

  }


  .system-toolbar {

    flex-direction: column;

    align-items: stretch;

  }


  .toolbar-left {

    flex-direction: column;

    align-items: stretch;

    gap: 12px;

  }


  .btn-back,
  .btn-external {

    width: 100%;

  }


  .iframe-container {

    height:
      calc(100vh - 265px);

    min-height: 550px;

  }


  .footer-bottom {

    flex-direction: column;

    align-items: flex-start;

    gap: 7px;

  }

}



@media
(max-width: 450px) {

  .header-content {

    gap: 12px;

  }


  .logo-area {

    width: 90px;

    height: 52px;

  }


  .header-text p {

    font-size: 12px;

  }


  .main-content {

    padding-top: 25px;

  }


  .card-content h3 {

    font-size: 15px;

  }


  .card-icon {

    width: 46px;

    height: 46px;

    min-width: 46px;

  }

}