/* --- REGISTRO DEL ÁNGULO DE LA ANIMACIÓN --- */
@property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* --- ANIMACIÓN CONTINUA DE ROTACIÓN --- */
@keyframes rotate-border {
    to {
        --border-angle: 360deg;
    }
}

/* --- TIPOGRAFÍA GLOBAL --- */
body,
body * {
    font-family: "Courier New", Courier, monospace !important;
}

/* --- ESTILO BASE DE LAS TARJETAS --- */
div[class*="card"] {
    position: relative !important;
    border: none !important;
    border-radius: 18px !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background-color: #0f172a !important;
}

/* --- PSEUDO-ELEMENTO DEL BORDE ANIMADO --- */
div[class*="card"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    padding: 2px !important;

    background: conic-gradient(
        from var(--border-angle),
        #ef4444,
        #f59e0b,
        #10b981,
        #06b6d4,
        #6366f1,
        #ec4899,
        #ef4444
    ) !important;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    z-index: 2 !important;
    animation: rotate-border 4s linear infinite !important;
    pointer-events: none !important;
}

/* --- EFECTO HOVER: AUMENTO DE VELOCIDAD Y RESPLANDOR --- */
div[class*="card"]:hover::before {
    animation-duration: 2s !important;
    filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.6)) !important;
}