:root {
  --bg-primary: #0f0f1a;
  --bg-secondary: #1a1a2e;
  --bg-input: #16213e;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --accent-success: #00ff88;
  --accent-warning: #ffc107;
  --accent-danger: #ff3333;
  --accent-info: #00d9ff;
  --accent-emergency: #ff0066;
  --btn-height: 70px;
  --btn-font-size: 22px;
  --input-height: 60px;
  --radius: 16px;
}
[data-theme~="sol-directo"] {
  --bg-primary: #000000;
  --bg-secondary: #070707;
  --accent-success: #00ff00;
  --accent-danger: #ff0000;
}
[data-theme~="guantes"] {
  --btn-height: 90px;
  --btn-font-size: 28px;
  --input-height: 80px;
}
body {
  background: radial-gradient(circle at top left, #213a4d 0, transparent 34%), linear-gradient(135deg, var(--bg-primary), #090912 65%);
  color: var(--text-primary);
  min-height: 100vh;
}
.connectivity {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 2000;
  background: var(--accent-success);
}
.connectivity.offline { background: #ff9800; }
.connectivity.danger { background: var(--accent-danger); }
.shell-nav {
  margin-top: 6px;
  background: rgba(15, 15, 26, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.auth-body {
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(145deg, #06070c, #111f2d);
}
.login-card {
  width: min(440px, 100%);
  padding: 34px;
  border-radius: 28px;
  background: rgba(26, 26, 46, .85);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.brand-mark {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(135deg, #00ff88, #00d9ff);
  color: #06110f;
  font-weight: 900;
  letter-spacing: -1px;
  margin-bottom: 18px;
}
.touch-btn {
  min-height: var(--btn-height);
  font-size: var(--btn-font-size);
  font-weight: 800;
  border-radius: var(--radius);
}
.form-control,
.form-select {
  min-height: var(--input-height);
  background: var(--bg-input);
  color: #fff;
  border-color: rgba(255,255,255,.14);
  font-size: 20px;
}
.form-control:focus,
.form-select:focus {
  background: #203056;
  color: #fff;
  box-shadow: 0 0 0 .25rem rgba(0,217,255,.18);
}
.metric-card,
.hero-panel,
.card-dark,
.gate-card {
  background: rgba(26,26,46,.86);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 16px 50px rgba(0,0,0,.28);
}
.metric-card span {
  color: var(--text-secondary);
  display: block;
}
.metric-card strong {
  font-size: clamp(32px, 5vw, 58px);
  color: var(--accent-success);
}
.hero-panel,
.page-head,
.gate-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.eyebrow {
  color: var(--accent-info);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 800;
  margin: 0;
}
.section-title {
  margin: 28px 0 14px;
}
.search-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.grid-full,
.camera-panel {
  grid-column: 1 / -1;
}
.camera-panel video {
  width: 100%;
  max-height: 280px;
  background: #050508;
  border: 2px dashed rgba(0,255,136,.35);
  border-radius: 18px;
  object-fit: cover;
  margin-bottom: 12px;
}
.gate-screen {
  max-width: 1050px;
  margin: auto;
}
.toggle-row,
.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.toggle-row label,
.choice {
  display: grid;
  place-items: center;
  min-height: var(--btn-height);
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.14);
  font-size: var(--btn-font-size);
  font-weight: 900;
}
.choice.entrada { background: rgba(0,255,136,.12); color: var(--accent-success); }
.choice.salida { background: rgba(0,217,255,.10); color: var(--accent-info); }
.big-input {
  display: block;
  margin: 16px 0;
  font-size: 22px;
  font-weight: 800;
}
.big-input input {
  font-size: 34px;
  font-weight: 900;
}
.inference-panel {
  border-left: 8px solid var(--accent-warning);
  background: rgba(255,193,7,.13);
  padding: 18px;
  border-radius: 14px;
  font-size: 24px;
  font-weight: 800;
  margin: 16px 0;
}
.confirm-btn {
  width: 100%;
  margin-top: 18px;
}
.vehicle-only {
  display: none;
}
body.vehicle-mode .vehicle-only {
  display: block;
}
@media (max-width: 780px) {
  .hero-panel,
  .page-head,
  .gate-title,
  .search-row {
    flex-direction: column;
    align-items: stretch;
  }
  .form-grid,
  .toggle-row,
  .action-grid {
    grid-template-columns: 1fr;
  }
}