html {
  scroll-behavior: smooth;
}

/* -------- LOGIN -------- */
#loginScreen {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6) !important;
}

/* -------- APP -------- */
body {
  background: #f1f5f9;
  color: #111827;
}

html.dark body {
  background: #0b0f1a;       /* MÁS OSCURO REAL */
  color: #f1f5ff;            /* TEXTO MUY CLARO */
}

/* -------- TEXTO -------- */

.afiliado-nombre, .familiar-nombre {
  font-weight: 700 !important;
  color: #111827 !important;
}
html.dark .afiliado-nombre,
html.dark .familiar-nombre {
  color: #ffffff !important; /* BLANCO PURO */
}

.texto-normal {
  color: #1e293b !important;
}
html.dark .texto-normal {
  color: #e2e8f0 !important; /* GRIS HUESO → PERFECTO EN OSCURO */
}

/* -------- TARJETAS -------- */

.afiliado-card, .familiar-card {
  background-color: #ffffff !important;
  color: #111827 !important;
  transition: 0.2s;
}

html.dark .afiliado-card,
html.dark .familiar-card {
  background-color: #1e2533 !important; /* GRIS DE TARJETA EN OSCURO */
  color: #f8fafc !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* Texto dentro de tarjeta siempre legible */
html.dark .afiliado-card *,
html.dark .familiar-card * {
  color: #f8fafc !important;
}

/* -------- CHIPS ACTIVO / BAJA -------- */

.chip-activo {
  background: #16a34a33;
  color: #166534;
}
html.dark .chip-activo {
  background: #16a34a66;
  color: #eaffea;
}

.chip-baja {
  background: #dc262633;
  color: #7f1d1d;
}
html.dark .chip-baja {
  background: #dc262666;
  color: #ffeaea;
}

/* -------- INPUTS -------- */

input {
  background-color: rgba(255,255,255,0.9);
  color: #111827;
}
html.dark input {
  background-color: rgba(30,41,59,0.85);
  color: #f8fafc;
  border: 1px solid #334155;
}

/* -------- BOTÓN LIMPIAR -------- */

#clearBtn {
  background-color: #e2e8f0;
  color: #111827;
  border: 1px solid #cbd5e1;
}
#clearBtn:hover {
  background-color: #cbd5e1;
}

html.dark #clearBtn {
  background-color: #3b4252;
  color: #f8fafc;
  border: 1px solid #4c566a;
}
html.dark #clearBtn:hover {
  background-color: #4c566a;
}

/* -------- DARK TOGGLE -------- */

#darkToggle {
  background-color: #f8fafc;
  color: #111827;
  border: 1px solid #cbd5e1;
}

html.dark #darkToggle {
  background-color: #3b4252;
  color: #f8fafc;
  border: 1px solid #4c566a;
}


/* ========================================================= */
/* HIGHLIGHT / REMARCADO DE BÚSQUEDA SIEMPRE LEGIBLE         */
/* ========================================================= */

mark {
  background: #ffe066 !important;      /* Amarillo fuerte */
  color: #1a1a1a !important;           /* Negro/gris oscuro */
  padding: 1px 3px;
  border-radius: 3px;
}

/* MODO OSCURO: fondo más brillante y texto oscuro */
html.dark mark {
  background: #facc15 !important;      /* Amarillo intenso */
  color: #111111 !important;           /* Negro */
}