@import "tailwindcss";

@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

/*
 | Si necesitas forzar rutas que no detecte automáticamente,
 | puedes agregar @source.
 | Normalmente ./resources/** no hace falta en v4.
 */
@source "../vendor/laravel/framework/src/Illuminate/Pagination/resources/views";
@source "../storage/framework/views";

@theme {
    --color-primary: rgb(var(--panel-primary-dark-rgb) / 1);
    --color-primary-dark: rgb(var(--panel-primary-dark-rgb) / 1);
    --color-primary-soft: rgb(var(--panel-primary-soft-rgb) / 1);

    --color-background-light: rgb(var(--panel-background-rgb) / 1);
    --color-background-dark: rgb(var(--panel-background-dark-rgb) / 1);

    --color-surface-light: rgb(var(--panel-surface-rgb) / 1);
    --color-surface-dark: rgb(var(--panel-surface-dark-rgb) / 1);
    --color-surface-muted: rgb(var(--panel-surface-muted-rgb) / 1);

    --color-text-main: rgb(var(--panel-text-rgb) / 1);
    --color-text-secondary: rgb(var(--panel-text-muted-rgb) / 1);

    --color-border-subtle: rgb(var(--panel-border-rgb) / 1);

    --color-danger: rgb(var(--panel-danger-rgb) / 1);
    --color-danger-soft: rgb(var(--panel-danger-soft-rgb) / 1);
    --color-success: rgb(var(--panel-success-rgb) / 1);
    --color-warning: rgb(var(--panel-warning-rgb) / 1);

    --font-display: "Inter", sans-serif;

    --radius: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1);
}

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


.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

body {
    font-family: 'Inter', sans-serif;
}

.panel-shell {
    @apply bg-background-light text-text-main font-display antialiased;
}

.panel-sidebar {
    @apply bg-surface-light border-r border-border-subtle;
}

.panel-topbar {
    @apply bg-surface-light border-b border-border-subtle;
}

.panel-user-card {
    @apply rounded-xl border border-border-subtle bg-surface-light p-3 shadow-sm;
}

.panel-brand-mark {
    background: linear-gradient(135deg,
            rgb(var(--panel-primary-rgb)) 0%,
            rgb(var(--panel-primary-dark-rgb)) 100%);
}

.panel-danger-btn {
    @apply inline-flex w-full items-center justify-center gap-2 rounded-lg border border-danger/20 bg-danger-soft px-3 py-2 text-xs font-semibold text-danger transition-colors hover:bg-danger/10;
}

.menu-section-title {
    @apply mb-2 px-3 text-[10px] font-bold uppercase tracking-widest text-text-secondary;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sidebar-link {
    @apply flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm font-medium text-text-secondary transition-colors hover:bg-surface-muted hover:text-text-main;
}

.sidebar-link.active {
    @apply bg-primary/10 text-primary shadow-sm ring-1 ring-primary/10;
}

.dashboard-card {
    @apply rounded-xl border border-border-subtle bg-surface-light shadow-soft;
}

.glass-header {
    @apply bg-surface-light/80 backdrop-blur-md;
}

.card-base {
    @apply rounded-2xl border border-border-subtle bg-surface-light shadow-sm transition-all;
}

.kpi-label {
    @apply flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wider text-text-secondary;
}

.kpi-value {
    @apply mt-1 text-2xl font-bold text-text-main;
}

.tab-btn {
    @apply px-6 py-2 text-sm font-semibold rounded-lg transition-all duration-200;
}

.tab-btn-active {
    @apply bg-surface-light text-primary shadow-sm ring-1 ring-border-subtle;
}

.tab-btn-inactive {
    @apply text-text-secondary hover:text-text-main;
}

.tooltip-container {
    position: relative;
}

.tooltip-text {
    visibility: hidden;
    @apply absolute z-30 bg-slate-800 text-white text-[10px] py-1 px-2 rounded -top-8 left-0 whitespace-nowrap opacity-0 transition-opacity;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.form-input-custom {
    @apply block w-full rounded border border-border-subtle bg-surface-light px-3 py-1.5 text-xs text-text-main outline-none transition-all focus:border-primary focus:ring-2 focus:ring-primary/20;
}

.form-label-custom {
    @apply mb-1 block text-[10px] font-bold uppercase tracking-tight text-text-secondary;
}

.section-header {
    @apply flex items-center gap-2 mb-3 pb-1 border-b border-gray-100 dark:border-gray-800;
}

.section-title {
    @apply text-[11px] font-bold text-primary uppercase tracking-widest;
}

.grid-container {
    @apply grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-4;
}

.form-section {
    @apply mb-6 rounded-xl border border-border-subtle bg-surface-light p-6 shadow-sm;
}

.input-group {
    @apply flex flex-col gap-1.5;
}

.label {
    @apply text-xs font-semibold uppercase tracking-wider text-text-secondary;
}

.input-field {
    @apply w-full rounded-lg border border-border-subtle bg-surface-light px-3 py-2.5 text-sm text-text-main placeholder:text-text-secondary/70 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary;
}

.required::after {
    content: "*";
    @apply text-red-500 ml-1;
}

.autocomplete-dropdown {
    @apply absolute z-50 mt-1 w-full overflow-hidden rounded-xl border border-border-subtle bg-surface-light shadow-2xl ring-1 ring-black/5;
}

.autocomplete-item {
    @apply flex cursor-pointer items-center gap-3 px-4 py-3 text-sm transition-colors hover:bg-surface-muted;
}

#sidebar-toggle:checked~aside {
    @apply translate-x-0;
}

#sidebar-toggle:checked~.overlay {
    @apply block;
}

.icon-filled {
    font-variation-settings: 'FILL' 1;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--panel-scrollbar-rgb));
    border-radius: 10px;
}

.dark ::-webkit-scrollbar-thumb {
    background: rgb(var(--panel-scrollbar-rgb));
}

details summary::-webkit-details-marker {
    display: none;
}

.tab-active {
    @apply bg-primary text-white shadow-lg shadow-primary/20;
}

.tab-inactive {
    @apply bg-surface-light text-text-secondary hover:bg-surface-muted;
}



@media (max-width: 1024px) {
    .mobile-sidebar-open {
        transform: translateX(0) !important;
    }

    .content-pushed {
        transform: translateX(256px);
        filter: brightness(0.7);
        pointer-events: none;
        user-select: none;
    }
}