/* Estilos globales - Gestión Iglesia */

/*
 * Tema claro "Warm Sand".
 * Los verdes y rojos se conservan para ingresos/positivos y gastos/negativos.
 * Las reglas están limitadas a html sin `.dark`, por lo que el modo oscuro
 * mantiene su paleta original.
 */
:root {
  --sand-rich: #b47b52;
  --sand-rich-hover: #95603e;
  --sand-golden: #d6a674;
  --sand-soft: #e3c39f;
  --sand-light: #f0ddc5;
  --sand-ivory: #faf3e9;
  --sand-surface: #fffaf3;
  --sand-ink: #3f2b1d;
  --sand-text: #654832;
  --sand-muted: #8a684e;
}

html:not(.dark) body {
  background-color: var(--sand-ivory) !important;
  color: var(--sand-ink);
}

/* Superficies neutrales */
html:not(.dark) [class~="bg-white"] {
  background-color: var(--sand-surface) !important;
}

html:not(.dark) [class~="bg-slate-50"] {
  background-color: var(--sand-ivory) !important;
}

html:not(.dark) [class~="bg-slate-100"],
html:not(.dark) [class~="bg-gray-100"] {
  background-color: var(--sand-light) !important;
}

html:not(.dark) [class~="bg-slate-200"],
html:not(.dark) [class~="bg-gray-200"] {
  background-color: var(--sand-soft) !important;
}

html:not(.dark) [class~="hover:bg-slate-50"]:hover,
html:not(.dark) [class~="hover:bg-white"]:hover {
  background-color: var(--sand-ivory) !important;
}

html:not(.dark) [class~="hover:bg-slate-100"]:hover,
html:not(.dark) [class~="hover:bg-gray-100"]:hover {
  background-color: var(--sand-light) !important;
}

html:not(.dark) [class~="hover:bg-slate-200"]:hover,
html:not(.dark) [class~="hover:bg-gray-200"]:hover {
  background-color: var(--sand-soft) !important;
}

/* Texto neutral */
html:not(.dark) [class~="text-slate-950"],
html:not(.dark) [class~="text-slate-900"],
html:not(.dark) [class~="text-gray-900"] {
  color: var(--sand-ink) !important;
}

html:not(.dark) [class~="text-slate-800"],
html:not(.dark) [class~="text-slate-700"],
html:not(.dark) [class~="text-gray-800"],
html:not(.dark) [class~="text-gray-700"] {
  color: var(--sand-text) !important;
}

html:not(.dark) [class~="text-slate-600"],
html:not(.dark) [class~="text-slate-500"],
html:not(.dark) [class~="text-slate-400"],
html:not(.dark) [class~="text-gray-600"],
html:not(.dark) [class~="text-gray-500"] {
  color: var(--sand-muted) !important;
}

html:not(.dark) [class~="hover:text-slate-900"]:hover,
html:not(.dark) [class~="hover:text-slate-800"]:hover {
  color: var(--sand-ink) !important;
}

/* Bordes y divisores */
html:not(.dark) [class~="border-slate-100"],
html:not(.dark) [class~="border-slate-200"],
html:not(.dark) [class~="border-gray-200"] {
  border-color: var(--sand-light) !important;
}

html:not(.dark) [class~="border-slate-300"],
html:not(.dark) [class~="border-gray-300"] {
  border-color: var(--sand-soft) !important;
}

html:not(.dark) [class~="divide-slate-200"] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--sand-light) !important;
}

/* Azul/índigo/celeste pasan a la familia Rich Sand */
html:not(.dark) [class~="bg-blue-600"],
html:not(.dark) [class~="bg-blue-500"],
html:not(.dark) [class~="bg-indigo-600"],
html:not(.dark) [class~="bg-sky-600"] {
  background-color: var(--sand-rich) !important;
}

html:not(.dark) [class~="hover:bg-blue-700"]:hover,
html:not(.dark) [class~="hover:bg-blue-600"]:hover,
html:not(.dark) [class~="hover:bg-indigo-700"]:hover,
html:not(.dark) [class~="hover:bg-sky-700"]:hover {
  background-color: var(--sand-rich-hover) !important;
}

html:not(.dark) [class~="hover:bg-blue-400"]:hover {
  background-color: var(--sand-golden) !important;
}

html:not(.dark) [class~="bg-blue-50"],
html:not(.dark) [class~="bg-blue-50/80"],
html:not(.dark) [class~="bg-sky-50"],
html:not(.dark) [class~="bg-indigo-50"] {
  background-color: var(--sand-ivory) !important;
}

