:root{
  --brand: #094E67;
  --brand-rgb: 9, 78, 103;
  --bg: #0b1220;
  --panel: #0f1a2d;
  --panel-2: #0c1528;
  --text: #d8e6ee;
  --muted: #9fb9c6;
  --stroke: rgba(216,230,238,.12);
  --accent: rgba(var(--brand-rgb),.55);
  --good: #19c37d;
  --warn: #ff4d4d;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 14px;
}

* { 
  box-sizing: border-box; 
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  background: radial-gradient(1200px 800px at 15% 10%, rgba(var(--brand-rgb),.30), transparent 55%),
              radial-gradient(1200px 800px at 90% 30%, rgba(var(--brand-rgb),.18), transparent 60%),
              var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.container {
  width: 100%;
  max-width: 440px;
}

.logo-section {
  text-align: center;
  margin-bottom: 32px;
}

.logo-dot {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--brand), rgba(var(--brand-rgb),.35));
  box-shadow: inset 0 0 0 1px rgba(216,230,238,.14), var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--text);
}
.logo-img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  margin: 0 auto 16px;
  display: block;
}

.login-footer {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.footer-img {
  max-width: 260px;
  width: 70%;
  height: auto;
  display: none;
}

.footer-dark {
  display: block;
}

[data-theme="light"] .footer-dark {
  display: none;
}

[data-theme="light"] .footer-light {
  display: block;
}


.logo-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .5px;
  margin: 0 0 6px;
  background: linear-gradient(135deg, var(--text), var(--muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-subtitle {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .3px;
}

.card {
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(15,26,45,.92), rgba(12,21,40,.92));
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  letter-spacing: .3px;
  text-transform: uppercase;
}

.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 14px;
}

input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  background: rgba(var(--brand-rgb),.10);
  color: var(--text);
  transition: all .2s ease;
}

input:focus {
  border-color: rgba(var(--brand-rgb),.8);
  background: rgba(var(--brand-rgb),.15);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.15);
}

input::placeholder {
  color: rgba(159,185,198,.5);
}

button {
  width: 100%;
  margin-top: 24px;
  padding: 13px;
  border: 1px solid rgba(var(--brand-rgb),.8);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .4px;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(var(--brand-rgb),.85), rgba(var(--brand-rgb),.55));
  color: var(--text);
  transition: all .2s ease;
  box-shadow: 0 4px 12px rgba(var(--brand-rgb),.25);
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(var(--brand-rgb),.35);
  border-color: rgba(var(--brand-rgb),1);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.msg {
  margin-top: 18px;
  font-size: 13px;
  padding: 12px 14px;
  border-radius: 12px;
  display: none;
  text-align: center;
  font-weight: 600;
  letter-spacing: .2px;
}

.msg.error {
  background: rgba(255,77,77,.15);
  color: #ffb3b3;
  border: 1px solid rgba(255,77,77,.25);
}

.msg.ok {
  background: rgba(25,195,125,.15);
  color: #a8ffd6;
  border: 1px solid rgba(25,195,125,.25);
}

.hint {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--stroke);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}

.mini {
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.link {
  color: rgba(var(--brand-rgb),1);
  cursor: pointer;
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}

.link:hover {
  border-bottom-color: rgba(var(--brand-rgb),.8);
}

@media (max-width: 480px) {
  .card {
    padding: 24px;
  }
  
  .logo-dot {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }
  
  .logo-title {
    font-size: 20px;
  }
}
/* ===== TEMA CLARO PARA LOGIN ===== */
[data-theme="light"] {
--brand: #094E67;
  --brand-rgb: 9, 78, 103;
--bg: #e8f0f5;
--panel: #ffffff;
--panel-2: #f5f9fc;
--text: #1a2332;
--muted: #5c6f82;
--stroke: rgba(var(--brand-rgb),.15);
--accent: rgba(var(--brand-rgb),.25);
--good: #16a862;
--warn: #e63946;
--shadow: 0 10px 30px rgba(var(--brand-rgb),.15);
--radius: 14px;
}

[data-theme="light"] body {
background: radial-gradient(1200px 800px at 15% 10%, rgba(var(--brand-rgb),.08), transparent 55%),
          radial-gradient(1200px 800px at 90% 30%, rgba(var(--brand-rgb),.05), transparent 60%),
          var(--bg);
}

[data-theme="light"] .card {
background: linear-gradient(180deg, #ffffff, rgba(245,249,252,.98));
box-shadow: 0 8px 24px rgba(var(--brand-rgb),.15);
}

[data-theme="light"] input {
background: rgba(var(--brand-rgb),.05);
border-color: rgba(var(--brand-rgb),.20);
}

[data-theme="light"] input:focus {
background: rgba(var(--brand-rgb),.10);
border-color: rgba(var(--brand-rgb),.50);
box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.08);
}

[data-theme="light"] button {
background: linear-gradient(135deg, rgba(var(--brand-rgb),.85), rgba(var(--brand-rgb),.65));
border-color: rgba(var(--brand-rgb),.90);
box-shadow: 0 4px 12px rgba(var(--brand-rgb),.25);
}

[data-theme="light"] button:hover:not(:disabled) {
box-shadow: 0 6px 16px rgba(var(--brand-rgb),.35);
}

[data-theme="light"] .logo-dot {
box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb),.20), 0 4px 16px rgba(var(--brand-rgb),.15);
}

