@import 'tailwindcss';
@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';

@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';

    /*
    |--------------------------------------------------------------------------
    | Identidad CCLEM
    |--------------------------------------------------------------------------
    */

    --color-cclem-50: #f6f8f3;
    --color-cclem-100: #e8eee2;
    --color-cclem-200: #d2ddc9;
    --color-cclem-300: #afc2a2;
    --color-cclem-400: #829c74;
    --color-cclem-500: #5f7c53;
    --color-cclem-600: #48633f;
    --color-cclem-700: #384f33;
    --color-cclem-800: #2c402a;
    --color-cclem-900: #233523;
    --color-cclem-950: #172519;

    --color-gold-50: #fcf8ef;
    --color-gold-100: #f7edda;
    --color-gold-200: #efd9b3;
    --color-gold-300: #e5bf81;
    --color-gold-400: #d7a451;
    --color-gold-500: #c68b34;
    --color-gold-600: #aa6d28;
    --color-gold-700: #895123;
    --color-gold-800: #704222;
    --color-gold-900: #5e3820;

    --color-zinc-50: #fafaf8;
    --color-zinc-100: #f5f5f1;
    --color-zinc-200: #e7e7e1;
    --color-zinc-300: #d5d6cf;
    --color-zinc-400: #a2a49c;
    --color-zinc-500: #73776e;
    --color-zinc-600: #53584f;
    --color-zinc-700: #41463e;
    --color-zinc-800: #292e28;
    --color-zinc-900: #1d211c;
    --color-zinc-950: #10130f;

    --color-accent: var(--color-cclem-800);
    --color-accent-content: var(--color-cclem-800);
    --color-accent-foreground: #ffffff;
}

@layer theme {
    .dark {
        --color-accent: var(--color-gold-300);
        --color-accent-content: var(--color-gold-300);
        --color-accent-foreground: var(--color-cclem-950);
    }
}

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

    body {
        background:
            radial-gradient(
                circle at top right,
                rgba(215, 164, 81, 0.05),
                transparent 30rem
            ),
            #fafaf8;

        color: #1d211c;
    }
}

[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 ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
}

/*
|--------------------------------------------------------------------------
| Sidebar institucional
|--------------------------------------------------------------------------
*/

.cclem-sidebar {
    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(215, 164, 81, 0.12),
            transparent 18rem
        ),
        linear-gradient(
            180deg,
            #314a31 0%,
            #29422d 48%,
            #203824 100%
        ) !important;

    border-right: 1px solid rgba(215, 176, 106, 0.28) !important;
    color: white;
}

.cclem-sidebar [data-flux-sidebar-group-heading] {
    color: #e8c98e !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cclem-sidebar [data-flux-sidebar-item] {
    color: rgba(255, 255, 255, 0.9);
    border-radius: 0.65rem;
    transition:
        background-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.cclem-sidebar [data-flux-sidebar-item] svg {
    color: #ebcb8d;
}

.cclem-sidebar [data-flux-sidebar-item]:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.cclem-sidebar [data-flux-sidebar-item][data-current] {
    background: linear-gradient(
        90deg,
        #e5c27f 0%,
        #f0d7a7 100%
    ) !important;

    color: #29422d !important;

    box-shadow:
        0 8px 20px rgba(17, 32, 19, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.cclem-sidebar [data-flux-sidebar-item][data-current] svg {
    color: #29422d !important;
}

/*
|--------------------------------------------------------------------------
| Logo
|--------------------------------------------------------------------------
*/

.cclem-logo-card {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0.85rem;
    padding: 0.9rem;

    box-shadow:
        0 10px 30px rgba(12, 25, 14, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/*
|--------------------------------------------------------------------------
| Sesión
|--------------------------------------------------------------------------
*/

.cclem-session {
    border-top: 1px solid rgba(229, 191, 129, 0.55);
}

.cclem-session-label {
    color: #e8c98e;
}

/*
|--------------------------------------------------------------------------
| Contenido
|--------------------------------------------------------------------------
*/

.cclem-main {
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(215, 164, 81, 0.06),
            transparent 25rem
        ),
        #fafaf8;
}

/*
|--------------------------------------------------------------------------
| Componentes reutilizables
|--------------------------------------------------------------------------
*/

.cclem-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e7e7e1;
    border-radius: 0.9rem;

    box-shadow:
        0 1px 2px rgba(20, 30, 20, 0.04),
        0 8px 25px rgba(30, 50, 30, 0.035);
}

.cclem-title {
    color: #29422d;
}

.cclem-btn-primary {
    background: linear-gradient(
        135deg,
        #385538,
        #29422d
    );

    color: #ffffff;
    border: 1px solid #29422d;

    box-shadow: 0 5px 14px rgba(41, 66, 45, 0.16);

    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.cclem-btn-primary:hover {
    background: #203824;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(41, 66, 45, 0.22);
}

.cclem-btn-secondary {
    background: #ffffff;
    color: #29422d;
    border: 1px solid #48633f;
}

.cclem-btn-secondary:hover {
    background: #f6f8f3;
}

.cclem-table-head {
    background: linear-gradient(
        90deg,
        #f7f1e5,
        #fbf8f1
    );

    color: #384f33;
}

.cclem-badge-success {
    background: #e6f2e7;
    color: #2f7040;
}

.cclem-badge-danger {
    background: #f7e5df;
    color: #a34d32;
}

.cclem-badge-warning {
    background: #f7ecd5;
    color: #8a6525;
}