/* app/theme.css — Sistema de temas global con paleta refinada y compatibilidad */

/* ========== Paleta Base: Hogar y Salud (suave y profesional) ========== */
:root {
  /* Colores del logo — versión refinada */
  --hs-blue:     #1e88e5;     /* Azul vibrante pero no agresivo */
  --hs-green:    #2eb872;     /* Verde saludable, fresco */
  --hs-yellow:   #f4b400;     /* Amarillo cálido, acento */
  --hs-deep:     #0b3c5d;     /* Azul profundo, elegante para texto */

  /* Fondos suaves — bicolor integrado con degradado natural */
  --hs-bg1:      #eaf7ff;     /* Celeste muy claro (agua suave) */
  --hs-bg2:      #ecf9f1;     /* Verde pastel claro (hoja fresca) */

  /* Tokens de diseño — mejor integrados y con mejor jerarquía */
  --bg:          radial-gradient(900px 420px at 10% -10%, rgba(30, 136, 229, 0.08) 0%, transparent 55%),
                 radial-gradient(900px 420px at 110% 0%, rgba(46, 184, 114, 0.08) 0%, transparent 45%),
                 linear-gradient(135deg, var(--hs-bg1) 40%, var(--hs-bg2) 100%);
  --card:        #ffffff;
  --line:        rgba(11, 60, 93, 0.12); /* línea sutil con profundidad */
  --text:        #0f172a;     /* gris azulado profundo, legible */
  --muted:       #64748b;     /* gris neutro, perfecto para subtítulos */
  --pri:         var(--hs-blue);
  --pri-contrast:#ffffff;
  --accent:      var(--hs-green);
  --warn:        var(--hs-yellow);
  --err:         #e11d48;     /* rojo suave pero claro */
  --shadow:      0 18px 45px rgba(0, 0, 0, 0.12);
  --shadow-md:   0 10px 25px rgba(0, 0, 0, 0.10);
  --shadow-sm:   0 4px 12px rgba(0, 0, 0, 0.06);

  /* Botones y campos — coherencia de estilo */
  --btn-fg:      var(--pri-contrast);
  --field-bg:    #ffffff;
  --transition:  0.2s ease-in-out;
}

/* ========== Modo oscuro: elegante y no agresivo ========== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :root[data-theme="auto"] {
    --bg:          linear-gradient(135deg, #0a111f, #111827);
    --card:        #0f172a;
    --line:        rgba(255, 255, 255, 0.08);
    --text:        #f1f5f9;
    --muted:       #94a3b8;
    --pri:         #22c55e;     /* verde vivo pero natural */
    --pri-contrast:#0b1220;
    --accent:      #10b981;
    --warn:        #f59e0b;
    --err:         #ef4444;
    --shadow:      0 20px 50px rgba(0, 0, 0, 0.30);
    --shadow-md:   0 12px 30px rgba(0, 0, 0, 0.25);
    --shadow-sm:   0 4px 14px rgba(0, 0, 0, 0.18);
    --btn-fg:      var(--pri-contrast);
    --field-bg:    #1e293b;
  }
}

/* ========== Tema oscuro forzado ========== */
:root[data-theme="dark"] {
  --bg:          linear-gradient(135deg, #0a111f, #111827);
  --card:        #0f172a;
  --line:        rgba(255, 255, 255, 0.08);
  --text:        #f1f5f9;
  --muted:       #94a3b8;
  --pri:         #22c55e;
  --pri-contrast:#0b1220;
  --accent:      #10b981;
  --warn:        #f59e0b;
  --err:         #ef4444;
  --shadow:      0 20px 50px rgba(0, 0, 0, 0.30);
  --shadow-md:   0 12px 30px rgba(0, 0, 0, 0.25);
  --shadow-sm:   0 4px 14px rgba(0, 0, 0, 0.18);
  --btn-fg:      var(--pri-contrast);
  --field-bg:    #1e293b;
}

/* ========== Tema claro forzado (para consistencia) ========== */
:root[data-theme="light"] {
  --bg:          radial-gradient(900px 420px at 10% -10%, rgba(30, 136, 229, 0.08) 0%, transparent 55%),
                 radial-gradient(900px 420px at 110% 0%, rgba(46, 184, 114, 0.08) 0%, transparent 45%),
                 linear-gradient(135deg, var(--hs-bg1) 40%, var(--hs-bg2) 100%);
  --card:        #ffffff;
  --line:        rgba(11, 60, 93, 0.12);
  --text:        #0f172a;
  --muted:       #64748b;
  --pri:         var(--hs-blue);
  --pri-contrast:#ffffff;
  --accent:      var(--hs-green);
  --warn:        var(--hs-yellow);
  --err:         #e11d48;
  --shadow:      0 18px 45px rgba(0, 0, 0, 0.12);
  --shadow-md:   0 10px 25px rgba(0, 0, 0, 0.10);
  --shadow-sm:   0 4px 12px rgba(0, 0, 0, 0.06);
  --btn-fg:      var(--pri-contrast);
  --field-bg:    #ffffff;
}

/* ========== Estilos base — suaves y consistentes ========== */
html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  transition: background var(--transition), color var(--transition);
}

