/* === PALETA (viva, moderna, cálida) ===
   Primario: Azul Profundo → Cyan (degradado)
   Secundario: Saffron (acento)
   Fondo: Beige cálido
*/
:root {
  --brand-start: #0e3a8a;  /* Azul profundo */
  --brand-end:   #06b6d4;  /* Cyan */
  --brand-accent:#f59e0b;  /* Saffron / Amber cálido (no chillón) */

  --ink:   #0b0d12;
  --muted: #5b616e;

  --bg:        #f7f3ed;    /* Beige cálido para fondo general */
  --card:      #ffffff;    /* Contraste limpio en tarjetas */
  --card-edge: #ede9dd;    /* Borde suave para separación */

  --success: #16a34a;      /* Verde vivo */
  --danger:  #dc2626;      /* Rojo vivo */
  --neutral: #6b7280;      /* Gris elegante */
}

/* === CAPA BASE === */
html, body { height: 100%; }
body {
  background: radial-gradient(1400px 900px at 10% -10%, #fff 0%, var(--bg) 50%, var(--bg) 100%);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === NAV con degradado + ligero brillo === */
nav {
  background: linear-gradient(90deg, var(--brand-start), var(--brand-end));
  box-shadow: 0 10px 25px rgba(14,58,138,.25);
}
.brand-logo.brand-logo-responsive {
  font-weight: 800;
  letter-spacing: .4px;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
nav .material-icons { opacity: .95; }

/* === CONTENEDORES === */
.card-elev {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--card-edge);
  box-shadow:
    0 12px 28px rgba(18,23,35,.14),
    0 2px 6px rgba(18,23,35,.05);
}
.card-panel {
  border: 1px solid var(--card-edge);
  border-radius: 14px !important;
}

/* === TITULARES / SUBTÍTULOS === */
.section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 1.1rem;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(14,58,138,.08), rgba(6,182,212,.08));
  border: 1px dashed rgba(14,58,138,.18);
}
.section-title i { color: #0ea5a4; }
.subdue { color: var(--muted); }

/* === INPUT IDENTIDAD === */
.id-input input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 18px;
  letter-spacing: 1px;
}
.input-field .prefix { color: #0ea5a4; }

/* === ACCIONES Y BOTONES === */
.btn {
  background: linear-gradient(90deg, var(--brand-start), var(--brand-end));
  box-shadow: 0 8px 18px rgba(6,182,212,.35);
  font-weight: 700;
  letter-spacing: .2px;
  border-radius: 12px;
}
.btn:hover { filter: brightness(1.05); }
.btn-flat.brand { color: var(--brand-accent); font-weight: 700; }

/* === MAPA === */
#map {
  width: 100%;
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--card-edge);
  box-shadow: 0 10px 24px rgba(14,58,138,.15);
}
.map-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* === DIVISORES === */
.divider-soft {
  background: linear-gradient(90deg, transparent, #e6e1d6 15%, #e6e1d6 85%, transparent);
  height: 1px;
  margin: 16px 0;
}

/* === TIPOGRAFÍA DE ETIQUETAS === */
.flag { font-weight: 800; color: #0f172a; }

/* === MÉTRICAS CLAVE: JRV / LÍNEA (más grandes y con gradiente) === */
.metric-wrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff, #fdf8ef 120%); /* luz cálida */
  border: 1.5px solid #f1e7cf;
  box-shadow:
    0 8px 18px rgba(245,158,11,.18),
    inset 0 1px 0 rgba(255,255,255,.8);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .3px;
  color: #1f2937;
}
.metric-chip i {
  font-size: 26px;
  color: var(--brand-accent);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* === ESTADO (HABIL_INHABIL) con halo y alto contraste === */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .4px;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.2);
}
.status-habil {
  background: linear-gradient(90deg, #16a34a, #22c55e);
  box-shadow: 0 10px 20px rgba(34,197,94,.26);
}
.status-inhabil {
  background: linear-gradient(90deg, #dc2626, #ef4444);
  box-shadow: 0 10px 20px rgba(239,68,68,.28);
}
.status-difunto {
  background: linear-gradient(90deg, #6b7280, #9ca3af);
  box-shadow: 0 10px 20px rgba(107,114,128,.26);
}

/* === NAV responsive: marca centrada en móvil === */
.brand-logo.brand-logo-responsive {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .brand-logo.brand-logo-responsive {
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.15rem;
    max-width: calc(100% - 96px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (min-width: 601px) {
  .main-nav-desktop { display: flex !important; }
}

/* === FAQ y paneles secundarios === */
.collapsible.popout > li {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--card-edge);
  box-shadow: 0 6px 16px rgba(14,58,138,.08);
  margin-bottom: 10px;
}
.collapsible-header i { color: #0ea5a4; }

/* === Título "Consulta Electoral" más grande en móvil === */
@media (max-width: 600px) {
  .brand-logo.brand-logo-responsive {
    /* ya centrado con transform */
    font-size: clamp(1.30rem, 4.5vw, 1.50rem); /* ↑ antes 1.15rem */
    line-height: 56px;                          /* alto de navbar móvil en Materialize */
    letter-spacing: 0.5px;
    max-width: calc(100% - 96px);               /* respeta el ícono del menú */
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* === KPI búsquedas (desktop/navbar & móvil/sidenav) === */
.kpi-badge {
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  color:#fff; padding:6px 10px; border-radius:999px;
  line-height:1; font-weight:700; font-size:.95rem;
  backdrop-filter: blur(6px);
}
.kpi-badge .material-icons { font-size:18px; opacity:.9; }

.kpi-chip-mobile {
  margin:12px 16px; display:flex; align-items:center; gap:8px;
  border-radius:10px; border:1px solid var(--card-edge);
  padding:10px 12px; background:#fff; font-weight:700;
  box-shadow: 0 6px 14px rgba(14,58,138,.08);
}
.kpi-chip-mobile .material-icons { font-size:18px; color:#777; }

/* Hint opcional arriba del form */
.kpi-hint {
  display:flex; align-items:center; gap:8px; margin:8px 0 0;
  color: var(--muted); font-size:.9rem;
}
.kpi-hint .material-icons { font-size:18px; color:#0ea5a4; }