
:root {
  --bg: #eef4f7;
  --bg-soft: #f8fbfc;
  --surface: #ffffff;
  --line: #d9e7ec;
  --text: #183b4a;
  --muted: #67808c;
  --primary: #0f766e;
  --primary-dark: #115e59;
  --accent: #b87333;
  --success: #1f9d6a;
  --warning: #f59e0b;
  --danger: #dc2626;
  --shadow: 0 14px 30px rgba(15, 118, 110, 0.10);
}
body {
  background: linear-gradient(180deg, #f4f8fa 0%, #eef4f7 100%);
  color: var(--text);
}
.top-header {
  background: linear-gradient(90deg, #fdfefe 0%, #f4f8fa 100%);
}
.brand-wrap { display:flex; align-items:center; gap:1rem; color:var(--text); }
.brand-title { font-weight: 800; font-size: 1.15rem; }
.brand-subtitle { color: var(--muted); font-size: .88rem; }
.header-logo { height: 54px; width: auto; object-fit: contain; }
.nav-scada {
  background: linear-gradient(90deg, #0f766e 0%, #0b6b77 55%, #155e75 100%);
}
.nav-scada .nav-link, .nav-scada .navbar-toggler { color: #fff; }
.nav-scada .nav-link { border-radius: 999px; padding: .55rem .95rem; }
.nav-scada .nav-link:hover, .nav-scada .nav-link.active { background: rgba(255,255,255,.12); }
.panel-card, .metric-card, .scada-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  box-shadow: var(--shadow);
}
.panel-card { overflow: hidden; }
.panel-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
}
.eyebrow {
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); font-weight: 800;
}
.metric-card { padding: 1.25rem; min-height: 132px; }
.metric-label { color: var(--muted); text-transform: uppercase; font-size: .78rem; font-weight: 700; letter-spacing: .06em; }
.metric-value { font-size: 2rem; font-weight: 800; margin-top: .45rem; color: var(--primary-dark); }
.metric-subvalue { font-size: 1rem; font-weight: 700; margin-top: .75rem; }
.scada-card { padding: 1.15rem; position: relative; }
.criticidad-normal { border-left: 8px solid var(--success); }
.criticidad-advertencia { border-left: 8px solid var(--warning); }
.criticidad-critico { border-left: 8px solid var(--danger); }
.criticidad-sin-dato, .criticidad-sin-configurar { border-left: 8px solid #94a3b8; }
.table-modern thead th {
  background: #e8f3f4; color: var(--primary-dark); font-size: .86rem; border-bottom: 0;
}
.table-modern td, .table-modern th { vertical-align: middle; border-color: #e5eef2; }
.form-control, .form-select {
  border-radius: 1rem; border-color: #cfe0e6; min-height: 48px;
}
.form-control:focus, .form-select:focus {
  border-color: #38b2ac; box-shadow: 0 0 0 .2rem rgba(15, 118, 110, .12);
}
.btn-primary {
  background: linear-gradient(90deg, var(--primary) 0%, #0ea5a1 100%);
  border-color: transparent;
}
.btn-primary:hover { background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 100%); }
.info-chip, .user-pill, .sector-pill, .status-dot {
  display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; padding:.55rem .9rem;
}
.info-chip, .sector-pill { background: #eef8f8; border: 1px solid #d7ecec; color: var(--primary-dark); }
.user-pill { background: #e8f1f8; color: #31586d; border: 1px solid #d7e6ef; }
.status-dot { background: #ecfdf3; color: #18794e; border: 1px solid #ccebd8; font-size: .84rem; }
.login-shell .panel-card { min-height: 100%; }
.login-hero { background: radial-gradient(circle at top left, rgba(15,118,110,.08), transparent 45%), var(--surface); }
.gps-box {
  padding: 1rem; border: 1px dashed #b8d5db; border-radius: 1rem; background: #f8fbfc;
}
.map-box { height: 360px; border-radius: 1rem; overflow: hidden; border: 1px solid var(--line); }
code { color: var(--primary-dark); }
@media (max-width: 768px) {
  .header-logo { height: 44px; }
  .map-box { height: 280px; }
}

/* nuevo */
.measurements-table {
  width: 100%;
}

.panel-card {
  width: 100%;
}

.table-responsive {
  width: 100%;
}
.panel-card {
  border-radius: 14px;
  padding: 20px;
}

.measurements-table th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.measurements-table td {
  font-size: 13px;
}