:root{
  /* Paleta tipo Tecovelez (rojo + grises oscuros) */
  --teco-red: #E31B23;        /* rojo principal */
  --teco-red-dark: #B51218;   /* rojo oscuro para hover */
  --teco-dark: #1C1F24;       /* negro/gris muy oscuro */
  --teco-gray: #2B2F36;       /* gris oscuro */
  --teco-bg: #F6F7FB;         /* fondo claro */
  --teco-line: #E5E7EB;       /* borde */
  --teco-text: #111827;       /* texto */
}

body{
  background: var(--teco-bg);
  color: var(--teco-text);
}

.mono{
  font-variant-numeric: tabular-nums;
}

/* HERO */
.hero-teco{
  background:
    radial-gradient(900px 420px at 15% 25%, rgba(227,27,35,.18), transparent 55%),
    linear-gradient(135deg, var(--teco-dark) 0%, var(--teco-gray) 55%, #2a2f38 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.text-hero{
  color: rgba(255,255,255,.92);
}
.text-hero-muted{
  color: rgba(255,255,255,.70);
}

/* Badges */
.badge-teco{
  background: var(--teco-red);
  color: #fff;
}
.badge-teco-outline{
  border: 1px solid rgba(255,255,255,.28);
  background: transparent;
  color: rgba(255,255,255,.92);
}

/* Botones */
.btn-teco-primary{
  background: var(--teco-red);
  border: 1px solid var(--teco-red);
  color: #fff;
  font-weight: 600;
  padding: .6rem 1rem;
  border-radius: 12px;
}
.btn-teco-primary:hover{
  background: var(--teco-red-dark);
  border-color: var(--teco-red-dark);
  color:#fff;
}

.btn-teco-outline{
  background: transparent;
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  font-weight: 600;
  padding: .6rem 1rem;
  border-radius: 12px;
}
.btn-teco-outline:hover{
  border-color: #fff;
  color:#fff;
}

/* Card del hero */
.card-hero{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.92);
}

.dot{
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--teco-red);
  flex: 0 0 auto;
}

/* Canvas y cards */
.card{
  border-radius: 14px;
}
canvas{
  width:100%;
  height:280px;
  border:1px solid var(--teco-line);
  border-radius:12px;
  background:#fff;
}
#estadoPoblacion{
  border-radius: 999px;
  padding: .45rem .7rem;
}

.mini-pre{
  background:#0b1220;
  color:#e5e7eb;
  border-radius:12px;
  padding:12px;
  font-size:.85rem;
  line-height:1.25rem;
  border:1px solid rgba(255,255,255,.06);
  overflow:auto;
}