/* ============================================================
   STARK UI 2.0 — Hoja de estilos de marca (panel web)
   Re-tematiza las clases existentes del panel sin romper el
   HTML generado por JS ni los includes compartidos.
   ============================================================ */

:root {
    /* Marca */
    --red-300: #ff7a7e;
    --red-400: #ff5257;
    --red-500: #ff2e35;
    --red-600: #e31e24;
    --red-700: #a00f14;
    --red-800: #7d0b0f;

    /* Carbón */
    --carbon-0: #05060a;
    --carbon-1: #0b0d12;
    --carbon-2: #12151c;
    --carbon-3: #1a1e27;
    --carbon-4: #232833;

    /* Texto */
    --text-hi: #f2f4f8;
    --text-mid: #9aa0ac;
    --text-low: #5c6270;

    /* Estados */
    --ok: #35d16a;   --ok-dim: rgba(53, 209, 106, 0.14);
    --warn: #fbbf24; --warn-dim: rgba(251, 191, 36, 0.14);
    --error: #ff4d55; --error-dim: rgba(255, 77, 85, 0.14);

    /* Bordes */
    --stroke-1: rgba(255, 255, 255, 0.07);
    --stroke-2: rgba(255, 255, 255, 0.12);
    --stroke-red: rgba(227, 30, 36, 0.45);

    /* Movimiento */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 340ms;

    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

@keyframes stark-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ============ FONDO Y BASE ============ */
body.stark-body {
    font-family: 'Inter', sans-serif;
    color: var(--text-hi);
    background:
        radial-gradient(ellipse at 15% 0%, rgba(227, 30, 36, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 100%, rgba(227, 30, 36, 0.07) 0%, transparent 55%),
        linear-gradient(160deg, var(--carbon-1) 0%, #07090d 60%, var(--carbon-0) 100%);
    background-attachment: fixed;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--red-500), var(--red-700)); border-radius: 10px; }

/* ============ PANEL GLASS 2.0 (reemplaza el glass-effect con blur) ============ */
.glass-effect {
    background:
        var(--grain),
        linear-gradient(155deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.012) 45%, rgba(227, 30, 36, 0.04) 100%),
        rgba(14, 16, 22, 0.92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--stroke-2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 60px rgba(0, 0, 0, 0.45);
}

.character-section {
    animation: stark-rise var(--dur-3) var(--ease-out) both;
    transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.character-section:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 60px rgba(0, 0, 0, 0.45); }
.character-section.cursor-pointer { position: relative; }
.character-section.cursor-pointer:hover {
    transform: translateY(-4px);
    border-color: var(--stroke-red) !important;
}
.character-section.cursor-pointer:active { transform: translateY(-1px) scale(0.99); }
.character-section.cursor-pointer.selected { border-color: var(--stroke-red) !important; }
.character-section.cursor-pointer.selected::before {
    content: '';
    position: absolute;
    top: 0; left: 25%; right: 25%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--red-600), transparent);
}

/* Títulos de tarjeta en Chakra Petch */
.character-section h3 {
    font-family: 'Chakra Petch', 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 15px !important;
}

.red-accent { background: linear-gradient(135deg, var(--red-600), var(--red-700)) !important; }
.red-accent-light { background: rgba(227, 30, 36, 0.18) !important; }

/* ============ TOPBAR ============ */
.stark-topbar {
    position: relative;
    background:
        var(--grain),
        linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
        rgba(9, 11, 15, 0.96);
    border-bottom: 1px solid var(--stroke-1);
}
.stark-topbar::before {
    content: '';
    position: absolute;
    top: 0; left: 35%; right: 35%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--red-600), transparent);
}
.stark-topbar-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.stark-brand { display: flex; align-items: center; gap: 12px; }
.stark-logo {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--red-600), var(--red-800));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px rgba(227, 30, 36, 0.3);
    display: grid; place-items: center;
    font: 700 16px 'Chakra Petch', sans-serif;
    color: #fff;
}
.stark-brand-name { font: 700 17px 'Chakra Petch', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.stark-brand-sub  { font: 600 10px 'Chakra Petch', sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--text-mid); }

.stark-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.stark-nav a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 15px;
    border-radius: 12px;
    font: 600 12px 'Chakra Petch', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-mid);
    text-decoration: none;
    border: 1px solid transparent;
    transition: color var(--dur-2), border-color var(--dur-2), background var(--dur-2);
}
.stark-nav a:hover { color: var(--text-hi); border-color: var(--stroke-red); }
.stark-nav a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--red-600), var(--red-700));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 18px rgba(227, 30, 36, 0.3);
}
.stark-topbar-right { display: flex; align-items: center; gap: 10px; }

@media (max-width: 900px) {
    .stark-topbar-inner { justify-content: center; }
    .stark-nav { margin-left: 0; justify-content: center; }
}

/* ============ ENCABEZADOS DE PÁGINA / SECCIÓN ============ */
.stark-kicker {
    display: flex; align-items: center; gap: 10px;
    font: 600 11px 'Chakra Petch', sans-serif;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-mid);
}
.stark-kicker::before { content: ''; width: 22px; height: 2px; background: var(--red-600); }
.stark-page-title {
    font: 700 clamp(26px, 3vw, 34px) 'Chakra Petch', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin-top: 4px;
}
.stark-section-title {
    display: flex; align-items: center; gap: 12px;
    margin: 4px 0 16px;
    font: 600 11px 'Chakra Petch', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-mid);
}
.stark-section-title b { color: var(--red-400); font-weight: 600; }
.stark-section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--stroke-red), transparent); }