/* Toggle de Tema para Login */
.theme-toggle-login {
position: fixed;
top: 20px;
right: 20px;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 12px;
border: 1px solid var(--stroke);
background: linear-gradient(180deg, rgba(15,26,45,.92), rgba(12,21,40,.92));
cursor: pointer;
transition: all .2s ease;
box-shadow: var(--shadow);
backdrop-filter: blur(8px);
z-index: 1000;
}

[data-theme="light"] .theme-toggle-login {
background: linear-gradient(180deg, #ffffff, rgba(245,249,252,.98));
box-shadow: 0 4px 16px rgba(var(--brand-rgb),.15);
}

.theme-toggle-login:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(var(--brand-rgb),.25);
}

.theme-toggle-login-switch {
position: relative;
width: 38px;
height: 20px;
background: rgba(var(--brand-rgb),.3);
border-radius: 10px;
transition: all .3s ease;
}

[data-theme="light"] .theme-toggle-login-switch {
background: rgba(var(--brand-rgb),.20);
}

.theme-toggle-login-switch::before {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(200,210,220,.9), rgba(180,190,200,.9));
top: 2px;
left: 2px;
transition: all .3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

[data-theme="light"] .theme-toggle-login-switch::before {
left: 20px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
box-shadow: 0 2px 6px rgba(251,191,36,.4);
}

.theme-toggle-login-text {
font-size: 11px;
font-weight: 700;
color: var(--muted);
letter-spacing: .3px;
text-transform: uppercase;
min-width: 48px;
}

.theme-toggle-login-icon {
font-size: 14px;
color: var(--muted);
}

body,
.card,
input,
button {
transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
/* ===== CORREÇÕES DE TEMA CLARO ===== */

/* Textos e valores numéricos em preto no tema claro */
[data-theme="light"] .kpi .value,
[data-theme="light"] .sectionTitle,
[data-theme="light"] td,
[data-theme="light"] th,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] .panelHeader h2 {
color: #1a2332 !important;
}

/* Valores de tabela em preto */
[data-theme="light"] table td {
color: #1a2332;
}

[data-theme="light"] table th {
color: #0d1117;
}

/* KPI values em preto */
[data-theme="light"] .kpi .value {
color: #0d1117;
font-weight: 900;
}

/* Ícones dos headers */
[data-theme="light"] .panelHeader h2 i {
color: #5c6f82 !important;
}

/* Ajustes nos botões - remover transform para evitar quebra */
[data-theme="light"] .logoutBtn:hover,
[data-theme="light"] .theme-toggle:hover {
transform: none;
box-shadow: 0 2px 8px rgba(var(--brand-rgb),.20);
}

/* Melhorar contraste de labels */
[data-theme="light"] .kpi .label {
color: #5c6f82;
font-weight: 700;
}

[data-theme="light"] .pill label {
color: #5c6f82;
}

/* Botões de gráfico - melhor contraste */
[data-theme="light"] .iconBtn {
color: #5c6f82;
background: rgba(var(--brand-rgb),.05);
}

[data-theme="light"] .iconBtn:hover {
background: rgba(var(--brand-rgb),.12);
color: #1a2332;
}

[data-theme="light"] .iconBtn.active {
color: #0d1117;
}

/* Tabs de escopo */
[data-theme="light"] .scopeTabs button {
color: #5c6f82;
}

