/*
 * Perception - Ajustes de marca sobre el template Deo (Verisy GC).
 * Se carga DESPUES de assets/css/style.css para re-tematizar el template
 * con los colores de la app movil Perception.
 */

:root {
  --primary: #10408D;
  --primary-hover: #0d336f;
  --primary-dark: #0a2550;
  --secondary: #00BFFF;

  --rgba-primary-1: rgba(16, 64, 141, 0.1);
  --rgba-primary-2: rgba(16, 64, 141, 0.2);
  --rgba-primary-3: rgba(16, 64, 141, 0.3);
  --rgba-primary-4: rgba(16, 64, 141, 0.4);
  --rgba-primary-5: rgba(16, 64, 141, 0.5);
  --rgba-primary-6: rgba(16, 64, 141, 0.6);
  --rgba-primary-7: rgba(16, 64, 141, 0.7);
  --rgba-primary-8: rgba(16, 64, 141, 0.8);
  --rgba-primary-9: rgba(16, 64, 141, 0.9);
}

/* Marca en el navbar lateral */
.nav-header .brand-logo img {
  max-height: 46px;
  width: auto !important;
}

/* Tarjetas contadoras del dashboard */
.card.counter {
  border: 0;
  box-shadow: 0 6px 20px rgba(16, 64, 141, 0.08);
}
.card.counter .card-box-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rgba-primary-1);
  margin-right: 14px;
}
.card.counter .card-box-icon i {
  font-size: 26px;
}
.card.counter .chart-num h2 {
  color: #1a1a1a;
}

/* Encabezado de pagina */
.page-titles .heading {
  margin: 0;
}

/* Ajustes del menu lateral */
.dlabnav .metismenu > li > a .nav-text {
  font-weight: 600;
}

/* Badges y botones con la marca */
.btn-primary,
.badge-primary,
.bg-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover,
.btn-outline-primary.active,
.btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.text-primary {
  color: var(--primary) !important;
}
a {
  color: var(--primary);
}
a:hover {
  color: var(--primary-hover);
}

/* Mapa: ocupa todo el alto/ancho de su tarjeta/contenedor */
#mapa {
  flex: 1 1 auto;
  width: 100%;
  min-height: 500px;
  border-radius: 12px;
  z-index: 1;
}

/* Lista de resultados del mapa */
#lista .list-group-item {
  cursor: pointer;
}

/* Aviso "completa tu registro" */
.card.completar-registro {
  border-left: 4px solid var(--primary);
  text-decoration: none;
}

/* Avatar en el header */
.header-profile2 .header-info2 img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
}

/* Acceso (login/registro) */
.authincation .brand-login img {
  max-height: 70px;
}

/* Contenedor de graficos con altura fija: evita el loop de resize de
   Chart.js (maintainAspectRatio:false requiere alto estable). */
.dashboard-chart-box {
  position: relative;
  height: 280px;
}

/* Preloader controlado por la capa de aplicacion (id propio para no
   depender de la lib Deo, que remueve #preloader pocos ms tras el DOM
   listo). Se retira con window.load + fallback en el template. */
#perception-preloader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: fixed;
  width: 100%;
  z-index: 999999;
  background-color: #e6ebee;
}
#perception-preloader .loader {
  margin: auto;
  width: 46px;
  height: 46px;
  border: 4px solid rgba(16, 64, 141, 0.18);
  border-top-color: var(--primary);
  border-radius: 50%;
  background-color: transparent;
  animation: perception-spin 0.75s linear infinite;
}

@keyframes perception-spin {
  to { transform: rotate(360deg); }
}