/* =========================================================
   VARIÁVEIS
========================================================= */

:root {
  --azul: #007acc;
  --azul-claro: #00a8ff;
  --azul-escuro: #0b3150;

  --fundo: #f4f7fb;
  --fundo-card: #ffffff;
  --fundo-secundario: #eef4f8;

  --texto: #18212b;
  --texto-secundario: #64748b;

  --borda: #000000;

  --codigo: #1e1e1e;
  --codigo-texto: #d4d4d4;

  --sucesso: #198754;
  --alerta: #f59e0b;
  --erro: #dc3545;

  --sombra: 0 8px 25px rgba(0, 0, 0, 0.08);

  --sombra-hover: 0 15px 35px rgba(0, 0, 0, 0.14);

  --raio: 16px;
}

/* =========================================================
   TEMA ESCURO
========================================================= */

body.escuro {
  --fundo: #0b1117;

  --fundo-card: #111820;

  --fundo-secundario: #19232d;

  --texto: #e6edf3;

  --texto-secundario: #a7b2bd;

  --borda: #000000;

  --sombra: 0 8px 25px rgba(0, 0, 0, 0.35);

  --sombra-hover: 0 15px 40px rgba(0, 0, 0, 0.45);
}

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

* {
  margin: 0;

  padding: 0;

  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

  background: var(--fundo);

  color: var(--texto);

  line-height: 1.7;

  transition:
    background 0.3s ease,
    color 0.3s ease;
}

button,
input {
  font-family: inherit;
}

/* =========================================================
   HEADER
========================================================= */

.header {
  position: relative;

  overflow: hidden;

  color: white;

  background:
    radial-gradient(circle at 90% 0%, rgba(0, 210, 255, 0.35), transparent 28%),
    radial-gradient(circle at 5% 100%, rgba(80, 60, 220, 0.2), transparent 28%),
    linear-gradient(120deg, #071a2b 0%, #07589a 45%, #00a8e8 100%);

  /*
       Header compacto
    */

  padding: 18px 20px 0px;
}

/* =========================================================
   ELEMENTOS DECORATIVOS DO HEADER
========================================================= */

.header::before {
  content: "";

  position: absolute;

  width: 400px;

  height: 400px;

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

  border-radius: 50%;

  right: -190px;

  top: -250px;
}

.header::after {
  content: "";

  position: absolute;

  width: 280px;

  height: 280px;

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

  border-radius: 50%;

  left: -160px;

  bottom: -230px;
}

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

.header-conteudo {
  max-width: 1150px;

  margin: auto;

  position: relative;

  z-index: 2;

  /*
       Sobe o conteúdo do header
    */

  transform: translateY(-20px);
}

/* =========================================================
   TOPO DO HEADER
========================================================= */

.topo-header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;
}

/*
   Como o botão de tema saiu do header,
   o topo fica mais limpo.
*/

.topo-header {
  justify-content: flex-start;
}

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

.logo {
  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 21px;

  font-weight: 700;

  letter-spacing: 1px;
}

.logo-icone {
  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 12px;

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

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

  font-size: 23px;

  font-weight: bold;
}

/* =========================================================
   BOTÃO TEMA FLUTUANTE
========================================================= */

.botao-tema {
  position: fixed;

  right: 20px;

  bottom: 82px;

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #000;

  border-radius: 50%;

  background: var(--fundo-card);

  color: var(--texto);

  cursor: pointer;

  font-size: 20px;

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);

  transition: 0.25s;

  z-index: 100;
}

.botao-tema:hover {
  transform: translateY(-4px);

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);

  background: var(--azul);

  color: white;
}

/*
   Texto do botão

   Se estiver usando:

   🌙 Tema escuro

   o CSS mantém o botão circular.

   Para um visual mais limpo,
   recomendamos usar apenas:

   🌙

   ou:

   ☀️
*/

/* =========================================================
   HERO
========================================================= */

.hero {
  max-width: 850px;
}

.tag {
  display: inline-block;

  padding: 6px 13px;

  border-radius: 50px;

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

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

  font-size: 12px;

  font-weight: 700;

  margin-bottom: 12px;
}

/* =========================================================
   TÍTULO PRINCIPAL
========================================================= */