[data-theme="light"] .scopeTabs button.active {
color: #0d1117;
}

/* Textos de input e select mais escuros */
[data-theme="light"] select,
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="text"] {
color: #1a2332;
}

[data-theme="light"] select option {
color: #1a2332;
background: #ffffff;
}

/* Modal texts */
[data-theme="light"] .modalTitle,
[data-theme="light"] .modalText {
color: #1a2332;
}

[data-theme="light"] .modalLabel {
color: #5c6f82;
}

/* Células especiais da tabela */
[data-theme="light"] .cell-warn {
background: rgba(227, 76, 60, .15);
color: #c0392b;
border-color: rgba(227, 76, 60, .3);
}

[data-theme="light"] .cell-good {
background: rgba(22, 168, 98, .15);
color: #16a862;
border-color: rgba(22, 168, 98, .3);
}

/* Rodapé da tabela */
[data-theme="light"] .rankTable tfoot td {
color: #0d1117;
}

/* Cells Best/Worst */
[data-theme="light"] .rankTable td.cellBest {
background: rgba(46, 204, 113, .25);
color: #16a862;
}

[data-theme="light"] .rankTable td.cellWorst {
background: rgba(231, 76, 60, .25);
color: #c0392b;
}

/* Apply button */
[data-theme="light"] .applyBtn {
color: #0d1117;
}

/* Group label */
[data-theme="light"] .groupLabel {
color: #5c6f82;
}

/* Section title */
[data-theme="light"] .sectionTitle {
color: #5c6f82;
}

/* Brand subtitle */
[data-theme="light"] .brand .sub {
color: #5c6f82;
}

/* Chart labels - garantir que sejam visíveis */
[data-theme="light"] canvas {
filter: brightness(0.95);
}

/* Mensagens de erro/ok no login */
[data-theme="light"] .msg.error {
background: rgba(227, 76, 60, .15);
color: #c0392b;
border-color: rgba(227, 76, 60, .3);
}

[data-theme="light"] .msg.ok {
background: rgba(22, 168, 98, .15);
color: #16a862;
border-color: rgba(22, 168, 98, .3);
}

/* Link no login */
[data-theme="light"] .link {
color: var(--brand);
}

/* Placeholder mais escuro */
[data-theme="light"] input::placeholder {
color: rgba(92, 111, 130, .6);
}

/* Hint no login */
[data-theme="light"] .hint {
color: #5c6f82;
}

[data-theme="light"] .mini {
color: #5c6f82;
}/* ===== CORREÇÕES COMPLETAS DE TEMA CLARO ===== */

/* ========================================
   1. TEXTOS E TÍTULOS - PRETO NO TEMA CLARO
   ======================================== */

[data-theme="light"] body {
  color: #1a2332;
}

[data-theme="light"] .brand h1 {
  color: #0d1117 !important;
}

[data-theme="light"] .brand .sub {
  color: #5c6f82 !important;
}

[data-theme="light"] .sectionTitle {
  color: #5c6f82 !important;
}

[data-theme="light"] .panelHeader h2 {
  color: #0d1117 !important;
}

[data-theme="light"] .panelHeader h2 i {
  color: #5c6f82 !important;
}

[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: #0d1117 !important;
}

/* ========================================
   2. KPIs - VALORES EM PRETO INTENSO
   ======================================== */

[data-theme="light"] .kpi .label {
  color: #5c6f82 !important;
  font-weight: 700;
}

[data-theme="light"] .kpi .value {
  color: #0d1117 !important;
  font-weight: 900;
}

/* ========================================
   3. TABELAS - TUDO EM PRETO
   ======================================== */

[data-theme="light"] table th {
  color: #0d1117 !important;
  font-weight: 800;
}

[data-theme="light"] table td {
  color: #1a2332 !important;
}

[data-theme="light"] .rankTable tfoot td {
  color: #0d1117 !important;
  font-weight: 900;
}

[data-theme="light"] .cell-warn {
  background: rgba(227, 76, 60, .20) !important;
  color: #c0392b !important;
  border-color: rgba(227, 76, 60, .35) !important;
  font-weight: 700;
}

[data-theme="light"] .cell-good {
  background: rgba(22, 168, 98, .20) !important;
  color: #16a862 !important;
  border-color: rgba(22, 168, 98, .35) !important;
  font-weight: 700;
}

