/* =========================================================================
   SYNC MODULE — PREMIUM PASTEL STYLESHEET
   Intranet GPL Colombia · MasterSync
   -------------------------------------------------------------------------
   Paleta basada en azules pastel + nube. Diseñado para sentirse:
   - Etéreo (capas de cristal, blur sutil, sombras suaves)
   - Vivo (gradientes en motion, hover con elevación)
   - Premium (espaciado generoso, tipografía con tracking refinado)
   ========================================================================= */

/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
/*:root {*/
    /* --- Azules pastel (corazón del sistema) --- */
    /*--sky-50: #f0f7ff;
    --sky-100: #e0eeff;
    --sky-200: #c2dbff;
    --sky-300: #9bc1ff;
    --sky-400: #6ea0f5;
    --sky-500: #4b82e8;
    --sky-600: #3666cf;
    --sky-700: #2a51a8;
    --sky-800: #1f3d80;
    --sky-900: #14285a;*/
    /* --- Navy GPL (acento corporativo) --- */
    /*--navy-deep: #0a1f4d;
    --navy-soft: #1a3268;
    --navy-bright: #2a4a8f;*/
    /* --- Amarillo GPL (acento corporativo) --- */
    /*--yellow-pop: #ffd60a;
    --yellow-glow: #ffe55c;
    --yellow-pale: #fff7c2;*/
    /* --- Pasteles complementarios --- */
    /*--mint-50: #ecfdf5;
    --mint-200: #a7f3d0;
    --mint-500: #10b981;
    --mint-700: #047857;
    --rose-50: #fff1f2;
    --rose-200: #fecdd3;
    --rose-500: #f43f5e;
    --rose-700: #be123c;
    --peach-50: #fff7ed;
    --peach-200: #fed7aa;
    --peach-500: #f97316;
    --lavender-50: #f5f3ff;
    --lavender-200: #ddd6fe;
    --lavender-500: #8b5cf6;*/
    /* --- Neutros (tinte azul, no grises planos) --- */
    /*--ink-50: #f7f9fc;
    --ink-100: #eef2f8;
    --ink-200: #dde4ee;
    --ink-300: #c0cbdb;
    --ink-400: #94a3b8;
    --ink-500: #64748b;
    --ink-600: #475569;
    --ink-700: #334155;
    --ink-800: #1e293b;
    --ink-900: #0f172a;*/
    /* --- Sombras (con tinte azul) --- */
    /*--shadow-xs: 0 1px 2px rgba(20, 40, 90, 0.05);
    --shadow-sm: 0 2px 6px rgba(20, 40, 90, 0.06), 0 1px 2px rgba(20, 40, 90, 0.04);
    --shadow-md: 0 6px 16px rgba(20, 40, 90, 0.08), 0 2px 4px rgba(20, 40, 90, 0.05);
    --shadow-lg: 0 16px 40px rgba(20, 40, 90, 0.10), 0 4px 10px rgba(20, 40, 90, 0.05);
    --shadow-xl: 0 28px 60px rgba(20, 40, 90, 0.14), 0 10px 20px rgba(20, 40, 90, 0.06);
    --shadow-glow-sky: 0 0 0 4px rgba(155, 193, 255, 0.18);
    --shadow-glow-yellow: 0 0 0 4px rgba(255, 214, 10, 0.22);*/
    /* --- Glassmorphism --- */
    /*--glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.7);
    --glass-blur: 14px;*/
    /* --- Radios --- */
    /*--radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-pill: 999px;*/
    /* --- Gradientes --- */
    /*--gradient-sky: linear-gradient(135deg, #c2dbff 0%, #9bc1ff 50%, #6ea0f5 100%);
    --gradient-sky-soft: linear-gradient(135deg, #f0f7ff 0%, #e0eeff 50%, #c2dbff 100%);
    --gradient-navy: linear-gradient(135deg, #2a51a8 0%, #1f3d80 50%, #0a1f4d 100%);
    --gradient-aurora: linear-gradient(135deg, #c2dbff 0%, #ddd6fe 35%, #fed7aa 70%, #fff7c2 100%);
    --gradient-mesh: radial-gradient(at 0% 0%, #e0eeff 0%, transparent 50%), radial-gradient(at 100% 0%, #f5f3ff 0%, transparent 50%), radial-gradient(at 50% 100%, #fff7c2 0%, transparent 50%);*/
    /* --- Tipografía --- */
    /*--font-display: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;*/
    /* --- Transiciones --- */
    /*--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast: 120ms var(--ease-out);
    --t-base: 220ms var(--ease-out);
    --t-slow: 360ms var(--ease-out);
}*/