html:not(.dark) [class~="bg-blue-100"],
html:not(.dark) [class~="bg-indigo-100"],
html:not(.dark) [class~="bg-sky-100"],
html:not(.dark) [class~="hover:bg-blue-100"]:hover {
  background-color: var(--sand-light) !important;
}

html:not(.dark) [class~="text-blue-900"],
html:not(.dark) [class~="text-indigo-900"],
html:not(.dark) [class~="text-sky-900"] {
  color: var(--sand-ink) !important;
}

html:not(.dark) [class~="text-blue-800"],
html:not(.dark) [class~="text-blue-700"],
html:not(.dark) [class~="text-blue-600"],
html:not(.dark) [class~="text-indigo-800"],
html:not(.dark) [class~="text-indigo-700"],
html:not(.dark) [class~="text-indigo-600"],
html:not(.dark) [class~="text-sky-900"],
html:not(.dark) [class~="hover:text-blue-700"]:hover,
html:not(.dark) [class~="hover:text-blue-600"]:hover {
  color: var(--sand-rich-hover) !important;
}

html:not(.dark) [class~="border-blue-100"],
html:not(.dark) [class~="border-blue-300"],
html:not(.dark) [class~="border-indigo-300"],
html:not(.dark) [class~="border-sky-200"] {
  border-color: var(--sand-soft) !important;
}

html:not(.dark) [class~="border-blue-500"] {
  border-color: var(--sand-rich) !important;
}

html:not(.dark) [class~="ring-blue-500"],
html:not(.dark) [class~="ring-blue-500/20"],
html:not(.dark) [class~="ring-blue-500/50"],
html:not(.dark) [class~="ring-blue-400/40"],
html:not(.dark) [class~="focus:ring-blue-500"]:focus {
  --tw-ring-color: rgb(180 123 82 / 0.42) !important;
}

html:not(.dark) [class~="shadow-blue-500/30"],
html:not(.dark) [class~="shadow-blue-500/25"],
html:not(.dark) [class~="shadow-blue-200"] {
  --tw-shadow-color: rgb(180 123 82 / 0.28) !important;
}

/* Avisos y elementos secundarios: Golden/Soft Sand, sin amarillo fuerte */
html:not(.dark) [class~="bg-amber-50"],
html:not(.dark) [class~="bg-amber-50/80"],
html:not(.dark) [class~="bg-yellow-50"] {
  background-color: var(--sand-ivory) !important;
}

html:not(.dark) [class~="bg-amber-100"],
html:not(.dark) [class~="bg-yellow-100"],
html:not(.dark) [class~="bg-teal-100"] {
  background-color: var(--sand-light) !important;
}

html:not(.dark) [class~="text-amber-900"],
html:not(.dark) [class~="text-amber-800"],
html:not(.dark) [class~="text-amber-600"],
html:not(.dark) [class~="text-yellow-800"],
html:not(.dark) [class~="text-teal-800"],
html:not(.dark) [class~="text-teal-600"] {
  color: var(--sand-text) !important;
}

html:not(.dark) [class~="border-amber-200"],
html:not(.dark) [class~="border-yellow-200"],
html:not(.dark) [class~="border-teal-200"] {
  border-color: var(--sand-golden) !important;
}

html:not(.dark) [class~="bg-teal-500"] {
  background-color: var(--sand-rich) !important;
}

/* Campos de formulario y selección nativa */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  color: var(--sand-ink);
  caret-color: var(--sand-rich);
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: var(--sand-muted);
}

html:not(.dark) input:-webkit-autofill,
html:not(.dark) input:-webkit-autofill:hover,
html:not(.dark) input:-webkit-autofill:focus,
html:not(.dark) input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--sand-surface) inset !important;
  -webkit-text-fill-color: var(--sand-ink) !important;
}

/*
 * Interruptor de tema estilo glass.
 * La perilla se desplaza físicamente entre Claro y Oscuro.
 */
.glass-theme-toggle {
  position: relative;
  width: 128px;
  height: 44px;
  flex: 0 0 auto;
  overflow: visible;
  border: 1px solid rgb(255 255 255 / 0.62);
  border-radius: 9999px;
  isolation: isolate;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 360ms ease,
    border-color 360ms ease,
    box-shadow 360ms ease;
}

.glass-theme-toggle::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.48), transparent 52%),
    linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(0 0 0 / 0.07));
  pointer-events: none;
}

.glass-theme-toggle.is-light {
  color: var(--sand-ink);
  background: rgb(227 195 159 / 0.68);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 0.82),
    inset 0 -2px 5px rgb(149 96 62 / 0.13),
    0 6px 16px rgb(101 72 50 / 0.18);
}

