/* jrhub — overrides finos sobre Tailwind. */

:root {
    color-scheme: light;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Alpine cloak — evita flash de contenido sin estilo */
[x-cloak] {
    display: none !important;
}

/* Scrollbar sutil (webkit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgb(214 211 209 / 0.5);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgb(168 162 158 / 0.7);
    background-clip: content-box;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(214 211 209 / 0.6) transparent;
}

/* Focus visible ring un poco más bonito que el default */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgb(255 255 255), 0 0 0 4px rgb(99 102 241 / 0.5);
    border-radius: 0.5rem;
}

/* Buttons/links sin perder focus en click pero sí en keyboard */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Audio element styling minimal */
audio {
    border-radius: 8px;
}

/* Animaciones globales — respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Sortable.js helpers */
.sortable-ghost {
    opacity: 0.3 !important;
}
.sortable-drag {
    cursor: grabbing !important;
    transform: rotate(1deg);
}

/* Línea para textareas autosize sin scrollbar interno */
textarea {
    line-height: 1.55;
}

/* Selección de texto */
::selection {
    background: rgb(199 210 254);
    color: rgb(49 46 129);
}

/* ============================================================
   AMOLED DARK MODE — fondo negro puro #000, mínimo glow.
   Pensado para pantallas OLED: pixels apagados = mejor contraste
   y ahorro de batería en móvil. Cards tienen elevación sutil
   con #0a0a0a y bordes #1a1a1a para definir sin "ruido".
   ============================================================ */
.dark {
    color-scheme: dark;
    /* tokens para reutilizar */
    --amoled-bg: #000000;
    --amoled-surface: #0a0a0a;
    --amoled-surface-2: #141414;
    --amoled-border: #1f1f1f;
    --amoled-border-strong: #2d2d2d;
    --amoled-text: #f5f5f4;
    --amoled-text-dim: #a8a29e;
    --amoled-text-mute: #78716c;
}

/* Fondo base — negro puro */
.dark body,
.dark .bg-stone-50,
.dark .bg-stone-50\/60,
.dark .bg-stone-50\/40 { background-color: var(--amoled-bg) !important; }

.dark .bg-stone-950 { background-color: var(--amoled-bg) !important; }
.dark .bg-stone-900 { background-color: var(--amoled-surface) !important; }

/* Superficies blancas → surface (#0a0a0a)
   Attribute selector cubre TODAS las variantes: bg-white, bg-white/40,
   bg-white/60, bg-white/70, bg-white/80, bg-white/90, bg-white/95. */
.dark [class*="bg-white"] { background-color: var(--amoled-surface) !important; }

