:root {
  --verde: #28a745;
  --amarillo: #ffc107;
  --rojo: #dc3545;
  --azul: #2c5f8a;
}

body {
  background-color: #f4f6f8;
}

.navbar {
  background-color: var(--azul);
}

.login-body {
  background: linear-gradient(135deg, #2c5f8a, #1c3f5e);
  min-height: 100vh;
}

.login-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

.card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* --- Tarjetas semaforo --- */
.semaforo-card {
  border-left: 6px solid #ccc;
  transition: transform .15s ease;
}
.semaforo-card:hover {
  transform: translateY(-3px);
}
.semaforo-verde { border-left-color: var(--verde); }
.semaforo-amarillo { border-left-color: var(--amarillo); }
.semaforo-rojo { border-left-color: var(--rojo); }

.semaforo-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}
.semaforo-dot-verde { background-color: var(--verde); }
.semaforo-dot-amarillo { background-color: var(--amarillo); }
.semaforo-dot-rojo { background-color: var(--rojo); }

.persona-card-mobile {
  border-left: 4px solid var(--azul);
}

/* --- Chips compactos de barrios (panel "Estado por barrio") --- */
.chips-barrios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-bottom: 4px;
}

.chip-barrio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 20px;
  background: #f1f3f5;
  border: 1px solid #e2e5e9;
  text-decoration: none;
  color: #333;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: transform .1s ease, box-shadow .1s ease;
}
.chip-barrio:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  color: #333;
}

.chip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chip-dot-verde { background-color: var(--verde); }
.chip-dot-amarillo { background-color: var(--amarillo); }
.chip-dot-rojo { background-color: var(--rojo); }

.chip-rojo { border-color: rgba(220,53,69,.35); background: rgba(220,53,69,.06); }
.chip-amarillo { border-color: rgba(255,193,7,.4); background: rgba(255,193,7,.08); }
.chip-verde { border-color: rgba(40,167,69,.3); background: rgba(40,167,69,.06); }

.chip-nombre { font-weight: 500; }
.chip-total {
  font-weight: 700;
  background: rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 0 7px;
  font-size: 0.78rem;
}

/* --- Mensajes flash (confirmaciones) --- */
.flash-msg {
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  border: none;
}

@media (max-width: 576px) {
  .navbar-brand { font-size: 1rem; }
  .chips-barrios { max-height: 260px; }
  .chip-barrio { font-size: 0.8rem; padding: 5px 8px; }
}