/* =========================================================================
   TEMA OSCURO GYM BODY
   Base comun para todas las pantallas internas (mismo estilo que Membresias).
   Los colores de cada pantalla se manejan con clases de Tailwind; este archivo
   solo cubre lo que Tailwind no alcanza: controles nativos del navegador,
   barras de scroll, listas desplegables, autocompletado y dialogos.
   ========================================================================= */
html { color-scheme: dark; }
body { background-color: #0d0d0e; color: #e4e4e7; }

/* Barras de scroll */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d0d0e; }
::-webkit-scrollbar-thumb { background: #2a2a2e; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3f; }

/* Campos de formulario: fondo oscuro por defecto (una clase bg-* de Tailwind lo reemplaza) */
/* :where() deja la especificidad en minimo para que cualquier clase de Tailwind gane */
input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color])), select, textarea {
    background-color: #18181b;
}
input::placeholder, textarea::placeholder { color: #71717a; }
select option, select optgroup { background: #18181b; color: #e4e4e7; }

/* Autocompletado de Chrome: evita el fondo amarillo/blanco */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-text-fill-color: #e4e4e7;
    -webkit-box-shadow: 0 0 0 1000px #18181b inset;
    caret-color: #e4e4e7;
    transition: background-color 9999s ease-in-out 0s;
}

/* Dialogos nativos */
dialog { background: #18181b; color: #e4e4e7; }
dialog::backdrop { background: rgba(0, 0, 0, .7); }

/* Seleccion de texto */
::selection { background: rgba(220, 38, 38, .45); color: #fff; }


/* =========================================================================
   MODO OSCURO CON UN POCO MAS DE VIDA (version sobria: solo toques rojos)
   Todo va dentro de html:not(.tema-claro): el modo claro NO se toca.
   ========================================================================= */
html:not(.tema-claro) body {
    background-image:
        radial-gradient(900px 500px at 105% -10%, rgba(220, 38, 38, .05), transparent 60%),
        radial-gradient(700px 420px at 0% 110%, rgba(255, 255, 255, .02), transparent 65%);
    background-attachment: fixed;
}

/* Aparicion suave del contenido */
@keyframes gym-entrada { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html:not(.tema-claro) body > div.flex-1 > * { animation: gym-entrada .4s ease both; }
html:not(.tema-claro) body > div.flex-1 > *:nth-child(2) { animation-delay: .05s; }
html:not(.tema-claro) body > div.flex-1 > *:nth-child(3) { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
    html:not(.tema-claro) body > div.flex-1 > * { animation: none; }
}

/* ---- Menu lateral: neutro, solo la opcion activa lleva rojo ---- */
html:not(.tema-claro) aside { background-image: linear-gradient(180deg, #0c0b0c 0%, #070708 100%); }
html:not(.tema-claro) aside a { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
html:not(.tema-claro) aside a:hover { transform: translateX(2px); }
html:not(.tema-claro) aside a.bg-zinc-800\/70 { box-shadow: inset 3px 0 0 #ef4444; }

/* ---- Tarjetas: un relieve sutil, sin brillos de color ---- */
html:not(.tema-claro) .bg-\[\#121214\],
html:not(.tema-claro) .bg-\[\#141416\],
html:not(.tema-claro) .bg-\[\#18181b\] {
    background-image: linear-gradient(145deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 50%);
    box-shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 8px 24px -14px rgba(0,0,0,.8);
    transition: transform .2s ease, border-color .2s ease;
}
html:not(.tema-claro) .grid > .bg-\[\#121214\]:hover {
    transform: translateY(-2px);
    border-color: rgba(239, 68, 68, .35);
}

/* ---- Botones: el rojo principal, plano y limpio ---- */
html:not(.tema-claro) .bg-red-600 { box-shadow: 0 4px 14px -6px rgba(220,38,38,.5); }
html:not(.tema-claro) .bg-red-600:hover { filter: brightness(1.08); }

/* ---- Formularios: foco con un aro rojo fino ---- */
html:not(.tema-claro) input:focus, html:not(.tema-claro) select:focus, html:not(.tema-claro) textarea:focus {
    outline: none !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
}
html:not(.tema-claro) input[type=checkbox], html:not(.tema-claro) input[type=radio] { accent-color: #ef4444; }

/* ---- Tablas ---- */
html:not(.tema-claro) table tbody tr { transition: background-color .15s ease; }
html:not(.tema-claro) table tbody tr:hover { background-color: rgba(255,255,255,.035); }

/* ---- Dialogos ---- */
html:not(.tema-claro) dialog { border: 1px solid #27272a; box-shadow: 0 25px 80px rgba(0,0,0,.8); }
html:not(.tema-claro) dialog::backdrop { background: rgba(0,0,0,.75); backdrop-filter: blur(3px); }


/* =========================================================================
   MODO CLARO
   Se activa con la clase "tema-claro" en <html> (la pone /js/tema.js segun
   lo que el usuario eligio en el Dashboard). Traduce la paleta oscura a una
   clara. El menu lateral (<aside>) se mantiene oscuro a proposito.
   Archivo generado: si se agregan clases nuevas a las pantallas, sumarlas aqui.
   ========================================================================= */
html.tema-claro { color-scheme: light; }
.tema-claro body { background-color: #f4f4f5 !important; color: #27272a !important; }
.tema-claro aside { color: #ffffff; color-scheme: dark; }
.tema-claro ::-webkit-scrollbar-track { background: #f4f4f5; }
.tema-claro ::-webkit-scrollbar-thumb { background: #d4d4d8; }
.tema-claro ::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }
.tema-claro input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color])),
.tema-claro select, .tema-claro textarea { background-color: #ffffff; color: #18181b; }
.tema-claro input::placeholder, .tema-claro textarea::placeholder { color: #a1a1aa; }
.tema-claro select option, .tema-claro select optgroup { background: #ffffff; color: #18181b; }
.tema-claro input:-webkit-autofill, .tema-claro input:-webkit-autofill:hover, .tema-claro input:-webkit-autofill:focus {
    -webkit-text-fill-color: #18181b; -webkit-box-shadow: 0 0 0 1000px #ffffff inset; caret-color: #18181b;
}
.tema-claro dialog { background: #ffffff; color: #18181b; }
.tema-claro dialog::backdrop { background: rgba(24, 24, 27, .45); }
.tema-claro ::selection { background: rgba(220, 38, 38, .25); color: #18181b; }
.tema-claro .metal-text { background: linear-gradient(180deg, #f4f4f5 0%, #d4d4d8 45%, #a1a1aa 55%, #e4e4e7 100%); -webkit-background-clip: text; background-clip: text; }

/* Controles propios de Membresias */
.tema-claro .filtro-col { background: #ffffff; border-color: #d4d4d8; color: #3f3f46; }
.tema-claro .filtro-col.activo { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.tema-claro .item-menu:hover { background: rgba(0, 0, 0, .04); }
.tema-claro .campo-dlg { background: #ffffff; border-color: #d4d4d8; color: #18181b; }
.tema-claro .btn-cancelar { background: #f4f4f5; color: #3f3f46; }
.tema-claro .btn-cancelar:hover { background: #e4e4e7; }

/* Sombras mas suaves en claro */
.tema-claro .shadow-2xl, .tema-claro .shadow-xl { box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .18); }

/* Paleta */
.tema-claro .bg-\[\#0d0d0e\] { background-color: #f4f4f5; }
.tema-claro .bg-\[\#121214\] { background-color: #ffffff; }
.tema-claro .bg-\[\#141416\] { background-color: #ffffff; }
.tema-claro .bg-\[\#18181b\] { background-color: #fafafa; }
.tema-claro .bg-zinc-900 { background-color: #ffffff; }
.tema-claro .bg-zinc-900\/85 { background-color: rgba(255,255,255,.9); }
.tema-claro .bg-zinc-800 { background-color: #f4f4f5; }
.tema-claro .bg-zinc-800\/50 { background-color: #f4f4f5; }
.tema-claro .bg-zinc-800\/60 { background-color: #f4f4f5; }
.tema-claro .bg-zinc-800\/70 { background-color: #f4f4f5; }
.tema-claro .bg-zinc-700\/40 { background-color: #e4e4e7; }
.tema-claro .bg-white\/\[0\.02\] { background-color: rgba(0,0,0,.02); }
.tema-claro .focus\:bg-\[\#121214\]:focus { background-color: #ffffff; }
.tema-claro .hover\:bg-zinc-800:hover { background-color: #f4f4f5; }
.tema-claro .hover\:bg-zinc-800\/50:hover { background-color: #f4f4f5; }
.tema-claro .hover\:bg-zinc-700:hover { background-color: #e4e4e7; }
.tema-claro .hover\:bg-zinc-600:hover { background-color: #d4d4d8; }
.tema-claro .hover\:bg-zinc-900:hover { background-color: #f4f4f5; }
.tema-claro .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,.04); }
.tema-claro .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,.05); }
.tema-claro .hover\:bg-white\/\[0\.02\]:hover { background-color: rgba(0,0,0,.025); }
.tema-claro .text-white:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #18181b; }
.tema-claro .hover\:text-white:hover:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]):not([class*="hover:bg-red-"],[class*="hover:bg-emerald-6"],[class*="hover:bg-emerald-7"],[class*="hover:bg-blue-6"],[class*="hover:bg-black"]) { color: #09090b; }
.tema-claro .text-zinc-100 { color: #18181b; }
.tema-claro .text-zinc-200 { color: #27272a; }
.tema-claro .text-zinc-300 { color: #3f3f46; }
.tema-claro .text-zinc-400 { color: #52525b; }
.tema-claro .text-zinc-500 { color: #71717a; }
.tema-claro .text-zinc-600 { color: #a1a1aa; }
.tema-claro .text-zinc-700 { color: #d4d4d8; }
.tema-claro .text-red-300:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #b91c1c; }
.tema-claro .text-red-400:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #dc2626; }
.tema-claro .text-emerald-300:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #047857; }
.tema-claro .text-emerald-400:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #059669; }
.tema-claro .text-green-400:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #16a34a; }
.tema-claro .text-green-300:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #15803d; }
.tema-claro .text-amber-300:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #b45309; }
.tema-claro .text-amber-400:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #d97706; }
.tema-claro .text-blue-300:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #1d4ed8; }
.tema-claro .text-blue-400:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #2563eb; }
.tema-claro .text-purple-300:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #7e22ce; }
.tema-claro .text-purple-400:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #9333ea; }
.tema-claro .text-sky-400:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #0284c7; }
.tema-claro .text-indigo-400:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #4f46e5; }
.tema-claro .text-yellow-400:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #ca8a04; }
.tema-claro .text-orange-400:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #ea580c; }
.tema-claro .border-zinc-900 { border-color: #e4e4e7; }
.tema-claro .border-zinc-800 { border-color: #e4e4e7; }
.tema-claro .border-zinc-800\/80 { border-color: #e4e4e7; }
.tema-claro .border-zinc-800\/60 { border-color: #e4e4e7; }
.tema-claro .border-zinc-700 { border-color: #d4d4d8; }
.tema-claro .border-zinc-600 { border-color: #a1a1aa; }
.tema-claro .divide-zinc-800 > :not([hidden]) ~ :not([hidden]) { border-color: #e4e4e7; }
.tema-claro .divide-zinc-800\/80 > :not([hidden]) ~ :not([hidden]) { border-color: #e4e4e7; }

/* El menu lateral conserva sus colores oscuros (el <aside> y todo lo que tiene dentro) */
.tema-claro aside .bg-\[\#0d0d0e\], .tema-claro aside.bg-\[\#0d0d0e\] { background-color: #0d0d0e; }
.tema-claro aside .bg-\[\#121214\], .tema-claro aside.bg-\[\#121214\] { background-color: #121214; }
.tema-claro aside .bg-\[\#141416\], .tema-claro aside.bg-\[\#141416\] { background-color: #141416; }
.tema-claro aside .bg-\[\#18181b\], .tema-claro aside.bg-\[\#18181b\] { background-color: #18181b; }
.tema-claro aside .bg-zinc-900, .tema-claro aside.bg-zinc-900 { background-color: #18181b; }
.tema-claro aside .bg-zinc-900\/85, .tema-claro aside.bg-zinc-900\/85 { background-color: rgba(24,24,27,.85); }
.tema-claro aside .bg-zinc-800, .tema-claro aside.bg-zinc-800 { background-color: #27272a; }
.tema-claro aside .bg-zinc-800\/50, .tema-claro aside.bg-zinc-800\/50 { background-color: rgba(39,39,42,.5); }
.tema-claro aside .bg-zinc-800\/60, .tema-claro aside.bg-zinc-800\/60 { background-color: rgba(39,39,42,.6); }
.tema-claro aside .bg-zinc-800\/70, .tema-claro aside.bg-zinc-800\/70 { background-color: rgba(39,39,42,.7); }
.tema-claro aside .bg-zinc-700\/40, .tema-claro aside.bg-zinc-700\/40 { background-color: rgba(63,63,70,.4); }
.tema-claro aside .bg-white\/\[0\.02\], .tema-claro aside.bg-white\/\[0\.02\] { background-color: rgba(255,255,255,.02); }
.tema-claro aside .hover\:bg-zinc-800:hover, .tema-claro aside.hover\:bg-zinc-800:hover { background-color: #27272a; }
.tema-claro aside .hover\:bg-zinc-800\/50:hover, .tema-claro aside.hover\:bg-zinc-800\/50:hover { background-color: rgba(39,39,42,.5); }
.tema-claro aside .hover\:bg-zinc-700:hover, .tema-claro aside.hover\:bg-zinc-700:hover { background-color: #3f3f46; }
.tema-claro aside .hover\:bg-zinc-600:hover, .tema-claro aside.hover\:bg-zinc-600:hover { background-color: #52525b; }
.tema-claro aside .hover\:bg-zinc-900:hover, .tema-claro aside.hover\:bg-zinc-900:hover { background-color: #18181b; }
.tema-claro aside .hover\:bg-white\/5:hover, .tema-claro aside.hover\:bg-white\/5:hover { background-color: rgba(255,255,255,.05); }
.tema-claro aside .hover\:bg-white\/10:hover, .tema-claro aside.hover\:bg-white\/10:hover { background-color: rgba(255,255,255,.1); }
.tema-claro aside .hover\:bg-white\/\[0\.02\]:hover, .tema-claro aside.hover\:bg-white\/\[0\.02\]:hover { background-color: rgba(255,255,255,.02); }
.tema-claro aside .text-white:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]), .tema-claro aside.text-white:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]) { color: #ffffff; }
.tema-claro aside .hover\:text-white:hover:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]):not([class*="hover:bg-red-"],[class*="hover:bg-emerald-6"],[class*="hover:bg-emerald-7"],[class*="hover:bg-blue-6"],[class*="hover:bg-black"]), .tema-claro aside.hover\:text-white:hover:not([class~="bg-black"],[class~="bg-black/75"],[class~="bg-blue-600"],[class~="bg-emerald-600"],[class~="bg-emerald-700/80"],[class~="bg-red-600"],[class~="bg-red-700"]):not([class*="hover:bg-red-"],[class*="hover:bg-emerald-6"],[class*="hover:bg-emerald-7"],[class*="hover:bg-blue-6"],[class*="hover:bg-black"]) { color: #ffffff; }
.tema-claro aside .text-zinc-100, .tema-claro aside.text-zinc-100 { color: #f4f4f5; }
.tema-claro aside .text-zinc-200, .tema-claro aside.text-zinc-200 { color: #e4e4e7; }
.tema-claro aside .text-zinc-300, .tema-claro aside.text-zinc-300 { color: #d4d4d8; }
.tema-claro aside .text-zinc-400, .tema-claro aside.text-zinc-400 { color: #a1a1aa; }
.tema-claro aside .text-zinc-500, .tema-claro aside.text-zinc-500 { color: #71717a; }
.tema-claro aside .text-zinc-600, .tema-claro aside.text-zinc-600 { color: #52525b; }
.tema-claro aside .text-zinc-700, .tema-claro aside.text-zinc-700 { color: #3f3f46; }
.tema-claro aside .border-zinc-900, .tema-claro aside.border-zinc-900 { border-color: #18181b; }
.tema-claro aside .border-zinc-800, .tema-claro aside.border-zinc-800 { border-color: #27272a; }
.tema-claro aside .border-zinc-800\/80, .tema-claro aside.border-zinc-800\/80 { border-color: rgba(39,39,42,.8); }
.tema-claro aside .border-zinc-800\/60, .tema-claro aside.border-zinc-800\/60 { border-color: rgba(39,39,42,.6); }
.tema-claro aside .border-zinc-700, .tema-claro aside.border-zinc-700 { border-color: #3f3f46; }
.tema-claro aside .border-zinc-600, .tema-claro aside.border-zinc-600 { border-color: #52525b; }