[data-theme="light"] .rankTable td.cellBest {
  background: rgba(46, 204, 113, .25) !important;
  color: #16a862 !important;
  font-weight: 800;
}

[data-theme="light"] .rankTable td.cellWorst {
  background: rgba(231, 76, 60, .25) !important;
  color: #c0392b !important;
  font-weight: 800;
}

/* ========================================
   4. INPUTS, SELECTS E LABELS
   ======================================== */

[data-theme="light"] .pill label {
  color: #5c6f82 !important;
  font-weight: 700;
}

[data-theme="light"] .groupLabel {
  color: #5c6f82 !important;
  font-weight: 800;
}

[data-theme="light"] select,
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="text"] {
  color: #1a2332 !important;
  font-weight: 600;
}

[data-theme="light"] select option {
  color: #1a2332 !important;
  background: #ffffff !important;
}

[data-theme="light"] input::placeholder {
  color: rgba(92, 111, 130, .6) !important;
}

/* ========================================
   5. BOTÕES - AJUSTE DE TAMANHO E COR
   ======================================== */

[data-theme="light"] .theme-toggle {
  background: rgba(var(--brand-rgb),.08) !important;
  border-color: rgba(var(--brand-rgb),.20) !important;
  min-height: 40px;
  padding: 8px 12px;
}

[data-theme="light"] .theme-toggle:hover {
  transform: none !important;
  background: rgba(var(--brand-rgb),.12) !important;
  border-color: rgba(var(--brand-rgb),.30) !important;
  box-shadow: 0 2px 8px rgba(var(--brand-rgb),.20) !important;
}

[data-theme="light"] .theme-toggle-text {
  color: #5c6f82 !important;
  font-weight: 700;
}

[data-theme="light"] .theme-toggle-icon {
  color: #5c6f82 !important;
}

[data-theme="light"] .logoutBtn {
  background: rgba(var(--brand-rgb),.08) !important;
  color: #1a2332 !important;
  min-height: 40px;
}

[data-theme="light"] .logoutBtn:hover {
  transform: none !important;
  background: rgba(var(--brand-rgb),.12) !important;
  box-shadow: 0 2px 8px rgba(var(--brand-rgb),.20) !important;
}

[data-theme="light"] .iconBtn {
  color: #5c6f82 !important;
  background: rgba(var(--brand-rgb),.05) !important;
}

[data-theme="light"] .iconBtn:hover {
  background: rgba(var(--brand-rgb),.12) !important;
  color: #1a2332 !important;
}

[data-theme="light"] .iconBtn.active {
  color: #0d1117 !important;
  background: linear-gradient(135deg, rgba(var(--brand-rgb),.25), rgba(var(--brand-rgb),.15)) !important;
}

[data-theme="light"] .applyBtn {
  color: #0d1117 !important;
  background: rgba(var(--brand-rgb),.18) !important;
}

/* ========================================
   6. TABS E NAVEGAÇÃO
   ======================================== */

[data-theme="light"] .scopeTabs button {
  color: #5c6f82 !important;
}

[data-theme="light"] .scopeTabs button.active {
  color: #0d1117 !important;
  background: linear-gradient(135deg, rgba(var(--brand-rgb),.25), rgba(var(--brand-rgb),.15)) !important;
}

/* ========================================
   7. MODAIS
   ======================================== */

[data-theme="light"] .modalTitle {
  color: #0d1117 !important;
}

[data-theme="light"] .modalText {
  color: #1a2332 !important;
}

[data-theme="light"] .modalLabel {
  color: #5c6f82 !important;
}

/* ========================================
   8. GRÁFICOS - VALORES VISÍVEIS
   ======================================== */

[data-theme="light"] canvas {
  filter: brightness(0.92) contrast(1.1) !important;
}

/* ========================================
   9. MENSAGENS E HINTS
   ======================================== */

[data-theme="light"] .msg.error {
  background: rgba(227, 76, 60, .20) !important;
  color: #c0392b !important;
  border-color: rgba(227, 76, 60, .35) !important;
}

[data-theme="light"] .msg.ok {
  background: rgba(22, 168, 98, .20) !important;
  color: #16a862 !important;
  border-color: rgba(22, 168, 98, .35) !important;
}

[data-theme="light"] .link {
  color: var(--brand) !important;
}

[data-theme="light"] .hint {
  color: #5c6f82 !important;
}

[data-theme="light"] .mini {
  color: #5c6f82 !important;
}