:root {
  --azul-principal: #02104F;
  --azul-destaque: #1976D2;
  --azul-fundo: #f8faff;
  --cinza-fundo: #EEF6FF;
  --cinza-card: #fff;
  --azul-leve: #BFE8FF;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--azul-fundo);
  color: #273042;
  margin: 0;
}

header {
  background: var(--azul-principal);
  color: #fff;
  padding: 24px 0 18px 0;
  text-align: center;
  border-bottom: 4px solid #65BEDD;
}

header img {
  height: 64px;
  margin-bottom: 10px;
}

header h1 {
  font-size: 2.2rem;
  margin: 0;
  font-weight: 700;
  letter-spacing: 1px;
  word-break: break-word;
}

header p {
  margin: 8px 0 0 0;
  font-size: 1.16em;
  color: var(--azul-leve);
}

.main {
  max-width: 950px;
  margin: 32px auto 0 auto;
  background: var(--cinza-card);
  border-radius: 20px;
  box-shadow: 0 2px 14px #02104F15;
  padding: 36px 38px 32px 38px;
  word-break: break-word;
}

h2.folder {
  color: var(--azul-destaque);
  font-size: 1.25em;
  margin-top: 38px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 7px;
  word-break: break-word;
}

ul {
  margin-bottom: 30px;
  background: var(--cinza-fundo);
  padding: 18px 18px 18px 22px;
  border-radius: 8px;
  box-shadow: 0 1px 6px #02104F08;
  overflow-wrap: break-word;
}

li {
  margin: 10px 0;
  font-size: 1.06em;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  word-break: break-word;
}

.folder {
  font-weight: bold;
}

.file {
  color: #0a2989;
  font-weight: 500;
}

code {
  background: #eaf0fc;
  padding: 2px 6px;
  border-radius: 5px;
}

.obs {
  color: #1976D2;
  font-size: .99em;
  margin-top: 8px;
  margin-bottom: 6px;
  word-break: break-word;
}

.icon-folder, .icon-file {
  vertical-align: middle;
  color: #2196F3;
}

.icon-file {
  color: #02104F;
}

.icon-alert {
  color: #1976D2;
}

footer {
  background: var(--azul-principal);
  color: var(--azul-leve);
  padding: 20px 0 12px 0;
  text-align: center;
  border-top: 2px solid #65BEDD;
  margin-top: 54px;
  font-size: 1em;
  border-radius: 0 0 18px 18px;
}

a {
  color: var(--azul-destaque);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* MOBILE */
@media (max-width: 700px) {
  .main {
    padding: 10px 2vw 12px 2vw;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
  }

  header img {
    height: 38px;
  }

  h2.folder {
    font-size: 1em;
  }

  body {
    padding: 0;
  }

  ul, li, .main, header, footer {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  li {
    font-size: 1em;
    flex-direction: column;
    align-items: flex-start;
  }
}