:root {
    --mrp-bg: #050506;
    --mrp-bg-secondary: #0b0b0d;
    --mrp-sidebar-bg: #080809;

    --mrp-card: #17171a;
    --mrp-card-hover: #202024;

    --mrp-border: rgba(255, 255, 255, 0.08);
    --mrp-border-soft: rgba(255, 255, 255, 0.055);
    --mrp-border-orange: rgba(255, 122, 0, 0.50);

    --mrp-text: #ffffff;
    --mrp-muted: #c8c5d4;
    --mrp-muted-soft: #8f8b9d;

    --mrp-orange: #ff7a00;
    --mrp-orange-hover: #ff9b2f;
    --mrp-orange-soft: rgba(255, 122, 0, 0.14);
    --mrp-orange-glow: rgba(255, 122, 0, 0.22);

    --mrp-sidebar-width: 430px;

    --mrp-radius-sm: 10px;
    --mrp-radius-md: 14px;
    --mrp-radius-lg: 18px;
    --mrp-radius-xl: 24px;

    --mrp-transition: 0.22s ease;

    --mrp-page-bg-image: url("https://mandarinaroleplay.com/wp-content/uploads/2026/06/bg-1080.png");
}

/* =========================================================
   RESET GENERAL
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--mrp-bg);
}

body {
    overflow-x: hidden;
}

body.mandarina-roleplay-body {
    position: relative;
    background: var(--mrp-bg);
    color: var(--mrp-text);
    font-family: 'Rajdhani', Arial, Helvetica, sans-serif;
}

body.mandarina-roleplay-body a {
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   FONDO GLOBAL
========================================================= */

body.mandarina-roleplay-body::before {
    content: "";
    position: fixed;
    inset: 0;

    background-image: var(--mrp-page-bg-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    opacity: 0.18;
    filter: grayscale(100%) contrast(1.05);

    pointer-events: none;
    z-index: 0;
}

body.mandarina-roleplay-body::after {
    content: "";
    position: fixed;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.90),
            rgba(40, 40, 40, 0.62),
            rgba(0, 0, 0, 0.92)
        ),
        rgba(130, 130, 130, 0.08);

    pointer-events: none;
    z-index: 0;
}

/* =========================================================
   LAYOUT GENERAL
========================================================= */

.mrp-main {
    position: relative;
    z-index: 5;

    min-height: 100vh;
    margin-left: var(--mrp-sidebar-width);
    padding: 48px 54px 60px;

    color: var(--mrp-text);

    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(8, 8, 10, 0.72)),
        radial-gradient(circle at top right, rgba(255, 122, 0, 0.10), transparent 34%);
}

/* Compatibilidad temporal con el main viejo */
.mandarina-main-content {
    position: relative;
    z-index: 5;

    min-height: 100vh;
    margin-left: var(--mrp-sidebar-width);
    padding: 48px 54px 60px;

    color: var(--mrp-text);

    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(8, 8, 10, 0.72)),
        radial-gradient(circle at top right, rgba(255, 122, 0, 0.10), transparent 34%);
}

/* =========================================================
   RESPONSIVE CORE
========================================================= */

@media (max-width: 1180px) {
    :root {
        --mrp-sidebar-width: 370px;
    }

    .mrp-main,
    .mandarina-main-content {
        padding: 40px 34px 52px;
    }
}

@media (max-width: 900px) {
    :root {
        --mrp-sidebar-width: 320px;
    }

    .mrp-main,
    .mandarina-main-content {
        margin-left: 0;
        padding: 92px 20px 40px;
    }
}