.glass-theme-toggle.is-dark {
  color: #e2e8f0;
  background: rgb(15 23 42 / 0.76);
  border-color: rgb(148 163 184 / 0.24);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 0.14),
    inset 0 -3px 7px rgb(0 0 0 / 0.35),
    0 6px 18px rgb(0 0 0 / 0.34);
}

.glass-theme-toggle__label {
  position: absolute;
  top: 50%;
  width: 72px;
  transform: translateY(-50%);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1;
  transition:
    opacity 240ms ease,
    transform 360ms ease;
  user-select: none;
}

.glass-theme-toggle__label--light {
  right: 4px;
  opacity: 1;
}

.glass-theme-toggle__label--dark {
  left: 4px;
  opacity: 0;
}

.glass-theme-toggle.is-dark .glass-theme-toggle__label--light {
  opacity: 0;
  transform: translate(6px, -50%);
}

.glass-theme-toggle.is-dark .glass-theme-toggle__label--dark {
  opacity: 1;
}

.glass-theme-toggle__knob {
  position: absolute;
  top: 50%;
  left: 2px;
  z-index: 2;
  display: flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 0.66);
  border-radius: 50%;
  color: #fffaf3;
  background:
    radial-gradient(circle at 34% 26%, rgb(255 255 255 / 0.82), transparent 35%),
    linear-gradient(145deg, rgb(214 166 116 / 0.88), rgb(180 123 82 / 0.88));
  box-shadow:
    inset 2px 2px 5px rgb(255 255 255 / 0.5),
    inset -4px -5px 9px rgb(101 72 50 / 0.22),
    0 7px 13px rgb(101 72 50 / 0.3);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  transform: translate(0, -50%);
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    color 300ms ease,
    background 360ms ease,
    border-color 360ms ease,
    box-shadow 360ms ease;
}

.glass-theme-toggle.is-dark .glass-theme-toggle__knob {
  color: #fff;
  border-color: rgb(255 255 255 / 0.2);
  background:
    radial-gradient(circle at 34% 26%, rgb(255 255 255 / 0.18), transparent 34%),
    linear-gradient(145deg, rgb(51 65 85 / 0.95), rgb(15 23 42 / 0.96));
  box-shadow:
    inset 2px 2px 5px rgb(255 255 255 / 0.16),
    inset -4px -5px 10px rgb(0 0 0 / 0.4),
    0 7px 15px rgb(0 0 0 / 0.45);
  transform: translate(74px, -50%);
}

.glass-theme-toggle:hover .glass-theme-toggle__knob {
  box-shadow:
    inset 2px 2px 5px rgb(255 255 255 / 0.5),
    inset -4px -5px 9px rgb(101 72 50 / 0.22),
    0 9px 18px rgb(101 72 50 / 0.4);
}

.glass-theme-toggle.is-dark:hover .glass-theme-toggle__knob {
  box-shadow:
    inset 2px 2px 5px rgb(255 255 255 / 0.16),
    inset -4px -5px 10px rgb(0 0 0 / 0.4),
    0 9px 19px rgb(0 0 0 / 0.56);
}

.glass-theme-toggle:focus-visible {
  outline: 3px solid rgb(180 123 82 / 0.42);
  outline-offset: 3px;
}

.dark .glass-theme-toggle:focus-visible {
  outline-color: rgb(148 163 184 / 0.52);
}

.glass-theme-toggle:active .glass-theme-toggle__knob {
  scale: 0.94;
}

.glass-theme-toggle--compact {
  width: 40px;
  height: 40px;
  overflow: hidden;
}

.glass-theme-toggle--compact .glass-theme-toggle__knob {
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
}

.glass-theme-toggle--compact.is-dark .glass-theme-toggle__knob {
  transform: translate(-50%, -50%);
}

@media (max-width: 639px) {
  .glass-theme-toggle:not(.glass-theme-toggle--compact) {
    width: 108px;
    height: 40px;
  }

  .glass-theme-toggle:not(.glass-theme-toggle--compact) .glass-theme-toggle__knob {
    width: 44px;
    height: 44px;
  }

  .glass-theme-toggle:not(.glass-theme-toggle--compact) .glass-theme-toggle__label {
    width: 62px;
    font-size: 0.7rem;
  }

  .glass-theme-toggle:not(.glass-theme-toggle--compact).is-dark .glass-theme-toggle__knob {
    transform: translate(62px, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-theme-toggle,
  .glass-theme-toggle__label,
  .glass-theme-toggle__knob {
    transition-duration: 1ms !important;
  }
}

/* Scrollbar personalizado para calendario y listas */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgb(180 123 82 / 0.45);
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgb(149 96 62 / 0.65);
}

/* Soporte para safe-area en dispositivos con notch (iOS) - usar en elementos fijos al borde */