/* ============ CHIP DE ICONO ============ */
.stark-chip {
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(227, 30, 36, 0.22), rgba(227, 30, 36, 0.07)) !important;
    border: 1px solid rgba(227, 30, 36, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: flex; align-items: center; justify-content: center;
}
.stark-chip i { color: var(--red-400) !important; }
.stark-chip--gold {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.06)) !important;
    border-color: rgba(251, 191, 36, 0.35);
}
.stark-chip--gold i { color: var(--warn) !important; }

/* Números de dinero del dashboard */
#total-money, #cash-money, #bank-money, #exp-needed {
    font-family: 'Chakra Petch', sans-serif;
    font-variant-numeric: tabular-nums;
}

/* ============ BADGES ============ */
.vip-badge {
    background: var(--warn-dim) !important;
    color: var(--warn) !important;
    border: 1px solid rgba(251, 191, 36, 0.3);
    font-family: 'Chakra Petch', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.admin-badge {
    background: linear-gradient(135deg, var(--red-600), var(--red-700)) !important;
    font-family: 'Chakra Petch', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ============ LOGS / TRANSACCIONES (markup generado por JS) ============ */
.moneylogs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--stroke-1);
}
.moneylogs__date {
    margin-right: 10px;
    width: 113px;
    flex: none;
    color: var(--text-low);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.moneylogs__comment {
    font-size: 13px;
    color: var(--text-mid);
    width: 50%;
    text-align: left;
    margin-right: auto;
}
.moneylogs__amount {
    font: 600 14px 'Chakra Petch', sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--warn);
    display: flex;
    flex-direction: column;
    text-align: end;
}
.moneylogs__amount.text-green-400 { color: var(--ok) !important; }
.moneylogs__amount.text-red-400 { color: var(--red-400) !important; }
.moneylogs__reason { font: 400 11px 'Inter', sans-serif; color: var(--text-low); }

/* ============ LICENCIAS (markup generado por JS) ============ */
.license-item {
    display: inline-block;
    margin: 5px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid;
    font: 600 12px 'Chakra Petch', sans-serif;
    letter-spacing: 0.5px;
    transition: border-color var(--dur-2), background var(--dur-2);
}
.license-item.owned {
    border-color: rgba(53, 209, 106, 0.3);
    background: var(--ok-dim);
    color: var(--ok);
}
.license-item.not-owned {
    border-color: var(--stroke-1);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-low);
}

/* ============ LISTA DE INFORMACIÓN ============ */
.info-list { list-style: none; padding: 0; }
.info-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--stroke-1);
    font-size: 13px;
}
.info-list li:last-child { border-bottom: none; }
.info-list li span:first-child { color: var(--text-mid); }
.info-list li span:last-child { color: var(--text-hi); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }

/* ============ NIVEL / PROGRESO ============ */
.stark-level-num {
    font: 700 56px 'Chakra Petch', sans-serif;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.stark-progress {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
    margin-top: 12px;
}
.stark-progress > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--red-700), var(--red-500));
    transition: width var(--dur-3) var(--ease-out);
}

/* ============ BOTONES ============ */
.btn-purple {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), rgba(10, 11, 15, 0.6);
    border: 1px solid var(--stroke-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: var(--text-hi);
    padding: 9px 20px;
    border-radius: 12px;
    cursor: pointer;
    font: 600 12px 'Chakra Petch', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2);
}
.btn-purple:hover { border-color: var(--stroke-red); transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.btn-purple:active { transform: scale(0.98); }

/* ============ TOGGLE DE PRIVACIDAD ============ */
#privacy-toggle:checked + div {
    background: linear-gradient(135deg, var(--red-600), var(--red-700));
}

/* ============ SCROLL GLASS ============ */
.glass-scroll {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: none;
    border: 1px solid var(--stroke-1);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(227, 30, 36, 0.5) rgba(0, 0, 0, 0.2);
}
.glass-scroll::-webkit-scrollbar { width: 5px; }
.glass-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 4px; }
.glass-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--red-500), var(--red-700));
    border-radius: 4px;
}

/* ============ AJUSTES MÓVILES (heredados del diseño anterior) ============ */
@media (max-width: 768px) {
    .glass-scroll { max-height: 300px !important; margin: 0 -10px; padding: 0 10px; }
    .moneylogs { padding: 8px; margin-bottom: 6px; font-size: 14px; }
    .moneylogs__date { width: 90px; font-size: 12px; }
    .moneylogs__comment { font-size: 13px; width: 45%; }
    .moneylogs__amount { font-size: 13px; }
}
@media (max-width: 480px) {
    .glass-scroll { max-height: 250px !important; }
    .moneylogs { flex-direction: column; gap: 4px; align-items: flex-start; }
    .moneylogs__date { width: auto; text-align: left; }
    .moneylogs__comment { width: 100%; text-align: left; }
    .moneylogs__amount { text-align: right; }
}

/* z-index de dropdowns (heredado) */
#userMenuDropdownBody,
.fixed.top-4.right-4 { z-index: 2147483647 !important; }