/* Marco VCC: línea RGB fina que recorre el borde sin girar el marco */
@property --vcc-rgb-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

:root {
    --vcc-logo-rgb-border: 2px;
    --vcc-logo-rgb-pad-x: 10px;
    --vcc-logo-rgb-pad-y: 6px;
    --vcc-logo-sidebar-max-width: 260px;
    --vcc-sidebar-rgb-width: 4px;
    --vcc-sidebar-rgb-height: 100%;
    --vcc-logo-frame-accent: #22d3ee;
    --vcc-logo-frame-glow: 0 0 14px color-mix(in srgb, #22d3ee 45%, transparent);
}

.vcc-logo-rgb-frame {
    --vcc-logo-rgb-inner-bg: #020617;
    --vcc-logo-rgb-radius: 10px;
    --vcc-rgb-angle: 0deg;
    position: relative;
    display: inline-block;
    border-radius: var(--vcc-logo-rgb-radius);
    line-height: 0;
    vertical-align: middle;
    isolation: isolate;
}

.vcc-logo-rgb-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--vcc-logo-rgb-border);
    background: conic-gradient(
        from var(--vcc-rgb-angle),
        transparent 0deg 308deg,
        #ff0040 312deg,
        #ffcc00 322deg,
        #00ff88 332deg,
        #00b4ff 342deg,
        #b44fff 352deg,
        transparent 358deg 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: vcc-logo-rgb-chase 2.8s linear infinite;
    pointer-events: none;
    z-index: 2;
    will-change: --vcc-rgb-angle;
}

html:not(.vcc-rgb-frame-on) .vcc-logo-rgb-frame::before {
    display: none !important;
}

/* Ocultar anillo RGB original solo cuando hay otro estilo explícito en el elemento */
.vcc-logo-rgb-frame[class*="vcc-logo-style-"]:not(.vcc-logo-style-vcc-rgb-chase)::before {
    display: none !important;
}

html.vcc-rgb-frame-off .vcc-logo-rgb-frame.vcc-logo-style-vcc-rgb-chase::before,
html.vcc-rgb-frame-off .vcc-logo-rgb-frame[class*="vcc-logo-style-"]:not(.vcc-logo-style-none) {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    animation: none !important;
}

html.vcc-rgb-frame-off .vcc-logo-rgb-frame.vcc-logo-style-none .vcc-logo-rgb-frame__inner {
    outline: none !important;
}

.vcc-logo-rgb-frame.is-no-glow {
    --vcc-logo-frame-glow: none;
}

.vcc-logo-frame-picker-sample {
    display: block;
    margin: 0 auto;
}

