/* ============================================================
   EmDia Pro — Design System (Tema Claro / Light)
   Linkado por todas as páginas. Visual limpo e corporativo.
   ============================================================ */

:root {
  --bg: #F5F7F6;            /* fundo principal da app (cinza bem claro) */
  --bg-2: #FFFFFF;          /* sidebar / superfícies brancas */
  --bg-card: #FFFFFF;       /* cards */
  --bg-soft: #F0F3F1;       /* seções suaves */
  --border: #E3E8E5;        /* bordas claras */
  --border-2: #D5DCD8;      /* bordas um pouco mais fortes */
  --text: #0F1A16;          /* texto principal (quase preto esverdeado) */
  --muted: #5B6B64;         /* texto secundário */
  --muted-2: #93A099;       /* texto terciário / placeholders */
  --green: #1D9E75;         /* cor de destaque principal */
  --green-dark: #16805F;    /* hover de botões */
  --green-light: #5DFCB8;   /* verde claro (detalhes/gradientes) */
  --green-soft: #E8F6F0;    /* fundo verde bem suave (chips, ativos) */
  --gold: #BA7517;
  --error: #EF4444;
  --radius: 16px;
  --radius-sm: 10px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --trans: 0.2s ease;
  --shadow: 0 1px 3px rgba(15,26,22,0.06), 0 6px 20px -12px rgba(15,26,22,0.12);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--green-dark); }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.2; color: var(--text); }

/* ---------- Logo (dot verde + EmDia Pro) ---------- */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(29,158,117,0.15);
  flex-shrink: 0;
}
.logo-name {
  font-family: var(--font-head); font-weight: 800; font-size: 21px;
  color: var(--text); letter-spacing: -0.4px;
}
.logo-name span { color: var(--green); }
.logo-sm .logo-name { font-size: 18px; }
.logo-sm .logo-dot { width: 12px; height: 12px; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  padding: 13px 22px; transition: all var(--trans); text-align: center;
}
.btn-primary {
  background: var(--green);
  color: #ffffff;
}
.btn-primary:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(29,158,117,0.55);
}
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost {
  background: #ffffff; color: var(--text);
  border: 1px solid var(--border-2);
}
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--green); color: var(--green-dark); transform: translateY(-1px); }
.btn-block { width: 100%; }

/* ---------- Inputs ---------- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
input, select, textarea {
  width: 100%; padding: 12px 14px; font-size: 15px; font-family: var(--font);
  background: #ffffff; border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); color: var(--text); outline: none;
  transition: border-color var(--trans), box-shadow var(--trans);
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, select:focus, textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(29,158,117,0.15);
}
select option { background: #ffffff; color: var(--text); }
.form-group { margin-bottom: 16px; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow);
}

/* ---------- Mensagens ---------- */
.msg { margin-top: 12px; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13px; display: none; }
.msg.erro { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.msg.ok { background: var(--green-soft); color: var(--green-dark); border: 1px solid #BBE9D8; }
.msg.visivel { display: block; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-head);
}
.badge-green { background: var(--green-soft); color: var(--green-dark); border: 1px solid #BBE9D8; }
.badge-gold { background: #FBF1E0; color: #9A6012; border: 1px solid #F0DBB8; }
.badge-info { background: #E6F0FB; color: #1D5FA8; border: 1px solid #C7DCF3; }
.badge-red { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }

/* ---------- Footer ---------- */
.emdia-footer {
  text-align: center; padding: 22px 16px; font-size: 12px; color: var(--muted-2);
}
.emdia-footer .logo-dot { width: 8px; height: 8px; display: inline-block; vertical-align: middle; margin-right: 5px; box-shadow: none; }

/* ---------- Utilitários ---------- */
.text-italic-accent { font-style: italic; color: var(--green); }
.muted { color: var(--muted); }
.center { text-align: center; }
.divider {
  display: flex; align-items: center; gap: 14px; color: var(--muted-2);
  font-size: 12px; margin: 20px 0;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15,26,22,0.15); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15,26,22,0.28); }

/* ============================================================
   BOTÃO DE TROCA DE TEMA (claro / escuro)
   ============================================================ */
.theme-toggle {
  position: fixed; top: 14px; right: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border-2); color: var(--text);
  cursor: pointer; z-index: 9999; box-shadow: var(--shadow); transition: all 0.2s;
  font-family: var(--font); font-size: 12px; font-weight: 600;
}
.theme-toggle:hover { border-color: var(--green); color: var(--green); transform: translateY(-1px); }
.theme-toggle svg { width: 15px; height: 15px; }
@media (max-width: 700px) { .theme-toggle span { display: none; } .theme-toggle { padding: 8px; } }

/* ============================================================
   TEMA ESCURO — ativado por [data-theme="dark"] no <html>.
   Redefine os tokens e ajusta os pontos com cor fixa.
   ============================================================ */
:root[data-theme="dark"] {
  --bg: #0A0F0D;
  --bg-2: #0C1411;
  --bg-card: #111916;
  --bg-soft: #161F1B;
  --border: rgba(255,255,255,0.09);
  --border-2: rgba(255,255,255,0.16);
  --text: #F3F6F4;
  --muted: rgba(255,255,255,0.62);
  --muted-2: rgba(255,255,255,0.40);
  --green: #1D9E75;
  --green-dark: #5DFCB8;   /* acento de texto sobre fundo escuro */
  --green-light: #5DFCB8;
  --green-soft: rgba(29,158,117,0.16);
  --gold: #E0A44E;
  --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.6);
}