/* =========================================================================
   2. PAGE BACKGROUND
   Fondo aurora muy sutil para que TODA la app respire pastel
   ========================================================================= */
/*body,
.sync-page,
[class*="sync-"]:not([class*="card"]):not([class*="badge"]):not([class*="button"]) {*/
    /* No tocamos body global por riesgo de chocar con Identity pages.
       Pero si quieres, agrega class="sync-app" al layout y se aplica. */
/*}

.sync-app {
    background: radial-gradient(circle at 15% -10%, rgba(194, 219, 255, 0.55) 0%, transparent 45%), radial-gradient(circle at 110% 10%, rgba(221, 214, 254, 0.45) 0%, transparent 50%), radial-gradient(circle at 50% 110%, rgba(254, 215, 170, 0.30) 0%, transparent 50%), linear-gradient(180deg, #f7f9fc 0%, #eef4fc 100%);
    background-attachment: fixed;
    min-height: 100vh;
    font-family: var(--font-display);
    color: var(--ink-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}*/

/* Si no envuelves todo en .sync-app, marca las páginas individualmente: */
/*[data-sync-page] {
    background: radial-gradient(circle at 15% -10%, rgba(194, 219, 255, 0.45) 0%, transparent 50%), radial-gradient(circle at 110% 10%, rgba(221, 214, 254, 0.35) 0%, transparent 55%), linear-gradient(180deg, #f7f9fc 0%, #eef4fc 100%);
    background-attachment: fixed;
    min-height: 100vh;
    padding: 24px 32px 48px;
}*/

/* =========================================================================
   3. PAGE HEADER
   ========================================================================= */
/*.page-header,
[class*="PageHeader"] {
    position: relative;
    margin-bottom: 28px;
    padding: 24px 28px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

    .page-header::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--gradient-mesh);
        opacity: 0.5;
        pointer-events: none;
        z-index: 0;
    }

    .page-header > * {
        position: relative;
        z-index: 1;
    }

    .page-header h1,
    .page-header .title {
        font-size: 26px;
        font-weight: 700;
        color: var(--navy-deep);
        letter-spacing: -0.025em;
        margin: 0;
        line-height: 1.15;
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .page-header .subtitle,
    .page-header p {
        color: var(--ink-500);
        margin: 6px 0 0;
        font-size: 14px;
        letter-spacing: -0.005em;
    }

    .page-header .header-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: var(--gradient-sky);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(75, 130, 232, 0.35);
    }*/

/* =========================================================================
   4. CARD — Cristal mate elevado
   ========================================================================= */
/*.card,
[class*="Card"] > div {
    position: relative;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(221, 228, 238, 0.6);
    border-radius: var(--radius-2xl);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}

    .card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--sky-200);
    }

    .card-title,
    .card h2,
    .card h3 {
        font-size: 14px;
        font-weight: 600;
        color: var(--navy-deep);
        letter-spacing: -0.01em;
        text-transform: uppercase;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--ink-100);
        display: flex;
        align-items: center;
        gap: 10px;
    }*/

/* Card variant — featured/glow */
/*.card-featured {
    background: linear-gradient(135deg, rgba(240, 247, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    border-color: var(--sky-200);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}*/

