/* =========================================================================
   MisCuentas — Sistema de diseño compartido
   Cargado por layouts/app.php y layouts/auth.php.
   Light = refinamiento de la identidad actual (índigo + slate).
   Dark  = overrides app-wide con !important (Tailwind Play CDN no es !important,
           así que cualquier regla !important aquí gana sin depender del orden).
   ========================================================================= */

[x-cloak] { display: none !important; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
}

/* Transición suave al alternar tema (sin animar layout) */
html.theme-ready body,
html.theme-ready nav,
.theme-transition,
.theme-transition * {
  transition: background-color .25s ease, border-color .25s ease, color .2s ease;
}

/* Jerarquía tipográfica un poco más refinada */
h1, h2, h3 { letter-spacing: -0.018em; }
h1 { letter-spacing: -0.025em; }

.tabular-nums { font-variant-numeric: tabular-nums; }

/* Inputs/selects/textarea: focus ring sutil */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.18);
  border-color: rgb(99 102 241);
}

/* Tablas */
table tbody tr { transition: background-color .12s; }
table thead th {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: rgb(100 116 139);
}

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Scrollbar fino */
* { scrollbar-width: thin; scrollbar-color: rgb(203 213 225) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgb(203 213 225); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184); }

/* ApexCharts más prolijo */
.apexcharts-tooltip {
  box-shadow: 0 8px 24px -8px rgb(15 23 42 / 0.16) !important;
  border-radius: 0.5rem !important;
  border: 1px solid rgb(226 232 240) !important;
}
.apexcharts-legend-text { color: rgb(71 85 105) !important; }

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.22);
}

/* Sombra base un punto más fina */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.05) !important;
}

::selection { background: rgb(199 210 254); color: rgb(49 46 129); }

/* =========================================================================
   MODO OSCURO
   ========================================================================= */
