/* 1. FUENTE */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

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

/* Scrollbar GLOBAL */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid #fff; }

/* Loader */
.loader {
    width: 40px; height: 40px;
    border: 4px solid #f1f5f9;
    border-bottom-color: #4f46e5;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.skeleton-static {
    background: #e5e9ef;
}


@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Cursor utilities */
.cursor-grab { cursor: grab !important; }
.cursor-grabbing { cursor: grabbing !important; }
.cursor-crosshair { cursor: crosshair !important; }

/* Blur overlay */
.blur-app { filter: blur(4px); pointer-events: none; transition: filter 0.3s ease; }

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* App container */
#app-container { transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s; }

/* FIX UI Y ZOOM */
html, body { width: 100% !important; height: 100% !important; overflow: auto !important; margin: 0 !important; }
#app-container { min-width: 1280px !important; min-height: 700px !important; max-width: none !important; width: 100% !important; height: 100% !important; margin: 0 !important; box-sizing: border-box !important; }

/* MODO RENDIMIENTO (LOW SPEC) */
body.low-spec * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
body.low-spec #app-header, body.low-spec #left-sidebar, body.low-spec #right-sidebar, body.low-spec #rs-header, body.low-spec #editor-modal>div, body.low-spec #settings-drawer { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; }
body.low-spec * { transition-duration: 0s !important; animation-duration: 0s !important; }