.vcc-logo-frame-picker-fill {
    display: block;
    width: 100%;
    height: 32px;
    border-radius: 4px;
    background: linear-gradient(135deg, #334155, #1e293b);
}

.vcc-logo-rgb-frame.vcc-logo-style-none {
    background: transparent;
    box-shadow: none;
}

.vcc-logo-rgb-frame.vcc-logo-style-none .vcc-logo-rgb-frame__inner {
    outline: 2px solid rgba(56, 189, 248, 0.35);
    outline-offset: 0;
}

.vcc-logo-rgb-frame.vcc-logo-style-vcc-cyan {
    background: linear-gradient(135deg, var(--vcc-logo-frame-accent), #38bdf8);
    box-shadow: var(--vcc-logo-frame-glow);
    padding: var(--vcc-logo-rgb-border);
}

.vcc-logo-rgb-frame.vcc-logo-style-audit-blue,
.vcc-logo-rgb-frame.vcc-logo-style-gradient-ocean {
    background: linear-gradient(145deg, color-mix(in srgb, var(--vcc-logo-frame-accent) 70%, #fff), var(--vcc-logo-frame-accent), #1e3a8a);
    box-shadow: var(--vcc-logo-frame-glow);
    padding: var(--vcc-logo-rgb-border);
}

.vcc-logo-rgb-frame.vcc-logo-style-validation-purple {
    background: linear-gradient(145deg, #ddd6fe, var(--vcc-logo-frame-accent), #5b21b6);
    box-shadow: var(--vcc-logo-frame-glow);
    padding: var(--vcc-logo-rgb-border);
}

.vcc-logo-rgb-frame.vcc-logo-style-pharma-green {
    background: linear-gradient(160deg, #86efac, var(--vcc-logo-frame-accent), #166534);
    box-shadow: var(--vcc-logo-frame-glow);
    padding: var(--vcc-logo-rgb-border);
}

.vcc-logo-rgb-frame.vcc-logo-style-gold {
    background: linear-gradient(135deg, #fde68a, var(--vcc-logo-frame-accent), #b45309, #fde68a);
    box-shadow: var(--vcc-logo-frame-glow);
    padding: var(--vcc-logo-rgb-border);
}

.vcc-logo-rgb-frame.vcc-logo-style-silver {
    background: linear-gradient(145deg, #fff, var(--vcc-logo-frame-accent), #64748b);
    box-shadow: var(--vcc-logo-frame-glow);
    padding: var(--vcc-logo-rgb-border);
}

.vcc-logo-rgb-frame.vcc-logo-style-neon {
    background: var(--vcc-logo-frame-accent);
    box-shadow:
        0 0 8px var(--vcc-logo-frame-accent),
        0 0 20px color-mix(in srgb, var(--vcc-logo-frame-accent) 55%, transparent),
        var(--vcc-logo-frame-glow);
    padding: var(--vcc-logo-rgb-border);
}

.vcc-logo-rgb-frame.vcc-logo-style-double-ring {
    background: transparent;
    box-shadow:
        0 0 0 var(--vcc-logo-rgb-border) var(--vcc-logo-frame-accent),
        0 0 0 calc(var(--vcc-logo-rgb-border) * 2 + 2px) rgba(255, 255, 255, 0.15),
        var(--vcc-logo-frame-glow);
    padding: calc(var(--vcc-logo-rgb-border) + 3px);
}

.vcc-logo-rgb-frame.vcc-logo-style-gradient-sunset {
    background: linear-gradient(135deg, var(--vcc-logo-frame-accent), #ec4899, #8b5cf6);
    box-shadow: var(--vcc-logo-frame-glow);
    padding: var(--vcc-logo-rgb-border);
}

.vcc-logo-rgb-frame.vcc-logo-style-gradient-aurora {
    background: conic-gradient(from 45deg, #22d3ee, #a78bfa, #f472b6, #fbbf24, #22d3ee);
    box-shadow: var(--vcc-logo-frame-glow);
    padding: var(--vcc-logo-rgb-border);
    animation: vcc-logo-frame-aurora-spin 6s linear infinite;
}

.vcc-logo-rgb-frame.vcc-logo-style-rainbow-static {
    background: conic-gradient(from 0deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6, #ef4444);
    box-shadow: var(--vcc-logo-frame-glow);
    padding: var(--vcc-logo-rgb-border);
}

.vcc-logo-rgb-frame.vcc-logo-style-dashed {
    background: transparent;
    box-shadow: var(--vcc-logo-frame-glow);
    padding: calc(var(--vcc-logo-rgb-border) + 2px);
}

.vcc-logo-rgb-frame.vcc-logo-style-dashed .vcc-logo-rgb-frame__inner {
    outline: var(--vcc-logo-rgb-border) dashed var(--vcc-logo-frame-accent);
    outline-offset: 0;
}

.vcc-logo-rgb-frame.vcc-logo-style-dotted {
    background: transparent;
    box-shadow: var(--vcc-logo-frame-glow);
    padding: calc(var(--vcc-logo-rgb-border) + 2px);
}

.vcc-logo-rgb-frame.vcc-logo-style-dotted .vcc-logo-rgb-frame__inner {
    outline: var(--vcc-logo-rgb-border) dotted var(--vcc-logo-frame-accent);
    outline-offset: 0;
}

.vcc-logo-rgb-frame.vcc-logo-style-pulse {
    background: var(--vcc-logo-frame-accent);
    box-shadow: var(--vcc-logo-frame-glow);
    padding: var(--vcc-logo-rgb-border);
    animation: vcc-logo-frame-pulse 2s ease-in-out infinite;
}

.vcc-logo-rgb-frame.vcc-logo-style-holographic {
    background: conic-gradient(
        from var(--vcc-logo-frame-rgb-angle, 0deg),
        #ff6b9d,
        #c084fc,
        #67e8f9,
        #fde047,
        #fb923c,
        #ff6b9d
    );
    box-shadow: var(--vcc-logo-frame-glow);
    padding: var(--vcc-logo-rgb-border);
    animation: vcc-logo-frame-aurora-spin 3s linear infinite;
}

@property --vcc-logo-frame-rgb-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes vcc-logo-frame-aurora-spin {
    to {
        --vcc-logo-frame-rgb-angle: 360deg;
    }
}

@keyframes vcc-logo-frame-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--vcc-logo-frame-accent) 55%, transparent), var(--vcc-logo-frame-glow);
    }

    50% {
        box-shadow: 0 0 0 8px transparent, var(--vcc-logo-frame-glow);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vcc-logo-rgb-frame.vcc-logo-style-gradient-aurora,
    .vcc-logo-rgb-frame.vcc-logo-style-holographic,
    .vcc-logo-rgb-frame.vcc-logo-style-pulse {
        animation: none;
    }
}

.vcc-logo-rgb-frame__inner {
    position: relative;
    z-index: 1;
    margin: var(--vcc-logo-rgb-border);
    background: var(--vcc-logo-rgb-inner-bg);
    border-radius: calc(var(--vcc-logo-rgb-radius) - var(--vcc-logo-rgb-border));
    padding: var(--vcc-logo-rgb-pad-y) var(--vcc-logo-rgb-pad-x);
    overflow: hidden;
}

.vcc-logo-rgb-frame__inner img {
    display: block;
    max-width: 100%;
    height: auto;
}

.vcc-logo-rgb-frame--sidebar .vcc-logo-rgb-frame__inner img,
.vcc-logo-rgb-frame--preview .vcc-logo-rgb-frame__inner img {
    max-width: var(--vcc-logo-sidebar-max-width, 160px);
}

.vcc-logo-rgb-frame--login .vcc-logo-rgb-frame__inner img {
    max-width: 150px;
}

.vcc-logo-rgb-frame--panel .vcc-logo-rgb-frame__inner img {
    max-width: 150px;
}

.vcc-logo-rgb-frame--admin {
    --vcc-logo-rgb-inner-bg: #ffffff;
    --vcc-logo-rgb-radius: 8px;
}

.vcc-logo-rgb-frame--admin .vcc-logo-rgb-frame__inner img {
    height: 58px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.vcc-logo-rgb-frame--preview {
    --vcc-logo-rgb-inner-bg: rgba(15, 23, 42, 0.96);
}

.vcc-logo-rgb-frame--preview .vcc-logo-rgb-frame__inner img {
    max-height: 120px;
    object-fit: contain;
}

.vcc-logo-rgb-frame--sm {
    --vcc-logo-rgb-radius: 8px;
}

.vcc-logo-rgb-frame--sm .vcc-logo-rgb-frame__inner img {
    width: 84px;
    height: 64px;
    object-fit: contain;
}

.vcc-logo-rgb-frame--circle {
    --vcc-logo-rgb-radius: 999px;
}

.vcc-logo-rgb-frame--circle .vcc-logo-rgb-frame__inner {
    border-radius: 999px;
    padding: 2px;
}

.vcc-logo-rgb-frame--circle .vcc-logo-rgb-frame__inner img {
    border-radius: 999px;
    object-fit: cover;
}

@keyframes vcc-logo-rgb-chase {
    to {
        --vcc-rgb-angle: 360deg;
    }
}

/* Fallback si el navegador no anima @property: borde fijo, sin giros */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .vcc-logo-rgb-frame::before {
        animation: none;
        background: linear-gradient(90deg, #ff0040, #ffcc00, #00ff88, #00b4ff, #b44fff);
    }
}

@media (max-width: 768px) {
    .vcc-logo-rgb-frame--sidebar .vcc-logo-rgb-frame__inner img,
    .vcc-logo-rgb-frame--login .vcc-logo-rgb-frame__inner img,
    .vcc-logo-rgb-frame--panel .vcc-logo-rgb-frame__inner img {
        max-width: 120px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vcc-logo-rgb-frame::before {
        animation: none;
        --vcc-rgb-angle: 0deg;
        background: linear-gradient(
            90deg,
            #ff0040,
            #ffcc00,
            #00ff88,
            #00b4ff,
            #b44fff
        );
    }

    .vcc-sidebar-rgb-strip {
        animation: none;
    }
}

/* Barra RGB vertical del sidebar (borde derecho del menú) */
.vcc-sidebar-rgb-strip {
    display: none;
    position: absolute;
    top: 50%;
    right: -1px;
    transform: translateY(-50%);
    width: var(--vcc-sidebar-rgb-width, 4px);
    height: var(--vcc-sidebar-rgb-height, 100%);
    max-height: 100%;
    border-radius: 4px 0 0 4px;
    background: linear-gradient(
        180deg,
        #ff0040 0%,
        #ffcc00 18%,
        #00ff88 36%,
        #00b4ff 54%,
        #b44fff 72%,
        #ff0040 100%
    );
    background-size: 100% 220%;
    animation: vcc-sidebar-rgb-flow 4s linear infinite;
    pointer-events: none;
    z-index: 1061;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}

html.vcc-rgb-strip-on .vcc-sidebar-rgb-strip {
    display: block;
}

html:not(.vcc-rgb-strip-on) .vcc-sidebar-rgb-strip {
    display: none !important;
}

@keyframes vcc-sidebar-rgb-flow {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 220%;
    }
}