/* =========================================================
   🔵 Tema Claro (padrão)
   ========================================================= */
:root {
  --blue-primary: #0071e3;
  --blue-light: #78b5ff;
  --yellow: #f5a623;
  --yellow-light: #ffce75;
  --white: #ffffff;

  --bg-primary: #fdfdfd;
  --bg-secondary: var(--white);
  --bg-tertiary: #f8f9fa;

  --bg-card: rgba(255, 255, 255, 0.8);
  --bg-interactive-accent: rgba(220, 235, 255, 0.6);

  --text-primary: #212529;
  --text-secondary: #495057;
  --text-muted: #6c757d;

  --border-primary: rgba(0, 0, 0, 0.08);
  --border-interactive: rgba(0, 0, 0, 0.12);

  --shadow-primary: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.10);

  --backdrop-blur: blur(15px);

  /* Gradientes */
  --gradient-blue: linear-gradient(135deg, var(--blue-primary), var(--blue-light));
  --gradient-yellow: linear-gradient(135deg, var(--yellow), var(--yellow-light));

  /* Fundo */
  --bg-gradient: linear-gradient(to bottom, #e0f0ff, #fff5e0);
  --page-padding: 32px;

  /* Genéricas */
  --card-bg: var(--bg-card);
  --card-border: var(--border-primary);
  --accent: var(--blue-primary);
  --muted: var(--text-muted);
  --text: var(--text-primary);
  --glass: rgba(0,0,0,0.04);
  --glass-2: rgba(0,0,0,0.06);

  color-scheme: light;
}

/* =========================================================
   🌙 Tema Escuro
   ========================================================= */
[data-theme="dark"] {
  --bg-gradient: linear-gradient(180deg, #071018, #071b14);
  --card-bg: rgba(15, 25, 30, 0.8);
  --card-border: rgba(255,255,255,0.06);

  --text: #e6eef3;
  --muted: #e0e0e0;

  --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.03);

  --accent: #7ee787;

  color-scheme: dark;
}

#themeToggle {
  position: fixed;       /* fica sempre visível */
  top: 16px;             /* distância do topo */
  right: 16px;           /* distância do lado direito */
  z-index: 9999;         /* fica acima de tudo */
  background: #cecece40;
  padding: 8px 14px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: 0.25s;
}

#themeToggle:hover {
  background: #ffffff70;
}
/* =========================================================
   🧱 Estrutura Geral
   ========================================================= */
html { font-size: 18px; }
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  margin: 0;
  background: var(--bg-gradient);
  color: var(--text);
  padding: var(--page-padding);
}
.wrap {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

h1 { margin: 0; font-size: 40px; }
p.lead { margin: 0; color: var(--muted); font-size: 15px; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 18px;
  border-radius: 14px;
  box-shadow: var(--shadow-primary);
}

label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 10px; }

input[type="number"],
input[type="text"],
select {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--glass-2);
  background: transparent;
  color: inherit;
  font-size: 15px;
  box-sizing: border-box;
}

button {
  background: var(--accent);
  color: #ffffff;
  border: none;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
}

.muted { color: var(--muted); }
.small { font-size: 14px; color: var(--muted); }

table { width: 100%; margin-top: 10px; border-collapse: collapse; }
th, td {
  padding: 10px;
  border-bottom: 1px dashed var(--glass-2);
  text-align: left;
  font-size: 14px;
}

.right { text-align: right; }
.controls { display: flex; gap: 10px; flex-wrap: wrap; }
.full { grid-column: 1 / -1; }

.preset-btn {
  background: transparent;
  border: 1px solid var(--glass-2);
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
}

.result {
  background: linear-gradient(90deg, rgba(34,197,94,0.08), rgba(34,197,94,0.02));
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(34,197,94,0.12);
  color: var(--accent);
  font-weight: 700;
}

footer { font-size: 13px; color: var(--muted); margin-top: 10px; }

.theme-toggle {
  background: transparent;
  border: 1px solid var(--glass-2);
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
}

/* =========================================================
   🧩 Tabs – só Geração Solar e Consumo de Aparelhos
   ========================================================= */
.tab-nav {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--glass-2);
  margin-bottom: 20px;
}
.tab-btn {
  padding: 10px 20px;
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 16px;
}
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 700;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* =========================================================
   🔵 LOGO — igual ao print e alinhado perfeito
   ========================================================= */
.header-logo {
  text-decoration: none;
  display: inline-flex;
  align-items: flex-start;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  position: relative;
}

.logo-main {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(90deg, #3A86FF, #7AB6FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Inter', sans-serif;
}

.logo-sub {
  font-size: 16px;
  font-weight: 400;
  color: #6e6e6e;
  margin-top: -2px;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.2px;

  /* alinhamento milimétrico do "a" com o "e" de Blue */
  padding-left: 12.4px;
}

/* =========================================================
   📱 Responsivo
   ========================================================= */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
}
/* =========================================================
   🔵 HEADER COM LOGO NO TOPO
   ========================================================= */

.global-header {
  backdrop-filter: var(--backdrop-blur);
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

/* LOGO no topo separado */
.header-logo-top {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 4px;
}

.header-logo {
  text-decoration: none;
  display: inline-flex;
  align-items: flex-start;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-main {
  font-size: 38px;
  font-weight: 700;
  background: linear-gradient(90deg, #3A86FF, #7AB6FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-sub {
  font-size: 17px;
  color: #6e6e6e;
  margin-top: -5px;
  padding-left: 24px; /* alinhamento do a com o e */
}

/* Barra de tabs centralizada */
.tab-nav-container {
  display: flex;
  justify-content: center;
}

.tab-nav {
  display: flex;
  gap: 10px;
  padding: 8px;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--glass-2);
  border-radius: 14px;
  backdrop-filter: var(--backdrop-blur);
  box-shadow: var(--shadow-primary);
}

.tab-btn {
  padding: 9px 20px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 15px;
  border-radius: 10px;
  transition: 0.18s;
}

.tab-btn:hover {
  background: rgba(0,0,0,0.05);
}

.tab-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* Título */
.header-title-strip {
  text-align: center;
  padding: 10px 0 6px;
}

.header-title-strip h1 {
  font-size: 34px;
  margin: 0;
}

.header-title-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  opacity: .9;
}