/* ═══════════════════════════════════════════════════════════════
   INSECE CLOUD SaaS — PROFESSIONAL SYSTEM v5.0
   Focus: Geometry, Consistency and High Fidelity
   ═══════════════════════════════════════════════════════════════ */

:root {
  --pc-bg:        #020617;
  --pc-surface:   #0f172a;
  --pc-accent:    #38bdf8;
  --pc-border:    rgba(255, 255, 255, 0.08);
  --pc-red:       #ef4444;
  --pc-green:     #10b981;
  --pc-amber:     #f59e0b;
}

body { 
  margin: 0; 
  background: var(--pc-bg); 
  color: #f1f5f9; 
  font-family: 'Inter', sans-serif; 
  height: 100vh; 
  display: flex; 
  overflow: hidden; 
}

/* ── LOGIN (PERFECTION) ── */
.login-view {
  position: fixed; inset: 0; background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
  display: flex; align-items: center; justify-content: center; z-index: 10000;
}
.login-card {
  width: 440px; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(30px);
  border: 1px solid var(--pc-border); border-radius: 24px; padding: 60px 48px;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.8); text-align: center;
}
.login-logo-img { height: 50px; margin-bottom: 30px; }
.login-title-wrap h1 { font-size: 11px; font-weight: 800; color: var(--pc-accent); text-transform: uppercase; letter-spacing: 3px; margin: 0; }
.login-title-wrap p { font-size: 20px; font-weight: 300; color: white; margin: 8px 0 40px; }
.login-form { display: flex; flex-direction: column; gap: 20px; }
.input-group label { display: block; font-size: 10px; font-weight: 800; color: #64748b; text-transform: uppercase; text-align: left; margin-bottom: 8px; letter-spacing: 1px; }

.login-btn {
  width: 100%; padding: 18px; border-radius: 12px; border: none; font-weight: 800; font-size: 13px;
  cursor: pointer; transition: 0.3s;
}
.login-btn.primary { background: white; color: var(--pc-bg); }
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }

/* ── APP SHELL ── */
.app-shell { display: flex; width: 100vw; height: 100vh; }
.sidebar { width: 280px; background: #070b14; border-right: 1px solid var(--pc-border); display: flex; flex-direction: column; }
.sidebar-brand { padding: 30px; }
.sidebar-brand img { height: 28px; }

.nav-section { padding: 10px 15px; }
.nav-label { font-size: 10px; font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: 1.5px; margin: 25px 0 10px 15px; }
.nav-btn {
  padding: 12px 15px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #94a3b8;
  cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 10px;
}
.nav-btn:hover { background: rgba(255,255,255,0.02); color: white; }
.nav-btn.active { background: rgba(56,189,248,0.1); color: var(--pc-accent); }
.sidebar-footer { margin-top: auto; padding: 30px; font-size: 12px; color: var(--pc-red); font-weight: 700; cursor: pointer; border-top: 1px solid var(--pc-border); }

.main-content { flex: 1; overflow-y: auto; background: #020617; }
.topbar { padding: 40px 60px; border-bottom: 1px solid var(--pc-border); }
.topbar-title { font-size: 28px; font-weight: 900; margin: 0; }
.topbar-subtitle { font-size: 14px; color: #64748b; margin-top: 5px; font-weight: 500; }

/* ── ADMIN COMPONENTS ── */
.admin-card { background: var(--pc-surface); border: 1px solid var(--pc-border); border-radius: 16px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.admin-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 24px; color: white; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; padding: 12px; font-size: 11px; color: #64748b; text-transform: uppercase; border-bottom: 2px solid #1e293b; }
.admin-table td { padding: 20px 12px; border-bottom: 1px solid #1e293b; font-size: 14px; }

/* ── DASHBOARD CLIENT ── */
.kpi-card { background: var(--pc-surface); border: 1px solid var(--pc-border); border-radius: 16px; padding: 24px; }
.kpi-card div:first-child { font-size: 10px; font-weight: 800; color: #64748b; margin-bottom: 15px; letter-spacing: 1.5px; }
.kpi-val { font-size: 32px; font-weight: 900; }

/* ── SONDEO TABLE ── */
.sondeo-table { width: 100%; border-collapse: collapse; }
.sondeo-table th { padding: 15px; background: #111827; font-size: 11px; color: #475569; text-transform: uppercase; border-bottom: 2px solid #1e293b; }
.sondeo-table td { padding: 15px; border-bottom: 1px solid #1e293b; font-size: 13px; font-family: 'Inter', sans-serif; font-weight: 600; }
.sondeo-table td:nth-child(n+3) { font-family: 'Inter', monospace; color: var(--pc-accent); font-weight: 800; }

/* ── DRONE MAP ── */
.ndvi-legend { position: absolute; bottom: 40px; right: 40px; background: rgba(2,6,23,0.85); backdrop-filter: blur(10px); padding: 20px; border-radius: 12px; border: 1px solid var(--pc-border); z-index: 1000; }
.ndvi-bar { height: 8px; width: 220px; background: linear-gradient(to right, #ef4444, #f59e0b, #10b981); border-radius: 4px; }

/* UTILS */
.hidden { display: none !important; }
.status-badge { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; }
.active { background: rgba(16,185,129,0.1); color: var(--pc-green); }
.impersonate-btn { padding: 8px 16px; border-radius: 6px; border: 1px solid var(--pc-accent); background: transparent; color: var(--pc-accent); font-size: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; }
.impersonate-btn:hover { background: var(--pc-accent); color: var(--pc-bg); }