@import url("https://fonts.googleapis.com/css2?family=Lilita+One&family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap");

:root {
  --bg-overlay-light: rgba(245, 245, 244, 0.6);
  --bg-overlay-dark: rgba(245, 245, 244, 0.8);
  --card-bg: rgba(255, 255, 255, 0.95);
  --text-main: #1c1917; /* stone-900 */
  --text-secondary: #57534e; /* stone-600 */
  --header-bg: rgba(255, 255, 255, 0.9);
  --border-color: #e7e5e4;
}

/* --- VARIABLES MODO OSCURO --- */
body.dark-mode {
  --bg-overlay-light: rgba(15, 23, 42, 0.7); /* Slate 900 tint */
  --bg-overlay-dark: rgba(15, 23, 42, 0.85);
  --card-bg: rgba(30, 41, 59, 0.95); /* Slate 800 */
  --text-main: #f3f4f6; /* gray-100 */
  --text-secondary: #cbd5e1; /* slate-300 */
  --header-bg: rgba(15, 23, 42, 0.95);
  --border-color: #334155;
}

body {
  font-family: "Reddit Sans", sans-serif;
  background-color: #f5f5f4;
  color: var(--text-main);
  overflow-x: hidden;
  transition: color 0.3s ease;
}

/* --- FONDO DINÁMICO (PARALLAX) --- */
#dynamic-bg {
  position: fixed;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  transition:
    transform 0.1s ease-out,
    background-image 0.5s ease;
  will-change: transform;

  /* FONDO POR DEFECTO (DÍA - NUBES) */
  background-image:
    linear-gradient(to bottom, var(--bg-overlay-light), var(--bg-overlay-dark)),
    url("https://images.unsplash.com/photo-1569428034239-f9565e32e224?q=80&w=1979&auto=format&fit=crop");
}

/* FONDO MODO OSCURO (NOCHE - ESTRELLAS) */
body.dark-mode #dynamic-bg {
  background-image:
    linear-gradient(to bottom, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.95)),
    url("https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=2070&auto=format&fit=crop");
}

h1,
h2,
h3,
.font-display {
  font-family: "Lilita One", cursive;
  letter-spacing: 0.05em;
}

/* TÍTULOS Y TEXTOS ADAPTABLES */
h1,
h2,
h3 {
  color: var(--text-main) !important;
}
p,
span,
i {
  color: inherit;
} /* Heredar para facilitar cambios */

/* Excepciones específicas para mantener colores de semáforo/badges */
.text-blue-600,
.text-blue-700,
.text-blue-500 {
  color: #2563eb !important;
}
body.dark-mode .text-blue-600,
body.dark-mode .text-blue-700 {
  color: #60a5fa !important;
} /* Lighter blue in dark mode */

.text-red-600,
.text-red-700,
.text-red-800 {
  color: #dc2626 !important;
}
body.dark-mode .text-red-600,
body.dark-mode .text-red-700,
body.dark-mode .text-red-800 {
  color: #f87171 !important;
}

.text-emerald-600,
.text-emerald-700,
.text-emerald-800 {
  color: #059669 !important;
}
body.dark-mode .text-emerald-600,
body.dark-mode .text-emerald-700,
body.dark-mode .text-emerald-800 {
  color: #34d399 !important;
}

/* HEADER Y CARDS ADAPTABLES */
header {
  background-color: var(--header-bg) !important;
  border-bottom-color: var(--border-color) !important;
}

.card-shadow {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.3s ease;
  background-color: var(--card-bg);
  backdrop-filter: blur(5px);
  border: 1px solid var(--border-color);
}

.card-shadow:hover {
  transform: translateY(-4px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.2),
    0 4px 6px -2px rgba(0, 0, 0, 0.1);
  border-color: #60a5fa; /* Resalte azul al hover */
}

/* Ajustes específicos para textos secundarios en modo oscuro */
body.dark-mode .text-stone-500,
body.dark-mode .text-stone-600,
body.dark-mode .text-stone-700 {
  color: var(--text-secondary) !important;
}

/* Badges de fondo en modo oscuro (hacerlos un poco más oscuros) */
body.dark-mode .bg-blue-100 {
  background-color: rgba(30, 58, 138, 0.5);
  color: #bfdbfe !important;
}
body.dark-mode .bg-orange-100 {
  background-color: rgba(124, 45, 18, 0.5);
  color: #fed7aa !important;
}
body.dark-mode .bg-emerald-100 {
  background-color: rgba(6, 78, 59, 0.5);
  color: #a7f3d0 !important;
}
body.dark-mode .bg-red-100 {
  background-color: rgba(127, 29, 29, 0.5);
  color: #fecaca !important;
}
body.dark-mode .bg-rose-100 {
  background-color: rgba(136, 19, 55, 0.5);
  color: #fecdd3 !important;
}
body.dark-mode .bg-purple-100 {
  background-color: rgba(88, 28, 135, 0.5);
  color: #e9d5ff !important;
}
body.dark-mode .bg-stone-100 {
  background-color: rgba(51, 65, 85, 0.5);
  color: #e2e8f0 !important;
}
body.dark-mode .bg-stone-50 {
  background-color: rgba(15, 23, 42, 0.5);
  border-color: #334155;
}

.modal-overlay {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.glucose-gradient {
  background: linear-gradient(
    90deg,
    #ef4444 0%,
    #ef4444 15%,
    #10b981 15%,
    #10b981 60%,
    #f59e0b 60%,
    #f59e0b 80%,
    #7f1d1d 80%
  );
}

/* Botón Toggle Theme */
#theme-toggle {
  cursor: pointer;
  transition: transform 0.3s ease;
}
#theme-toggle:hover {
  transform: rotate(15deg) scale(1.1);
}