/* =========================================================================
   5. STAT CARD — Elevación premium
   ========================================================================= */
/*.bg-white.border.border-black\/\[0\.05\].rounded-2xl,
[class*="StatCard"] {
    background: linear-gradient(160deg, #ffffff 0%, #f7faff 100%) !important;
    border: 1px solid rgba(221, 228, 238, 0.7) !important;
    border-radius: var(--radius-2xl) !important;
    padding: 20px !important;
    box-shadow: var(--shadow-sm);
    transition: all var(--t-base);
    position: relative;
    overflow: hidden;
}

    [class*="StatCard"]::before,
    .bg-white.border.border-black\/\[0\.05\].rounded-2xl::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--gradient-sky);
        opacity: 0;
        transition: opacity var(--t-base);
    }

    [class*="StatCard"]:hover,
    .bg-white.border.border-black\/\[0\.05\].rounded-2xl:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--sky-200) !important;
    }

        [class*="StatCard"]:hover::before,
        .bg-white.border.border-black\/\[0\.05\].rounded-2xl:hover::before {
            opacity: 1;
        }*/

/* IconWrapper en StatCard — más vibrante con halo */
/*.w-10.h-10.rounded-xl {
    box-shadow: 0 4px 12px rgba(75, 130, 232, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform var(--t-base);
}

[class*="StatCard"]:hover .w-10.h-10.rounded-xl {
    transform: scale(1.08) rotate(-3deg);
}*/

/* Wrappers de icono por color → más pastel */
/*.bg-blue-100 {
    background-color: var(--sky-100) !important;
}

.text-blue-600 {
    color: var(--sky-700) !important;
}

.bg-emerald-100 {
    background-color: var(--mint-50) !important;
}

.text-emerald-600 {
    color: var(--mint-700) !important;
}

.bg-amber-100 {
    background-color: #fff4d6 !important;
}

.text-amber-600 {
    color: #b8770f !important;
}

.bg-red-100 {
    background-color: var(--rose-50) !important;
}

.text-red-600 {
    color: var(--rose-700) !important;
}

.bg-violet-100 {
    background-color: var(--lavender-50) !important;
}

.text-violet-600 {
    color: #6d28d9 !important;
}

.bg-yellow-100 {
    background-color: var(--yellow-pale) !important;
}

.text-yellow-700 {
    color: #946b00 !important;
}*/

/* Label del StatCard — más sofisticado */
/*.text-\[10px\].text-slate-500.font-semibold.tracking-wider {
    color: var(--ink-400) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
}*/

/* Value del StatCard — number display */
/*.text-2xl.font-bold.text-gpl-navy.tracking-tight {
    color: var(--navy-deep) !important;
    font-size: 28px !important;
    font-weight: bold !important;
    letter-spacing: -0.03em !important;
    font-feature-settings: "tnum" 1, "lnum" 1;
}*/

/* =========================================================================
   6. BADGE — Pastel pills
   ========================================================================= */
/*.badge,
[class*="Badge"] > span,
[class*="badge"] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(20, 40, 90, 0.04);
}*/

/* Variants — pastel washes with deeper text */
/*.badge-primary, .badge-Primary {
    background: var(--sky-100);
    color: var(--sky-800);
    border-color: var(--sky-200);
}

.badge-success, .badge-Success {
    background: var(--mint-50);
    color: var(--mint-700);
    border-color: var(--mint-200);
}

.badge-danger, .badge-Danger {
    background: var(--rose-50);
    color: var(--rose-700);
    border-color: var(--rose-200);
}

.badge-warning, .badge-Warning {
    background: #fff4d6;
    color: #946b00;
    border-color: #ffe09e;
}

.badge-info, .badge-Info {
    background: var(--lavender-50);
    color: #6d28d9;
    border-color: var(--lavender-200);
}

.badge-secondary, .badge-Secondary {
    background: var(--ink-100);
    color: var(--ink-700);
    border-color: var(--ink-200);
}

.badge-dark, .badge-Dark {
    background: var(--ink-800);
    color: white;
}

.badge-light, .badge-Light {
    background: white;
    color: var(--ink-700);
    border-color: var(--ink-200);
}

.badge-yellow, .badge-Yellow {
    background: var(--yellow-pale);
    color: #946b00;
    border-color: var(--yellow-glow);
}*/

