@import 'tailwindcss';
@import './theme.css';
@import '../../vendor/livewire/flux/dist/flux.css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
@source './theme.css';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --color-accent: var(--setel-primary);
    --color-accent-content: var(--setel-primary);
    --color-accent-foreground: #ffffff;
    --color-zinc-50: #fafafa;
    --color-zinc-100: #f5f5f5;
    --color-zinc-200: #e5e5e5;
    --color-zinc-300: #d4d4d4;
    --color-zinc-400: #a3a3a3;
    --color-zinc-500: #737373;
    --color-zinc-600: #525252;
    --color-zinc-700: #404040;
    --color-zinc-800: #262626;
    --color-zinc-900: #171717;
    --color-zinc-950: #0a0a0a;
}

@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

[data-flux-field]:not(ui-radio, ui-checkbox) {
    @apply grid gap-2;
}

[data-flux-label] {
    @apply !mb-0 !leading-tight;
}

input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
    @apply outline-hidden;
    border-color: var(--setel-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--setel-primary) 28%, transparent);
}

/* Auth login: un solo borde (estilos Setel solo en el <input>, no en el wrapper [data-flux-input]) */
.setel-auth-flux-input {
    border-color: var(--setel-card-border) !important;
    background-color: var(--setel-card-bg) !important;
    box-shadow: none !important;
    --tw-shadow: 0 0 #0000 !important;
    color: var(--setel-text) !important;
}

.setel-auth-flux-input::placeholder {
    color: var(--setel-text-muted);
}

.setel-auth-form [data-flux-input] [data-flux-button] {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    --tw-shadow: 0 0 #0000 !important;
    color: var(--setel-text-muted);
}

.setel-auth-form [data-flux-input] [data-flux-button]:hover {
    background: color-mix(in srgb, var(--setel-text) 6%, var(--setel-card-bg)) !important;
    color: var(--setel-text);
}

.setel-auth-form [data-flux-input] [data-flux-button]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--setel-primary) 40%, transparent);
    outline-offset: 2px;
}