.hero h1 {
  font-size: clamp(38px, 5vw, 58px);

  line-height: 1.05;

  letter-spacing: -2px;

  margin-bottom: 10px;
}

.hero p {
  max-width: 850px;

  font-size: 17px;

  line-height: 1.6;

  color: #eaf8ff;
}

/* =========================================================
   ÁREA DE PESQUISA
========================================================= */

.area-pesquisa {
  max-width: 950px;

  margin: -28px auto 0;

  padding: 0 20px;

  position: relative;

  z-index: 10;
}

.caixa-pesquisa {
  display: flex;

  align-items: center;

  gap: 12px;

  background: var(--fundo-card);

  border: 1px solid #000;

  border-radius: 15px;

  padding: 7px 12px 7px 18px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.icone-pesquisa {
  font-size: 21px;
}

.caixa-pesquisa input {
  flex: 1;

  border: none;

  outline: none;

  background: transparent;

  color: var(--texto);

  font-size: 16px;

  padding: 13px 5px;
}

.caixa-pesquisa input::placeholder {
  color: #777;
}

.atalho {
  background: var(--fundo-secundario);

  border: 1px solid #aaa;

  padding: 4px 8px;

  border-radius: 6px;

  color: var(--texto-secundario);

  font-size: 12px;

  white-space: nowrap;
}

/* =========================================================
   RESULTADOS DA PESQUISA
========================================================= */

.resultados {
  max-width: 950px;

  margin: 10px auto;

  padding: 0 20px;
}

.resultado {
  display: block;

  text-decoration: none;

  color: var(--texto);

  background: var(--fundo-card);

  border: 1px solid #000;

  border-radius: 10px;

  padding: 13px 16px;

  margin-bottom: 7px;

  transition: 0.2s;
}

.resultado:hover {
  border-color: var(--azul);

  transform: translateX(4px);

  box-shadow: var(--sombra);
}

.resultado small {
  display: block;

  color: var(--texto-secundario);
}

.status-pesquisa {
  max-width: 950px;

  margin: 8px auto;

  padding: 0 20px;

  color: var(--texto-secundario);

  font-size: 14px;
}

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

main {
  max-width: 1050px;

  margin: 0 auto;

  padding: 42px 20px;
}

/* =========================================================
   INTRODUÇÃO
========================================================= */

.introducao {
  background: var(--fundo-card);

  border: 1px solid #000;

  border-radius: var(--raio);

  padding: 28px;

  margin-bottom: 28px;

  box-shadow: var(--sombra);
}

.introducao h2 {
  color: var(--azul);

  margin-bottom: 10px;
}

/* =========================================================
   CARDS DOS CAPÍTULOS
========================================================= */

.capitulo {
  background: var(--fundo-card);

  border: 1px solid #000;

  border-radius: var(--raio);

  padding: 32px;

  margin-bottom: 26px;

  box-shadow: var(--sombra);

  scroll-margin-top: 25px;

  transition:
    transform 0.25s,
    box-shadow 0.25s;
}

.capitulo:hover {
  transform: translateY(-2px);

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

/* =========================================================
   TÍTULOS
========================================================= */

.capitulo h2 {
  font-size: 27px;

  line-height: 1.2;

  padding-bottom: 14px;

  margin-bottom: 23px;

  border-bottom: 1px solid var(--borda);
}

.capitulo h3 {
  font-size: 20px;

  margin: 24px 0 9px;
}

.capitulo p {
  margin-bottom: 12px;
}

.capitulo ul,
.capitulo ol {
  margin: 10px 0 20px 25px;
}

.capitulo li {
  margin-bottom: 7px;
}

/* =========================================================
   CAIXAS DE CONTEÚDO
========================================================= */

.box {
  padding: 17px;

  border-radius: 11px;

  margin: 17px 0;

  border-left: 5px solid;
}

.box strong {
  display: block;

  margin-bottom: 5px;
}

/* DEFINIÇÃO */

.definicao {
  background: rgba(0, 122, 204, 0.09);

  border-color: var(--azul);
}

/* EXPLICAÇÃO */

.explicacao {
  background: var(--fundo-secundario);

  border-color: #64748b;
}

/* EXEMPLO */

.exemplo {
  background: rgba(25, 135, 84, 0.09);

  border-color: var(--sucesso);
}

/* DICA */

.dica {
  background: rgba(245, 158, 11, 0.1);

  border-color: var(--alerta);
}

/* ATENÇÃO */

.atencao {
  background: rgba(220, 53, 69, 0.09);

  border-color: var(--erro);
}

/* =========================================================
   CÓDIGO
========================================================= */

pre {
  background: #1e1e1e;

  color: #d4d4d4;

  padding: 18px;

  border-radius: 9px;

  overflow-x: auto;

  margin: 14px 0 18px;

  font-family: Consolas, "Courier New", monospace;

  font-size: 14px;

  border: 1px solid #000;
}

code {
  font-family: Consolas, "Courier New", monospace;
}

.codigo-inline {
  background: var(--fundo-secundario);

  border: 1px solid #aaa;

  padding: 2px 6px;

  border-radius: 5px;

  font-family: Consolas, monospace;
}

/* =========================================================
   TABELAS
========================================================= */

.tabela-container {
  overflow-x: auto;
}

table {
  width: 100%;

  border-collapse: collapse;

  min-width: 600px;

  border: 1px solid #000;
}

th,
td {
  padding: 11px;

  border: 1px solid #000;

  text-align: left;
}

th {
  background: var(--azul);

  color: white;
}

tr:nth-child(even) {
  background: var(--fundo-secundario);
}

/* =========================================================
   CHECKLIST
========================================================= */

.checklist {
  list-style: none;

  margin-left: 0 !important;
}

.checklist li {
  background: var(--fundo-secundario);

  border: 1px solid #000;

  padding: 11px 14px;

  border-radius: 8px;

  margin-bottom: 8px;

  transition: 0.2s;
}

.checklist input {
  margin-right: 10px;
}

/* =========================================================
   BOTÃO VOLTAR AO TOPO
========================================================= */

.botao-topo {
  position: fixed;

  right: 20px;

  bottom: 20px;

  width: 46px;

  height: 46px;

  border: 1px solid #000;

  border-radius: 50%;

  background: var(--azul);

  color: white;

  cursor: pointer;

  font-size: 20px;

  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.25);

  opacity: 0;

  visibility: hidden;

  transition: 0.3s;

  z-index: 100;
}

.botao-topo.mostrar {
  opacity: 1;

  visibility: visible;
}

/* =========================================================
   FOOTER
========================================================= */

footer {
  text-align: center;

  background: #071018;

  color: #b9c5d0;

  padding: 30px 20px;
}

/* =========================================================
   RESPONSIVIDADE
========================================================= */

@media (max-width: 760px) {
  /* HEADER */

  .header {
    padding: 20px 16px 15px;
  }

  .header-conteudo {
    transform: translateY(-10px);
  }

  /* TOPO */

  .topo-header {
    margin-bottom: 20px;
  }

  /* LOGO */

  .logo {
    font-size: 17px;
  }

  .logo-icone {
    width: 42px;

    height: 42px;

    font-size: 20px;
  }

  /* TÍTULO */

  .hero h1 {
    font-size: 39px;

    letter-spacing: -1.5px;
  }

  .hero p {
    font-size: 15px;
  }

  /* PESQUISA */

  .area-pesquisa {
    padding: 0 12px;
  }

  .caixa-pesquisa {
    padding: 6px 12px;
  }

  .caixa-pesquisa input {
    font-size: 15px;
  }

  .atalho {
    display: none;
  }

  /* CONTEÚDO */

  main {
    padding: 30px 12px;
  }

  /* CARDS */

  .capitulo {
    padding: 21px;
  }

  .capitulo h2 {
    font-size: 23px;
  }

  /* INTRODUÇÃO */

  .introducao {
    padding: 22px;
  }

  /* CAIXAS */

  .box {
    padding: 15px;
  }

  /* CÓDIGO */

  pre {
    font-size: 13px;

    padding: 14px;
  }

  /* BOTÃO TEMA */

  .botao-tema {
    right: 15px;

    bottom: 75px;

    width: 44px;

    height: 44px;

    font-size: 18px;
  }

  /* BOTÃO TOPO */

  .botao-topo {
    right: 15px;

    bottom: 18px;

    width: 44px;

    height: 44px;

    font-size: 18px;
  }
}