/* =========================================================================
   7. BUTTON — Premium con shimmer
   ========================================================================= */
/*.btn,
button[class*="Button"],
[class*="button"]:not(input) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--t-base);
    overflow: hidden;
    isolation: isolate;
}

    .btn:disabled,
    button:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        pointer-events: none;
    }*/

    /* Shimmer effect on hover */
    /*.btn::before,
    button[class*="Button"]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
        transform: translateX(-100%);
        transition: transform var(--t-slow);
        z-index: -1;
        pointer-events: none;
    }

    .btn:hover::before,
    button[class*="Button"]:hover::before {
        transform: translateX(100%);
    }*/

/* Button colors — solid */
/*.btn-primary, .btn-Primary {
    background: var(--gradient-navy);
    color: white;
    box-shadow: 0 4px 12px rgba(42, 81, 168, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

    .btn-primary:hover, .btn-Primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(42, 81, 168, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

.btn-yellow, .btn-Yellow {
    background: linear-gradient(135deg, var(--yellow-glow) 0%, var(--yellow-pop) 100%);
    color: var(--navy-deep);
    box-shadow: 0 4px 12px rgba(255, 214, 10, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    font-weight: 700;
}

    .btn-yellow:hover, .btn-Yellow:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(255, 214, 10, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

.btn-success, .btn-Success {
    background: linear-gradient(135deg, #34d399 0%, var(--mint-500) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

    .btn-success:hover, .btn-Success:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(16, 185, 129, 0.40);
    }

.btn-danger, .btn-Danger {
    background: linear-gradient(135deg, #fb7185 0%, var(--rose-500) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.30);
}

    .btn-danger:hover, .btn-Danger:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(244, 63, 94, 0.40);
    }

.btn-warning, .btn-Warning {
    background: linear-gradient(135deg, #fb923c 0%, var(--peach-500) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.30);
}

.btn-secondary, .btn-Secondary {
    background: white;
    color: var(--ink-700);
    border-color: var(--ink-200);
    box-shadow: var(--shadow-xs);
}

    .btn-secondary:hover, .btn-Secondary:hover {
        background: var(--ink-50);
        border-color: var(--ink-300);
        transform: translateY(-1px);
    }*/

/* Outline variants — más etéreos */
/*.btn-outline,
[class*="Variant=\"Outline\""] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border-width: 1px;
}*/

/* Size variants */
/*.btn-xs, .btn-Xs {
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 8px;
}

.btn-sm, .btn-Sm {
    padding: 7px 13px;
    font-size: 12px;
}

.btn-lg, .btn-Lg {
    padding: 12px 22px;
    font-size: 14px;
    border-radius: var(--radius-lg);
}*/

/* Focus visible — accesibilidad pastel */
/*.btn:focus-visible,
button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-glow-sky);
}*/

/* =========================================================================
   8. DATA TABLE — Glass + zebra sutil
   ========================================================================= */
/*.bg-white.border.border-slate-200.rounded-2xl.overflow-hidden {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(221, 228, 238, 0.6) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}*/

/* Toolbar */
/*.flex.items-center.justify-between.gap-3.p-4.border-b.border-slate-100 {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--ink-100) !important;
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.5) 0%, transparent 100%);
}*/

/* Search input wrapper */
/*.flex.items-center.gap-2.px-3.py-2.bg-slate-50.rounded-lg {
    background: var(--ink-50) !important;
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-md) !important;
    transition: all var(--t-base);
}

    .flex.items-center.gap-2.px-3.py-2.bg-slate-50.rounded-lg:focus-within {
        background: white !important;
        border-color: var(--sky-300);
        box-shadow: var(--shadow-glow-sky);
    }*/