/* Tarjetas con profundidad sutil */
.card,
.cardx {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  color: inherit;
  transition: box-shadow var(--transition);
}

.card:hover,
.cardx:hover {
  box-shadow: var(--shadow-md);
}

/* Campos de entrada — diseño limpio y reactivo */
.input,
.select,
textarea {
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.input:focus,
.select:focus,
textarea:focus {
  border-color: var(--pri);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15);
}

/* Tablas — líneas sutiles */
.table th,
.table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.table th {
  color: var(--text);
  font-weight: 600;
}

/* Texto secundario */
.muted {
  color: var(--muted) !important;
  font-size: 0.875rem;
}

/* Botones — elegancia y feedback */
.btn {
  background: var(--pri);
  color: var(--btn-fg) !important;
  border: 0;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn.secondary {
  background: transparent;
  color: var(--text) !important;
  border: 1px solid var(--line);
  box-shadow: none;
}

/* Hover de secundarios más intencional (única instancia) */
.btn.secondary:hover {
  background: color-mix(in srgb, var(--pri) 10%, transparent);
  border-color: color-mix(in srgb, var(--pri) 24%, var(--line));
}

/* Badges — sutiles pero distintivos */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
}

/* === Alias para tema Hogar y Salud (compat con theme.js) === */
:root[data-theme="hs"]{
  /* usa la paleta base (light); no hace falta redefinir tokens */
}

/* === Capa de compatibilidad: neutraliza estilos viejos oscuros en modo claro === */
:root[data-theme="hs"] #app-content .cardx,
:root[data-theme="light"] #app-content .cardx,
:root[data-theme="hs"] #app-content .card,
:root[data-theme="light"] #app-content .card{
  background: var(--card) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
}
:root[data-theme="hs"] #app-content .input,
:root[data-theme="light"] #app-content .input,
:root[data-theme="hs"] #app-content .select,
:root[data-theme="light"] #app-content .select,
:root[data-theme="hs"] #app-content textarea,
:root[data-theme="light"] #app-content textarea{
  background: var(--field-bg) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
:root[data-theme="hs"] #app-content .btn,
:root[data-theme="light"] #app-content .btn{
  background: var(--pri) !important;
  color: var(--btn-fg) !important;
  border: 0 !important;
}
:root[data-theme="hs"] #app-content .btn.secondary,
:root[data-theme="light"] #app-content .btn.secondary{
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

/* === Badges: paleta correcta para claro y oscuro === */
:root[data-theme="hs"] .badge.red,
:root[data-theme="light"] .badge.red{ background:#ffe8ec; color:#9f1239; }
:root[data-theme="hs"] .badge.yellow,
:root[data-theme="light"] .badge.yellow{ background:#fff6dd; color:#8b6c0a; }

:root[data-theme="dark"] .badge.red{ background:#3f1d1f; color:#fecaca; }
:root[data-theme="dark"] .badge.yellow{ background:#3f341d; color:#fde68a; }

/* === Navegación coherente con el tema === */
:root[data-theme="hs"] .nav a:hover,
:root[data-theme="light"] .nav a:hover{
  background: color-mix(in srgb, var(--pri) 8%, transparent);
}
:root[data-theme="hs"] .nav a.active,
:root[data-theme="light"] .nav a.active{
  background: color-mix(in srgb, var(--pri) 12%, #ffffff 88%);
  border: 1px solid color-mix(in srgb, var(--pri) 22%, var(--line));
}

/* === Botón flotante del selector de tema === */
.theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  transition: box-shadow 0.2s ease-in-out;
}

.theme-toggle:hover {
  box-shadow: var(--shadow-md);
}

.theme-toggle button {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.theme-toggle button:hover {
  background: var(--line);
}

.theme-toggle small {
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .theme-toggle {
    right: 12px;
    bottom: 12px;
    padding: 6px 10px;
    gap: 6px;
  }
  .theme-toggle small {
    display: none;
  }
  .theme-toggle button {
    width: 24px;
    height: 24px;
  }
}