@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Core Tokens */
  --bg: #09090D;
  --surface: #111118;
  --surface2: #1A1A24;
  --surface3: #22222F;
  --border: #252535;
  --border2: #333348;

  /* Texto */
  --text: #F0F0FA;
  --text2: #9090B0;
  --text3: #5A5A7A;

  /* Destaque (hex) */
  --cyan: #00D4FF;
  --ok: #00E676;
  --warn: #FFB300;
  --danger: #FF4444;
  --blue: #4B8BFF;
  --purple: #9B59FF;
}

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

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
}

/* Typography (Requirement 1: Fluid with clamp()) */
.logo-name { font-size: clamp(18px, 1.8vw, 32px); font-weight: 800; color: var(--cyan); letter-spacing: -0.5px; text-shadow: 0 0 24px rgba(0,212,255,0.35); }
.logo-sub { font-size: clamp(10px, 0.9vw, 18px); font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 0.12em; }
.slide-title { font-size: clamp(16px, 1.8vw, 32px); font-weight: 800; color: var(--text); letter-spacing: 0.04em; }

.kpi-label { font-size: clamp(11px, 0.9vw, 18px); font-weight: 800; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-value { font-size: clamp(22px, 2.5vw, 48px); font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.kpi-sub { font-size: clamp(10px, 0.8vw, 16px); font-weight: 500; color: rgba(255,255,255,0.7); }

.card-title { font-size: clamp(15px, 1.4vw, 24px); font-weight: 800; color: #ffffff; letter-spacing: 0.01em; margin-bottom: clamp(4px, 0.6vh, 10px); display: flex; align-items: center;}
.card-title::before { content: ''; display: inline-block; width: clamp(4px, 0.35vw, 7px); height: clamp(16px, 1.8vh, 26px); border-radius: 3px; background-color: var(--cyan); margin-right: clamp(8px, 0.9vw, 14px);}
.card-subtitle { font-size: clamp(12px, 1vw, 18px); font-weight: 500; color: var(--text2); }

/* Layout & General Classes */
header {
  height: clamp(55px, 8.5vh, 90px);
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(20px, 2.5vw, 40px);
}
header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--blue) 50%, var(--purple) 100%);
}

footer {
  height: clamp(45px, 6.5vh, 70px);
  background-color: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(20px, 2.5vw, 40px);
}

.slides-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: clamp(14px, 2vh, 30px) clamp(20px, 2.5vw, 40px);
}

.sg-slide {
  position: absolute;
  top: clamp(14px, 2vh, 30px);
  left: clamp(20px, 2.5vw, 40px);
  right: clamp(20px, 2.5vw, 40px);
  bottom: clamp(14px, 2vh, 30px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 24px);
}
.sg-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* KPI Grid & Content Grid */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 24px);
}
.content-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 28px);
  flex: 1;
}

/* Cards */
.kpi-card {
  background-color: var(--surface);
  border-radius: clamp(10px, 1vw, 18px);
  padding: clamp(14px, 1.6vh, 28px) clamp(16px, 1.6vw, 28px);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kpi-card::after {
  content: '';
  position: absolute;
  width: clamp(60px, 7vw, 120px);
  height: clamp(60px, 7vw, 120px);
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0.06;
  top: 0; right: 0;
  transform: translate(20px, -20px);
}
.kpi-card .icon-box {
  width: clamp(32px, 3.8vh, 50px); 
  height: clamp(32px, 3.8vh, 50px);
  border-radius: clamp(8px, 0.7vw, 14px);
  margin-bottom: clamp(6px, 1vh, 14px);
  display: flex; align-items: center; justify-content: center;
  background-color: rgba(255,255,255,0.05);
  font-size: clamp(16px, 2vw, 28px);
}

.content-card {
  background-color: var(--surface);
  border-radius: clamp(10px, 1vw, 18px);
  padding: clamp(16px, 2.2vh, 32px) clamp(20px, 2.2vw, 32px);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

/* Requirement 4: Chart.js and Leaflet.js container sizing */
.chart-container {
  flex: 1;
  width: 100%;
  height: 100%;
  position: relative;
  min-height: clamp(180px, 24vh, 400px);
}

/* Enhanced Leaflet Dark Map Labels */
.leaflet-container {
  background: #09090D !important;
}
.leaflet-tile {
  filter: brightness(1.1) contrast(1.2);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface2) !important;
  color: var(--text) !important;
  font-weight: 700;
  border: 1px solid var(--border2);
}

/* Status & Utils */
.status-badge {
  background-color: rgba(0,230,118,0.1);
  border: 1px solid rgba(0,230,118,0.25);
  color: var(--ok);
  font-size: clamp(11px, 0.8vw, 15px); 
  font-weight: 500;
  padding: clamp(4px, 0.6vh, 8px) clamp(8px, 1vw, 14px); 
  border-radius: 12px;
  display: flex; align-items: center; gap: clamp(6px, 0.6vw, 10px);
}
.pulse-dot {
  width: clamp(7px, 0.9vw, 11px); 
  height: clamp(7px, 0.9vw, 11px);
  background-color: var(--ok);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.8); }
}