/* Table headers */
/*.bg-slate-50.border-b.border-slate-200 {
    background: linear-gradient(180deg, #f7faff 0%, #eef4fc 100%) !important;
    border-bottom: 1px solid var(--ink-200) !important;
}

table th {
    color: var(--ink-500) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    padding: 14px 16px !important;
}*/

/* Table rows */
/*table tbody tr {
    transition: background var(--t-fast);
    border-bottom: 1px solid rgba(238, 242, 248, 0.6);
}

    table tbody tr:nth-child(even) {
        background: rgba(247, 250, 255, 0.4);
    }

    table tbody tr:hover {
        background: var(--sky-50) !important;
    }

table tbody td {
    padding: 12px 16px !important;
    color: var(--ink-700) !important;
    font-size: 13px !important;
}*/

/* Pagination */
/*.flex.items-center.justify-between.px-4.py-3.border-t.border-slate-100 {
    padding: 14px 20px !important;
    background: linear-gradient(0deg, rgba(247, 250, 255, 0.5) 0%, transparent 100%);
    border-top: 1px solid var(--ink-100) !important;
    color: var(--ink-500) !important;
}

.flex.items-center.justify-between.px-4.py-3 button {
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    transition: all var(--t-fast);
}

    .flex.items-center.justify-between.px-4.py-3 button:hover:not(:disabled) {
        background: var(--sky-100);
        color: var(--sky-700);
    }*/

/* =========================================================================
   9. DATAFIELD — Etiqueta + valor
   ========================================================================= */
/*[class*="DataField"] {
    padding: 12px 0;
    border-bottom: 1px solid var(--ink-100);
}

    [class*="DataField"]:last-child {
        border-bottom: none;
    }

    [class*="DataField"] .label,
    [class*="DataField"] dt {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-400);
        margin-bottom: 4px;
    }

    [class*="DataField"] .value,
    [class*="DataField"] dd {
        font-size: 14px;
        color: var(--ink-800);
        font-weight: 500;
    }*/

/* =========================================================================
   10. ALERT BOXES
   ========================================================================= */
/*[class*="Alert"] {
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    border: 1px solid;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    line-height: 1.55;
}

    [class*="Alert"][class*="Danger"] {
        background: linear-gradient(135deg, var(--rose-50) 0%, #fff5f6 100%);
        border-color: var(--rose-200);
        color: var(--rose-700);
    }

    [class*="Alert"][class*="Warning"] {
        background: linear-gradient(135deg, #fff8e1 0%, var(--yellow-pale) 100%);
        border-color: #ffe09e;
        color: #946b00;
    }

    [class*="Alert"][class*="Info"],
    [class*="Alert"][class*="Primary"] {
        background: linear-gradient(135deg, var(--sky-50) 0%, #f5f9ff 100%);
        border-color: var(--sky-200);
        color: var(--sky-800);
    }

    [class*="Alert"][class*="Success"] {
        background: linear-gradient(135deg, var(--mint-50) 0%, #f0fdf6 100%);
        border-color: var(--mint-200);
        color: var(--mint-700);
    }*/

/* =========================================================================
   11. TIMELINE (página de Alertas)
   ========================================================================= */
/*ol.relative.border-l-2.border-slate-200 {
    border-color: var(--sky-100) !important;
    border-left-width: 2px !important;
}

ol.relative.border-l-2 li {
    position: relative;
    padding-left: 24px;
    padding-bottom: 28px;
}*/

/* Timeline dots */
/*.absolute.-left-3.w-6.h-6.rounded-full {
    box-shadow: 0 0 0 4px white, 0 2px 8px rgba(20, 40, 90, 0.15);
    transition: transform var(--t-base);
}

    .absolute.-left-3.w-6.h-6.rounded-full:hover {
        transform: scale(1.15);
    }*/