html.dark { background-color: #0a0f1c; color-scheme: dark; }

/* Fondo de página (gana en specificity sobre .bg-slate-50 con la doble clase) */
html.dark body.bg-slate-50 { background-color: #0a0f1c !important; }

/* Superficies blancas → tarjetas / nav / modales */
html.dark .bg-white,
html.dark .bg-white\/95,
html.dark .bg-white\/80,
html.dark .bg-white\/60 { background-color: #141b2d !important; }

/* Rellenos sutiles */
html.dark .bg-slate-50  { background-color: #19223a !important; }
html.dark .bg-slate-100 { background-color: #222c45 !important; }
html.dark .bg-slate-200 { background-color: #2a3550 !important; }
html.dark .bg-slate-300 { background-color: #3a4663 !important; }

/* Hover de fondos neutros */
html.dark .hover\:bg-slate-50:hover    { background-color: #19223a !important; }
html.dark .hover\:bg-slate-50\/60:hover{ background-color: #19223a !important; }
html.dark .hover\:bg-slate-100:hover   { background-color: #222c45 !important; }

/* Texto — escala slate */
html.dark .text-slate-900 { color: #eef2f8 !important; }
html.dark .text-slate-800 { color: #e4e9f1 !important; }
html.dark .text-slate-700 { color: #d3dae6 !important; }
html.dark .text-slate-600 { color: #b6c0d0 !important; }
html.dark .text-slate-500 { color: #93a0b4 !important; }
html.dark .text-slate-400 { color: #74819a !important; }
html.dark .text-slate-300 { color: #5b6880 !important; }
html.dark .hover\:text-slate-900:hover { color: #eef2f8 !important; }
html.dark .hover\:text-slate-600:hover { color: #b6c0d0 !important; }

/* Bordes neutros */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/80,
html.dark .border-slate-200\/60 { border-color: #283450 !important; }
html.dark .border-slate-300,
html.dark .border-slate-400 { border-color: #344160 !important; }
html.dark .hover\:border-slate-300:hover { border-color: #344160 !important; }

/* Divisores */
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #283450 !important; }

/* Acentos pastel — fondos */
html.dark .bg-indigo-50  { background-color: rgb(99 102 241 / 0.15) !important; }
html.dark .bg-indigo-50\/60 { background-color: rgb(99 102 241 / 0.12) !important; }
html.dark .bg-indigo-100 { background-color: rgb(99 102 241 / 0.24) !important; }
html.dark .bg-rose-50    { background-color: rgb(244 63 94 / 0.13) !important; }
html.dark .bg-rose-100   { background-color: rgb(244 63 94 / 0.22) !important; }
html.dark .bg-emerald-50 { background-color: rgb(16 185 129 / 0.13) !important; }
html.dark .bg-emerald-100{ background-color: rgb(16 185 129 / 0.22) !important; }
html.dark .bg-amber-50   { background-color: rgb(245 158 11 / 0.13) !important; }
html.dark .bg-amber-100  { background-color: rgb(245 158 11 / 0.22) !important; }
html.dark .bg-blue-100   { background-color: rgb(59 130 246 / 0.22) !important; }
html.dark .bg-violet-50  { background-color: rgb(139 92 246 / 0.15) !important; }
html.dark .hover\:bg-indigo-50:hover  { background-color: rgb(99 102 241 / 0.15) !important; }
html.dark .hover\:bg-rose-50:hover    { background-color: rgb(244 63 94 / 0.13) !important; }
html.dark .hover\:bg-emerald-50:hover { background-color: rgb(16 185 129 / 0.13) !important; }
html.dark .hover\:bg-amber-50:hover   { background-color: rgb(245 158 11 / 0.13) !important; }
html.dark .hover\:bg-emerald-100:hover{ background-color: rgb(16 185 129 / 0.22) !important; }

/* Acentos pastel — texto (aclarados para contraste sobre oscuro) */
html.dark .text-indigo-700, html.dark .text-indigo-800 { color: #c7d2fe !important; }
html.dark .text-indigo-600, html.dark .text-indigo-500 { color: #a5b4fc !important; }
html.dark .text-indigo-400 { color: #818cf8 !important; }
html.dark .hover\:text-indigo-600:hover { color: #a5b4fc !important; }
html.dark .text-rose-900, html.dark .text-rose-800 { color: #fecdd3 !important; }
html.dark .text-rose-700 { color: #fda4af !important; }
html.dark .text-rose-600, html.dark .text-rose-500 { color: #fb7185 !important; }
html.dark .hover\:text-rose-700:hover { color: #fda4af !important; }
html.dark .text-emerald-800 { color: #a7f3d0 !important; }
html.dark .text-emerald-700 { color: #6ee7b7 !important; }
html.dark .text-emerald-600, html.dark .text-emerald-500 { color: #34d399 !important; }
html.dark .text-amber-900, html.dark .text-amber-800 { color: #fde68a !important; }
html.dark .text-amber-700 { color: #fcd34d !important; }
html.dark .text-amber-600, html.dark .text-amber-500, html.dark .text-amber-400 { color: #fbbf24 !important; }
html.dark .hover\:text-amber-500:hover { color: #fbbf24 !important; }
html.dark .text-violet-700 { color: #c4b5fd !important; }
html.dark .text-violet-500 { color: #a78bfa !important; }
html.dark .text-blue-600 { color: #60a5fa !important; }

/* Acentos pastel — bordes */
html.dark .border-indigo-200, html.dark .border-indigo-300 { border-color: rgb(99 102 241 / 0.4) !important; }
html.dark .border-rose-200,  html.dark .border-rose-300  { border-color: rgb(244 63 94 / 0.35) !important; }
html.dark .border-emerald-200 { border-color: rgb(16 185 129 / 0.35) !important; }
html.dark .border-amber-100, html.dark .border-amber-200, html.dark .border-amber-300 { border-color: rgb(245 158 11 / 0.35) !important; }
html.dark .border-violet-400 { border-color: rgb(139 92 246 / 0.5) !important; }
html.dark .hover\:border-rose-300:hover  { border-color: rgb(244 63 94 / 0.45) !important; }
html.dark .hover\:border-amber-300:hover { border-color: rgb(245 158 11 / 0.45) !important; }

/* Gradientes pastel (banners/onboarding) — sólo se reescriben los stops claros */
html.dark .from-indigo-50  { --tw-gradient-from: rgb(99 102 241 / 0.16) var(--tw-gradient-from-position) !important; }
html.dark .from-indigo-100 { --tw-gradient-from: rgb(99 102 241 / 0.20) var(--tw-gradient-from-position) !important; }
html.dark .from-rose-50    { --tw-gradient-from: rgb(244 63 94 / 0.14) var(--tw-gradient-from-position) !important; }
html.dark .from-emerald-50 { --tw-gradient-from: rgb(16 185 129 / 0.14) var(--tw-gradient-from-position) !important; }
html.dark .from-amber-50   { --tw-gradient-from: rgb(245 158 11 / 0.14) var(--tw-gradient-from-position) !important; }
html.dark .via-blue-50     { --tw-gradient-via: rgb(59 130 246 / 0.12) var(--tw-gradient-via-position) !important; }
html.dark .via-slate-50    { --tw-gradient-via: rgb(148 163 184 / 0.06) var(--tw-gradient-via-position) !important; }
html.dark .to-emerald-50   { --tw-gradient-to: rgb(16 185 129 / 0.14) var(--tw-gradient-to-position) !important; }
html.dark .to-rose-50      { --tw-gradient-to: rgb(244 63 94 / 0.14) var(--tw-gradient-to-position) !important; }
html.dark .to-amber-50     { --tw-gradient-to: rgb(245 158 11 / 0.14) var(--tw-gradient-to-position) !important; }

/* Inputs en oscuro */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html.dark select,
html.dark textarea {
  background-color: #0e1525 !important;
  border-color: #344160 !important;
  color: #e4e9f1 !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #6b7689 !important; }
html.dark input[type="month"]::-webkit-calendar-picker-indicator,
html.dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }

/* Sombras: en oscuro el contraste lo da el borde, suavizamos la sombra */
html.dark .shadow-sm,
html.dark .shadow-soft,
html.dark .shadow-card { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.35) !important; }
html.dark .shadow-pop,
html.dark .shadow-md   { box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.6) !important; }
html.dark .shadow,
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl  { box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.7) !important; }

/* Auth (login/registro) */
html.dark .bg-indigo-200 { background-color: rgb(99 102 241 / 0.16) !important; }
html.dark .border-white\/60, html.dark .border-white\/40 { border-color: #283450 !important; }

/* Rings */
html.dark .ring-slate-200 { --tw-ring-color: #283450 !important; }
html.dark .ring-slate-900\/5 { --tw-ring-color: rgb(0 0 0 / 0.4) !important; }

/* Selección y scrollbar en oscuro */
html.dark ::selection { background: rgb(99 102 241 / 0.4); color: #eef2f8; }
html.dark * { scrollbar-color: #344160 transparent; }
html.dark *::-webkit-scrollbar-thumb { background: #344160; }
html.dark *::-webkit-scrollbar-thumb:hover { background: #44527a; }

/* Charts en oscuro */
html.dark .apexcharts-tooltip { border-color: #283450 !important; background: #141b2d !important; color: #e4e9f1 !important; }
html.dark .apexcharts-legend-text { color: #b6c0d0 !important; }
html.dark .apexcharts-text, html.dark .apexcharts-xaxis text, html.dark .apexcharts-yaxis text { fill: #93a0b4 !important; }
html.dark .apexcharts-gridline { stroke: #283450 !important; }