/* Componentes base */
[data-theme="dark"] .btn-primary:hover { background: #16805F; }
[data-theme="dark"] .btn-ghost { background: var(--bg-card); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: rgba(255,255,255,0.06); color: var(--text); }
[data-theme="dark"] select option { background: #111916; color: var(--text); }
[data-theme="dark"] .msg.erro { background: rgba(239,68,68,0.14); color: #FCA5A5; border-color: rgba(239,68,68,0.3); }
[data-theme="dark"] .msg.ok { background: rgba(29,158,117,0.14); color: #5DFCB8; border-color: rgba(29,158,117,0.35); }
[data-theme="dark"] .badge-green { background: rgba(29,158,117,0.18); color: #5DFCB8; border-color: rgba(29,158,117,0.35); }
[data-theme="dark"] .badge-gold { background: rgba(186,117,23,0.18); color: #E0A44E; border-color: rgba(186,117,23,0.4); }
[data-theme="dark"] .badge-info { background: rgba(59,130,246,0.16); color: #93C5FD; border-color: rgba(59,130,246,0.3); }
[data-theme="dark"] .badge-red { background: rgba(239,68,68,0.16); color: #FCA5A5; border-color: rgba(239,68,68,0.3); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); }
[data-theme="dark"] .logo-dot { box-shadow: 0 0 14px 2px rgba(93,252,184,0.5); }

/* Alertas / banners */
[data-theme="dark"] .alerta-amarelo { background: rgba(186,117,23,0.12); border-color: rgba(186,117,23,0.35); color: #E7B765; }
[data-theme="dark"] .alerta-amarelo .alerta-btn { background: rgba(186,117,23,0.3); color: #F0C989; }
[data-theme="dark"] .alerta-vermelho { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); color: #FCA5A5; }
[data-theme="dark"] .alerta-vermelho .alerta-btn { background: rgba(239,68,68,0.25); color: #FCA5A5; }
[data-theme="dark"] .alerta-verde { background: rgba(29,158,117,0.12); border-color: rgba(29,158,117,0.35); color: #5DFCB8; }
[data-theme="dark"] .alerta-verde .alerta-btn { background: rgba(29,158,117,0.3); color: #5DFCB8; }
[data-theme="dark"] .trial-banner { background: linear-gradient(135deg, rgba(186,117,23,0.16), rgba(29,158,117,0.10)); border-color: rgba(186,117,23,0.35); }
[data-theme="dark"] .trial-banner .tb-txt { color: var(--text); }
[data-theme="dark"] .trial-banner .tb-txt strong { color: #E0A44E; }
[data-theme="dark"] .dica-box { background: rgba(186,117,23,0.10); border-color: rgba(186,117,23,0.3); }
[data-theme="dark"] .dica-txt { color: #E7C99A; }

/* Botões / superfícies dos painéis */
[data-theme="dark"] .btn-copiar, [data-theme="dark"] .periodo-btn, [data-theme="dark"] .icon-btn, [data-theme="dark"] .cal-mes, [data-theme="dark"] .chat-msg.bot, [data-theme="dark"] .modal-box { background: var(--bg-card); }
[data-theme="dark"] .toggle-form-btn { border-color: rgba(29,158,117,0.35); }
[data-theme="dark"] .btn-salvar:hover, [data-theme="dark"] .btn-enviar:hover, [data-theme="dark"] .btn-add:hover, [data-theme="dark"] .btn-pagar-das:hover { background: #16805F; }
[data-theme="dark"] .status-pago { background: rgba(29,158,117,0.2); color: #5DFCB8; }
[data-theme="dark"] .cal-mes.pago { background: rgba(29,158,117,0.10); border-color: rgba(29,158,117,0.4); }
[data-theme="dark"] .cal-mes-btn:hover { background: rgba(29,158,117,0.3); }
[data-theme="dark"] .btn-cancel:hover { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .btn-sair-side:hover { background: rgba(239,68,68,0.14); color: #FCA5A5; border-color: rgba(239,68,68,0.3); }
[data-theme="dark"] .toggle-form-btn:hover, [data-theme="dark"] .btn-contador:hover, [data-theme="dark"] .btn-mini.verde:hover { background: rgba(29,158,117,0.26); }

/* Pílulas (status) */
[data-theme="dark"] .pill-pendente { background: rgba(186,117,23,0.18); color: #E0A44E; }
[data-theme="dark"] .pill-vencido { background: rgba(239,68,68,0.18); color: #FCA5A5; }

/* Declaração anual (MEI) */
[data-theme="dark"] .decl-card { background: rgba(29,158,117,0.10); border-color: rgba(29,158,117,0.4); }
[data-theme="dark"] .decl-desc { color: rgba(255,255,255,0.8); }

/* Páginas legais */
[data-theme="dark"] .legal-card p, [data-theme="dark"] .legal-card li { color: rgba(255,255,255,0.82); }

/* Widget de suporte (estilos injetados via JS) */
[data-theme="dark"] #mw-panel { background: #111916; border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .mw-textarea { background: rgba(255,255,255,0.06); color: var(--text); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .mw-divider { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .mw-ok { background: rgba(29,158,117,0.14); color: #5DFCB8; border-color: rgba(29,158,117,0.35); }
[data-theme="dark"] .mw-err { background: rgba(239,68,68,0.14); color: #FCA5A5; border-color: rgba(239,68,68,0.3); }