.fade-up-1 { animation: fadeUp 0.5s ease 0.05s both; }
.fade-up-2 { animation: fadeUp 0.5s ease 0.10s both; }
.fade-up-3 { animation: fadeUp 0.5s ease 0.15s both; }
.fade-up-4 { animation: fadeUp 0.5s ease 0.20s both; }
.fade-up-5 { animation: fadeUp 0.5s ease 0.25s both; }
.fade-up-6 { animation: fadeUp 0.5s ease 0.30s both; }

/* Colors classes */
.c-cyan { color: var(--cyan); }
.c-ok { color: var(--ok); }
.c-warn { color: var(--warn); }
.c-danger { color: var(--danger); }
.c-blue { color: var(--blue); }

/* Clock */
.clock-time { font-family: 'JetBrains Mono'; font-size: clamp(20px, 2.2vw, 36px); font-weight: 600; color: var(--text); }
.clock-date { font-size: clamp(10px, 0.85vw, 15px); font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 0.08em; }

/* Table */
table { width: 100%; border-collapse: collapse; text-align: left; }
th { font-size: clamp(11px, 0.9vw, 16px); font-weight: 800; color: var(--text2); text-transform: uppercase; padding: clamp(8px, 1vh, 14px) clamp(10px, 1.2vw, 18px); border-bottom: 1px solid rgba(255,255,255,0.05); }
td { font-size: clamp(12px, 1vw, 18px); font-weight: 400; color: var(--text); padding: clamp(8px, 1vh, 14px) clamp(10px, 1.2vw, 18px); border-bottom: 1px solid rgba(255,255,255,0.03); }
.td-mono { font-family: 'JetBrains Mono', monospace; }

/* Obras Específicas (Slides 3, 4, 5) - Parametrização para Telas 46"+ vs <= 40" */
:root {
  --obra-scale: 1; /* Padrão 46"+ (tamanho atual perfeito) */
}

/* Telas <= 40" (Redução de 60%, fator 0.4) */
@media screen and (max-width: 1600px) {
  :root {
    --obra-scale: 0.4;
  }
}

/* Telas >= 46" (Tamanho normal / atual) */
@media screen and (min-width: 1601px) {
  :root {
    --obra-scale: 1;
  }
}

body.screen-40 {
  --obra-scale: 0.4;
}

body.screen-46 {
  --obra-scale: 1;
}

.obra-title { 
  font-size: calc(clamp(38px, 5.5vw, 86px) * var(--obra-scale)); 
  font-weight: 900; 
  color: var(--text); 
  letter-spacing: 0.02em; 
  text-align: center; 
  margin-bottom: calc(clamp(30px, 4vh, 70px) * var(--obra-scale)); 
  text-shadow: 0 0 16px rgba(255,255,255,0.1); 
}
.obra-container { 
  display: flex; 
  flex-direction: column; 
  height: 100%; 
  justify-content: center; 
  margin: auto; 
  width: 100%; 
  max-width: 2500px; 
  padding: calc(clamp(24px, 3.5vh, 50px) * var(--obra-scale)) 0; 
}
.obra-content-row { 
  display: grid; 
  grid-template-columns: 1.15fr 1.9fr 1.25fr; 
  gap: calc(clamp(30px, 4vw, 64px) * var(--obra-scale)); 
  margin-bottom: calc(clamp(36px, 4.5vh, 76px) * var(--obra-scale)); 
  align-items: stretch; 
}
.obra-info-val { 
  font-size: calc(clamp(24px, 2.6vw, 44px) * var(--obra-scale)); 
  font-weight: 700; 
  color: var(--text); 
  margin-top: calc(clamp(10px, 1.2vh, 20px) * var(--obra-scale)); 
}
.obra-info-label { 
  font-size: calc(clamp(16px, 1.5vw, 24px) * var(--obra-scale)); 
  color: var(--text2); 
  text-transform: uppercase; 
  letter-spacing: 0.05em; 
}
.obra-team-val {
  font-size: calc(14px * var(--obra-scale)) !important;
}
.obra-kpi-large {
  font-size: calc(36px * var(--obra-scale)) !important;
}
.obra-kpi-med {
  font-size: calc(26px * var(--obra-scale)) !important;
}