/* Stones grises pasan a surface más elevada */
.dark .bg-stone-100,
.dark .bg-stone-100\/70,
.dark .bg-stone-100\/95 { background-color: var(--amoled-surface-2) !important; }
.dark .bg-stone-200 { background-color: #1a1a1a !important; }

/* Bordes minimal, definidos sin gritar */
.dark .border-stone-100 { border-color: var(--amoled-border) !important; }
.dark .border-stone-200 { border-color: var(--amoled-border) !important; }
.dark .border-stone-300 { border-color: var(--amoled-border-strong) !important; }
.dark .border-stone-800,
.dark .border-stone-700 { border-color: var(--amoled-border) !important; }
.dark .divide-stone-100 > * + *,
.dark .divide-stone-200 > * + * { border-color: var(--amoled-border) !important; }

/* Sidebar y aside con surface elevada */
.dark aside.bg-stone-900,
.dark .bg-stone-900 { background-color: var(--amoled-surface) !important; }

/* Textos jerárquicos */
.dark .text-stone-900 { color: var(--amoled-text) !important; }
.dark .text-stone-800 { color: rgb(231 229 228) !important; }
.dark .text-stone-700 { color: rgb(214 211 209) !important; }
.dark .text-stone-600,
.dark .text-stone-500 { color: var(--amoled-text-dim) !important; }
.dark .text-stone-400 { color: var(--amoled-text-mute) !important; }
.dark .text-stone-300 { color: #57534e !important; }
.dark .text-stone-100 { color: var(--amoled-text) !important; }
.dark .text-stone-200 { color: rgb(231 229 228) !important; }

/* Accentos pastel (50/100) → tintes MUY sutiles sobre negro (5% opacity).
   Solo se usan para BADGES pequeños. Para secciones grandes (cards-within-cards)
   ver override de abajo que los manda a surface-2 con accent en border. */
.dark .bg-indigo-50 { background-color: rgb(99 102 241 / 0.08) !important; }
.dark .bg-emerald-50 { background-color: rgb(16 185 129 / 0.08) !important; }
.dark .bg-amber-50 { background-color: rgb(251 191 36 / 0.08) !important; }
.dark .bg-rose-50 { background-color: rgb(244 63 94 / 0.08) !important; }
.dark .bg-sky-50 { background-color: rgb(14 165 233 / 0.08) !important; }
.dark .bg-indigo-100 { background-color: rgb(99 102 241 / 0.14) !important; }
.dark .bg-emerald-100 { background-color: rgb(16 185 129 / 0.14) !important; }
.dark .bg-amber-100 { background-color: rgb(251 191 36 / 0.14) !important; }
.dark .bg-rose-100 { background-color: rgb(244 63 94 / 0.14) !important; }

/* Grupos "card-within-card" (secciones del modal con borde redondeado +
   fondo pastel, todas las variantes de opacidad) — pasan a surface-2
   con borde acentuado en color sutil.
   Esto evita el efecto "washed-out verde/lila" sobre AMOLED. */
.dark [class*="bg-emerald-50"] {
    background-color: var(--amoled-surface-2) !important;
}
.dark [class*="bg-indigo-50"] {
    background-color: var(--amoled-surface-2) !important;
}
.dark [class*="bg-amber-50"] {
    background-color: var(--amoled-surface-2) !important;
}
.dark [class*="bg-rose-50"] {
    background-color: var(--amoled-surface-2) !important;
}
.dark [class*="bg-sky-50"] {
    background-color: var(--amoled-surface-2) !important;
}

/* Texto-{color}-900 (titles dentro de cards pastel) - clarear para legibilidad */
.dark .text-emerald-900 { color: rgb(110 231 183) !important; }
.dark .text-indigo-900 { color: rgb(165 180 252) !important; }
.dark .text-amber-900 { color: rgb(252 211 77) !important; }
.dark .text-rose-900 { color: rgb(253 164 175) !important; }
.dark .text-sky-900 { color: rgb(125 211 252) !important; }

/* Bordes pastel-200 también más visibles sobre negro */
.dark .border-emerald-200 { border-color: rgb(16 185 129 / 0.4) !important; }
.dark .border-indigo-200 { border-color: rgb(99 102 241 / 0.4) !important; }
.dark .border-amber-200 { border-color: rgb(251 191 36 / 0.4) !important; }
.dark .border-rose-200 { border-color: rgb(244 63 94 / 0.4) !important; }
.dark .border-sky-200 { border-color: rgb(14 165 233 / 0.4) !important; }

/* Date inputs nativos del browser — fuerza color esquema oscuro
   para que el picker sea dark también (Chrome respeta color-scheme). */
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"],
.dark input[type="month"],
.dark input[type="week"] {
    color-scheme: dark;
}

/* Accentos brillantes (texto/border) — más vivos para destacar sobre negro */
.dark .text-indigo-700,
.dark .text-indigo-600 { color: rgb(165 180 252) !important; }
.dark .text-emerald-700,
.dark .text-emerald-600 { color: rgb(52 211 153) !important; }
.dark .text-amber-700,
.dark .text-amber-600 { color: rgb(251 191 36) !important; }
.dark .text-rose-700,
.dark .text-rose-600 { color: rgb(251 113 133) !important; }
.dark .text-sky-700,
.dark .text-sky-600 { color: rgb(56 189 248) !important; }
.dark .border-indigo-100 { border-color: rgb(99 102 241 / 0.3) !important; }
.dark .border-indigo-300 { border-color: rgb(99 102 241 / 0.5) !important; }

/* Hover backgrounds */
.dark .hover\:bg-stone-50:hover,
.dark .hover\:bg-stone-100:hover { background-color: var(--amoled-surface-2) !important; }
.dark .hover\:bg-white:hover { background-color: var(--amoled-surface-2) !important; }

/* Inputs / textareas / selects */
.dark input,
.dark textarea,
.dark select {
    background-color: var(--amoled-bg) !important;
    color: var(--amoled-text);
    border-color: var(--amoled-border-strong);
}
.dark input::placeholder,
.dark textarea::placeholder { color: var(--amoled-text-mute); }
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    background-color: var(--amoled-surface) !important;
    border-color: rgb(99 102 241) !important;
}

/* Botón primario indigo — mismo color, contrasta perfecto sobre negro */
.dark .bg-indigo-600 { background-color: rgb(79 70 229) !important; }
.dark .bg-indigo-600:hover,
.dark .hover\:bg-indigo-700:hover { background-color: rgb(99 102 241) !important; }

/* Scrollbar AMOLED */
.dark ::-webkit-scrollbar-thumb { background-color: rgb(45 45 45 / 0.8); }
.dark ::-webkit-scrollbar-thumb:hover { background-color: rgb(70 70 70); }
.dark * { scrollbar-color: rgb(45 45 45) transparent; }

/* Selección */
.dark ::selection {
    background: rgb(99 102 241 / 0.45);
    color: #fff;
}

/* Focus ring con buen contraste sobre negro */
.dark :focus-visible {
    box-shadow: 0 0 0 2px var(--amoled-bg), 0 0 0 4px rgb(129 140 248 / 0.8);
}

/* Backdrop blur sobre negro */
.dark .backdrop-blur-md,
.dark .backdrop-blur-sm,
.dark .backdrop-blur { background-color: rgb(0 0 0 / 0.7) !important; }

/* Shadows en dark — más sutiles porque ya hay contraste por color */
.dark .shadow-sm { box-shadow: 0 1px 2px rgb(0 0 0 / 0.6) !important; }
.dark .shadow-md { box-shadow: 0 2px 8px rgb(0 0 0 / 0.7) !important; }
.dark .shadow-lg { box-shadow: 0 8px 24px rgb(0 0 0 / 0.75) !important; }
.dark .shadow-xl { box-shadow: 0 12px 32px rgb(0 0 0 / 0.8) !important; }
.dark .shadow-2xl { box-shadow: 0 20px 50px rgb(0 0 0 / 0.85) !important; }

/* Glassmorphism cards: en dark son simplemente negro semi-transparente con border definido */
.dark [class*="backdrop-blur"][class*="bg-white"] {
    background-color: rgb(10 10 10 / 0.6) !important;
    border-color: var(--amoled-border) !important;
}

/* Ring colors */
.dark .ring-stone-200 { --tw-ring-color: var(--amoled-border) !important; }
.dark .ring-indigo-100 { --tw-ring-color: rgb(99 102 241 / 0.25) !important; }