/* Pastel-ize timeline dot backgrounds */
/*.bg-red-600 {
    background: linear-gradient(135deg, #fb7185, #f43f5e) !important;
}

.bg-orange-500 {
    background: linear-gradient(135deg, #fb923c, #f97316) !important;
}

.bg-yellow-500 {
    background: linear-gradient(135deg, var(--yellow-glow), var(--yellow-pop)) !important;
}

.bg-slate-400 {
    background: linear-gradient(135deg, #94a3b8, #64748b) !important;
}

.bg-green-500 {
    background: linear-gradient(135deg, #34d399, var(--mint-500)) !important;
}*/

/* =========================================================================
   12. LOADING SKELETON
   ========================================================================= */
/*[class*="LoadingSkeleton"],
[class*="LoadingState"] {
    background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-50) 50%, var(--ink-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite ease-in-out;
    border-radius: var(--radius-md);
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}*/

/* =========================================================================
   13. CODE / PRE BLOCKS (LogDetail)
   ========================================================================= */
/*pre {
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    padding: 18px !important;
    border-radius: var(--radius-lg) !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    color: #cbd5e1 !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(20, 40, 90, 0.1);
    border: 1px solid rgba(15, 23, 42, 0.8);
    overflow-x: auto;
    max-height: 400px;
}*/

    /* Variant clara para MetaJson */
    /*pre.bg-slate-50,
    pre[class*="bg-slate-50"] {
        background: linear-gradient(135deg, #f7faff 0%, #eef4fc 100%) !important;
        color: var(--ink-700) !important;
        border: 1px solid var(--ink-200) !important;
        box-shadow: inset 0 1px 2px rgba(20, 40, 90, 0.04);
    }

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--sky-50);
    color: var(--sky-800);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--sky-100);
}*/

/* =========================================================================
   14. UTILIDADES VISUALES PROPIAS
   ========================================================================= */

/* Gpl-navy text override (más cálido) */
/*.text-gpl-navy {
    color: var(--navy-deep) !important;
}*/

/* Gpl-yellow */
/*.text-gpl-yellow {
    color: var(--yellow-pop) !important;
}

.bg-gpl-yellow {
    background: var(--yellow-pop) !important;
}*/

/* Headings refinados dentro de cards */
/*h1, h2, h3, h4 {
    letter-spacing: -0.025em;
    color: var(--navy-deep);
}*/

/* Texto secundario más suave */
/*.text-slate-500 {
    color: var(--ink-500) !important;
}

.text-slate-400 {
    color: var(--ink-400) !important;
}

.text-slate-600 {
    color: var(--ink-600) !important;
}

.text-slate-700 {
    color: var(--ink-700) !important;
}*/

/* =========================================================================
   15. GRIDS — espaciado generoso
   ========================================================================= */
/*.grid {
    gap: 16px;
}

    .grid.gap-3 {
        gap: 14px;
    }

    .grid.gap-4 {
        gap: 18px;
    }

    .grid.gap-6 {
        gap: 24px;
    }*/

/* =========================================================================
   16. METRIC (componente custom de Health)
   ========================================================================= */
/*[class*="Metric"] {
    background: linear-gradient(160deg, #ffffff 0%, #f7faff 100%);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    transition: all var(--t-base);
}

    [class*="Metric"]:hover {
        border-color: var(--sky-200);
        box-shadow: var(--shadow-sm);
    }

    [class*="Metric"] .label {
        font-size: 10px;
        font-weight: 600;
        color: var(--ink-400);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    [class*="Metric"] .value {
        font-size: 18px;
        font-weight: 700;
        color: var(--navy-deep);
        margin-top: 2px;
        font-feature-settings: "tnum" 1;
    }*/

/* =========================================================================
   17. FORM INPUTS (search, etc.)
   ========================================================================= */
