/* ==========================================================
   Gallante Enterprise - Theme: THE WORKSPACE (v3) - COMPACT
   Aesthetic: Minimalist Bento / Layered Shadows / 2026
============================================================ */

:root {
    --primary: #FF4D00;
    --primary-aura: linear-gradient(135deg, #FF4D00 0%, #FF8000 100%);

    /* Neutros Soft */
    --slate-50: #fdfdfe;
    --slate-100: #f4f6f8;
    --slate-200: #e9ecef;
    --slate-800: #2d3436;
    --slate-900: #1a1b1c;

    /* Semantic Aura */
    --success-bg: #ecfdf5;
    --success-text: #059669;
    --warning-bg: #fffbeb;
    --warning-text: #d97706;
    --error-bg: #fef2f2;
    --error-text: #dc2626;

    --bg-main: #f4f6f8;
    --radius-bento: 20px;

    /* Shadow Layers 2026 */
    --shadow-layer-1: 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-layer-2: 0 8px 24px -4px rgba(0, 0, 0, 0.04);
    --shadow-soft: 0 16px 32px -8px rgba(0, 0, 0, 0.05);
}

body {
    background: var(--bg-main);
    color: var(--slate-800);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    /* Por defecto permitimos selección de texto */
    -webkit-user-select: auto;
    user-select: auto;
}

/* ===============================
   BENTO SYSTEM COMPACT
================================= */

.bento-card {
    background: white;
    border-radius: var(--radius-bento);
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: var(--shadow-layer-2);
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}

/* ===============================
   DYNAMICS & UI
================================= */

.btn-bento {
    background: var(--primary-aura);
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-bento:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -4px rgba(255, 77, 0, 0.3);
}

.input-bento {
    background: var(--slate-100);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 12px 16px;
    width: 100%;
}

/* Navbar Compact */
.glass-nav {
    height: 64px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--slate-200);
}

/* Table Compact */
.table-bento {
    width: 100%;
    border-spacing: 0 8px;
    border-collapse: separate;
}

.table-bento td {
    padding: 16px 20px;
    font-size: 0.85rem;
}

/* Badges Aura Compact */
.badge-aura {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Animations */
@keyframes bentoIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: bentoIn 0.5s ease-out forwards;
}

.animate-fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Utility */
.card-enterprise {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-layer-2);
}

.badge {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
}

/* ==========================================================
   GALLARTE HORIZON UI (v4) - Strategic Extension
============================================================ */

/* Operational Pulse (Real-time Status) */
.pulse-ring {
    position: relative;
    width: 8px;
    height: 8px;
    background: #00c853;
    border-radius: 50%;
}

.pulse-ring::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #00c853;
    animation: pulse-bloom 2s infinite;
}

@keyframes pulse-bloom {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* Strategic Data Grid */
.grid-flow {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

/* Horizon Trend Widget */
.widget-horizon {
    background: white;
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.02);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

.trend-bar {
    height: 120px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 10px 0;
}

.trend-bar-item {
    flex: 1;
    background: var(--slate-100);
    border-radius: 4px;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.trend-bar-item:hover {
    background: var(--primary);
    transform: scaleX(1.1);
}

/* Priority Indicator */
.priority-tag {
    font-size: 9px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    background: var(--slate-900);
    color: white;
}

/* Circular Progress Mockup */
.circle-progress {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid var(--slate-100);
    border-top-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Special Logic Classes */
.animate-shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-3px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(3px, 0, 0);
    }
}