/*
 * Roxty Framework — Utilities CSS
 * Clases de uso rápido para spacing, colores, bordes, sombras
 *
 * Objetivo: < 3kb minificado
 */

/* ── SPACING ───────────────────────────────────────────────────────────── */

/* Margin */
.rxty-m-0  { margin: 0; }
.rxty-mt-0 { margin-top: 0; }
.rxty-mb-0 { margin-bottom: 0; }
.rxty-mt-1 { margin-top: 0.5rem; }
.rxty-mb-1 { margin-bottom: 0.5rem; }
.rxty-mt-2 { margin-top: 1rem; }
.rxty-mb-2 { margin-bottom: 1rem; }
.rxty-mt-3 { margin-top: 1.5rem; }
.rxty-mb-3 { margin-bottom: 1.5rem; }
.rxty-mt-4 { margin-top: 2rem; }
.rxty-mb-4 { margin-bottom: 2rem; }
.rxty-mt-6 { margin-top: 3rem; }
.rxty-mb-6 { margin-bottom: 3rem; }
.rxty-mx-auto { margin-inline: auto; }

/* Padding */
.rxty-p-0  { padding: 0; }
.rxty-p-1  { padding: 0.5rem; }
.rxty-p-2  { padding: 1rem; }
.rxty-p-3  { padding: 1.5rem; }
.rxty-p-4  { padding: 2rem; }
.rxty-py-1 { padding-block: 0.5rem; }
.rxty-py-2 { padding-block: 1rem; }
.rxty-py-3 { padding-block: 1.5rem; }
.rxty-py-4 { padding-block: 2rem; }
.rxty-px-1 { padding-inline: 0.5rem; }
.rxty-px-2 { padding-inline: 1rem; }
.rxty-px-3 { padding-inline: 1.5rem; }
.rxty-px-4 { padding-inline: 2rem; }

/* ── COLORES DE FONDO ──────────────────────────────────────────────────── */

.rxty-bg-base       { background-color: var(--rxty-bg); }
.rxty-bg-surface    { background-color: var(--rxty-surface); }
.rxty-bg-surface-alt{ background-color: var(--rxty-surface-alt, var(--rxty-surface)); }
.rxty-bg-accent     { background-color: var(--rxty-accent); }
.rxty-bg-transparent{ background-color: transparent; }

/* ── BORDES Y RADIUS ───────────────────────────────────────────────────── */

.rxty-border        { border: 1px solid var(--rxty-border); }
.rxty-border-accent { border: 1px solid var(--rxty-accent); }
.rxty-rounded       { border-radius: var(--rxty-radius); }
.rxty-rounded-lg    { border-radius: var(--rxty-radius-lg); }
.rxty-rounded-full  { border-radius: 9999px; }
.rxty-no-radius     { border-radius: 0; }

/* ── SOMBRAS ───────────────────────────────────────────────────────────── */

.rxty-shadow        { box-shadow: var(--rxty-shadow); }
.rxty-shadow-none   { box-shadow: none; }

/* ── OVERFLOW ──────────────────────────────────────────────────────────── */

.rxty-overflow-hidden  { overflow: hidden; }
.rxty-overflow-x-hidden{ overflow-x: hidden; }

/* ── BOTONES ───────────────────────────────────────────────────────────── */

.rxty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65em 1.5em;
    font-family: var(--rxty-font-main);
    font-size: var(--rxty-text-sm);
    font-weight: var(--rxty-font-weight-medium, 500);
    line-height: 1;
    border-radius: var(--rxty-radius);
    cursor: pointer;
    transition:
        background-color var(--rxty-transition-fast),
        color var(--rxty-transition-fast),
        border-color var(--rxty-transition-fast),
        transform var(--rxty-transition-fast),
        box-shadow var(--rxty-transition-fast);
    text-decoration: none;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

.rxty-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.rxty-btn-primary {
    background-color: var(--rxty-accent);
    color: #ffffff;
}

.rxty-btn-primary:hover {
    background-color: var(--rxty-accent-hover, var(--rxty-accent));
    color: #ffffff;
    box-shadow: var(--rxty-shadow);
}

.rxty-btn-outline {
    background-color: transparent;
    border: 2px solid var(--rxty-accent);
    color: var(--rxty-accent);
}

.rxty-btn-outline:hover {
    background-color: var(--rxty-accent);
    color: #ffffff;
}

.rxty-btn-ghost {
    background-color: transparent;
    color: var(--rxty-text);
}

.rxty-btn-ghost:hover {
    background-color: var(--rxty-surface);
}

/* Tamaños */
.rxty-btn-sm { padding: 0.45em 1em; font-size: var(--rxty-text-xs); }
.rxty-btn-lg { padding: 0.85em 2em; font-size: var(--rxty-text-lg); }

/* ── MARQUEE (Banda de texto horizontal continua) ──────────────────────── */

.rxty-marquee {
    overflow: hidden;
    display: flex;
    width: 100%;
    user-select: none;
}

.rxty-marquee-track {
    display: flex;
    gap: var(--rxty-marquee-gap, 2rem);
    animation: rxty-marquee-scroll var(--rxty-marquee-speed, 30s) linear infinite;
    will-change: transform;
    white-space: nowrap;
}

/* Se pausa si el usuario prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .rxty-marquee-track { animation: none; }
}

.rxty-marquee:hover .rxty-marquee-track {
    animation-play-state: paused;
}

@keyframes rxty-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── ASPECTOS ──────────────────────────────────────────────────────────── */

.rxty-aspect-square { aspect-ratio: 1 / 1; }
.rxty-aspect-video  { aspect-ratio: 16 / 9; }
.rxty-aspect-4x3    { aspect-ratio: 4 / 3; }

/* Imagen que rellena su contenedor */
.rxty-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ── OVERLAYS ──────────────────────────────────────────────────────────── */

.rxty-overlay-dark {
    background: linear-gradient(
        to bottom,
        rgba(18, 2, 3, 0.3) 0%,
        rgba(18, 2, 3, 0.7) 100%
    );
}

.rxty-overlay-color {
    background-color: rgba(18, 2, 3, 0.6);
    background-color: color-mix(in srgb, var(--rxty-bg) 60%, transparent);
}

/* ── GLOW / EFECTOS DE LUZ (estilo Roxty City) ─────────────────────────── */

.rxty-glow {
    filter: drop-shadow(0 0 20px rgba(235, 27, 27, 0.4));
    filter: drop-shadow(0 0 20px color-mix(in srgb, var(--rxty-accent) 40%, transparent));
}

.rxty-glow-text {
    text-shadow: 0 0 30px rgba(235, 27, 27, 0.5);
    text-shadow: 0 0 30px color-mix(in srgb, var(--rxty-accent) 50%, transparent);
}

/* ── REDUCCIÓN DE MOVIMIENTO ───────────────────────────────────────────── */

.rxty-reduced-motion *,
.rxty-reduced-motion *::before,
.rxty-reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}