/*input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"] {
    font-family: var(--font-display);
    font-size: 13.5px;
    color: var(--ink-800);
}

    input[type="text"]::placeholder,
    input[type="search"]::placeholder {
        color: var(--ink-400);
    }*/

/* Checkbox custom */
/*input[type="checkbox"].form-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--ink-300);
    accent-color: var(--sky-500);
    cursor: pointer;
    transition: all var(--t-fast);
}

    input[type="checkbox"].form-checkbox:checked {
        background: var(--sky-500);
        border-color: var(--sky-500);
    }

    input[type="checkbox"].form-checkbox:focus-visible {
        outline: none;
        box-shadow: var(--shadow-glow-sky);
    }*/

/* =========================================================================
   18. SUBTLE ANIMATIONS ON LOAD
   ========================================================================= */
/*.card,
.page-header,
[class*="StatCard"] {
    animation: fadeUp 0.5s var(--ease-out) backwards;
}

    [class*="StatCard"]:nth-child(1) {
        animation-delay: 0.05s;
    }

    [class*="StatCard"]:nth-child(2) {
        animation-delay: 0.10s;
    }

    [class*="StatCard"]:nth-child(3) {
        animation-delay: 0.15s;
    }

    [class*="StatCard"]:nth-child(4) {
        animation-delay: 0.20s;
    }

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* =========================================================================
   19. SCROLLBARS — finos y pastel
   ========================================================================= */
/** {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-200) transparent;
}

    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

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

    *::-webkit-scrollbar-thumb {
        background: var(--ink-200);
        border-radius: var(--radius-pill);
        border: 2px solid transparent;
        background-clip: padding-box;
    }

        *::-webkit-scrollbar-thumb:hover {
            background: var(--sky-300);
            background-clip: padding-box;
        }*/

/* =========================================================================
   20. SELECTION COLORS
   ========================================================================= */
/*::selection {
    background: var(--sky-200);
    color: var(--navy-deep);
}*/

/* =========================================================================
   21. LINKS dentro del módulo
   ========================================================================= */
/*a {
    color: var(--sky-600);
    text-decoration: none;
    transition: color var(--t-fast);
}

    a:hover {
        color: var(--sky-800);
        text-decoration: underline;
        text-decoration-color: var(--sky-300);
        text-underline-offset: 3px;
    }*/

/* =========================================================================
   22. EMPTY STATES
   ========================================================================= */
/*[class*="EmptyState"],
.text-center.py-12.text-slate-500 {
    padding: 48px 24px !important;
    color: var(--ink-400) !important;
}

    [class*="EmptyState"] svg,
    .text-center.py-12 svg,
    .text-center.py-12 .material-symbols-outlined {
        color: var(--sky-300) !important;
        opacity: 0.7;
    }*/

/* =========================================================================
   23. RESPONSIVE TWEAKS
   ========================================================================= */
/*@media (max-width: 768px) {
    [data-sync-page] {
        padding: 16px 16px 32px;
    }

    .page-header {
        padding: 18px 20px;
    }

        .page-header h1 {
            font-size: 22px;
        }

    .card {
        padding: 18px;
    }
}*/

/* =========================================================================
       24. CONTAINER — ancho máximo centrado, padding responsivo
       ========================================================================= */
/*.sync-container {
    width: 100%;
    margin: 0 auto;
    padding: 24px 32px 48px;
}

@media (max-width: 1024px) {
    .sync-container {
        padding: 20px 24px 40px;
    }
}

@media (max-width: 640px) {
    .sync-container {
        padding: 16px 16px 32px;
    }
}*/

/* Ajuste: cuando .sync-container está dentro, NO duplicar padding del data-sync-page */
/*[data-sync-page] > .sync-container,
[data-sync-page] .sync-container {*/
    /* el container ya tiene padding propio; quitamos el del data-sync-page */
/*}

[data-sync-page]:has(.sync-container) {
    padding: 0;
}*/

/* =========================================================================
   FIN — Sync Module Premium Pastel
   ========================================================================= */