/* ==============================================
   cases.css  --  PuffCase Cases Redesign 2025
   Inspired by Knife Clash design language
   ============================================== */

/* ---- Variables -------------------------------- */
#panel-cases {
    --cs-purple:      #7c3aed;
    --cs-purple2:     #9d5ff5;
    --cs-purple-dark: #4c1d95;
    --cs-purple-glow: rgba(124,58,237,.5);
    --cs-purple-dim:  rgba(124,58,237,.1);
    --cs-gold:        #ffd740;
    --cs-gold-glow:   rgba(255,215,64,.4);
    --cs-gold-dim:    rgba(255,215,64,.12);
    --cs-green:       #4ade80;
    --cs-red:         #f87171;
    --cs-border:      rgba(124,58,237,.18);
    --cs-card-bg:     rgba(14,8,32,.97);
    --cs-radius:      18px;
    --cs-radius-sm:   12px;
}

/* ---- Animaciones de entrada ------------------- */
@keyframes cs-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cs-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cs-scale-in {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes cs-slide-left {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes cs-shimmer {
    from { left: -100%; }
    to   { left: 160%; }
}
@keyframes cs-float {
    0%,100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-8px) rotate(4deg); }
}
@keyframes cs-pulse-glow {
    0%,100% { opacity: .6; }
    50%      { opacity: 1; }
}
@keyframes cs-live-dot {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}
@keyframes cs-card-pop {
    0%   { opacity: 0; transform: translateY(22px) scale(.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cs-result-pop {
    0%   { opacity: 0; transform: scale(.65); }
    65%  { transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes cs-feed-in {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes cs-modal-in {
    from { opacity: 0; transform: scale(.9) translateY(28px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Aplicar animaciones cuando el panel es visible -- */
#panel-cases .mj-layout       { animation: cs-fade-up .5s cubic-bezier(.22,1,.36,1) .05s both; }
#panel-cases .mj-sidebar       { animation: cs-slide-left .45s ease .1s both; }
#panel-cases .cases-hero       { animation: cs-fade-in .45s ease both; }
#panel-cases .mj-section-header { animation: cs-fade-up .4s ease .15s both; }
#panel-cases .cases-grid        { animation: cs-fade-in .5s ease .2s both; }

/* ================================================
   HERO SECTION
   ================================================ */
.cases-hero {
    position: relative;
    overflow: hidden;
    padding: 36px 28px 0;
    margin-bottom: 0;
}
.cases-hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 100% at 8% 50%,  rgba(100,30,200,.16) 0%, transparent 55%),
        linear-gradient(180deg, rgba(30,10,60,.7) 0%, transparent 100%);
    pointer-events: none;
}
.cases-hero-bg::after {
    content: '\1F4E6';
    position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
    font-size: 130px; opacity: .03; pointer-events: none;
    filter: grayscale(1);
}
.cases-hero-content {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 24px;
}
.cases-hero-icon {
    font-size: 3.4rem; flex-shrink: 0; line-height: 1;
    filter:
        drop-shadow(0 0 22px var(--cs-purple-glow))
        drop-shadow(0 0 8px rgba(124,58,237,.4));
    animation: cs-float 4s ease-in-out infinite;
}
.cases-hero-text { display: flex; flex-direction: column; gap: 4px; }
.cases-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cs-purple2); opacity: .85;
}
.cases-hero-eyebrow::before {
    content: ''; display: inline-block;
    width: 20px; height: 1px; background: var(--cs-purple2); opacity: .7;
}
.cases-hero-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 900; margin: 0; color: #fff;
    letter-spacing: .04em; line-height: 1;
    text-shadow: 0 0 40px rgba(124,58,237,.3), 0 2px 20px rgba(0,0,0,.6);
}
.cases-hero-title span {
    color: var(--cs-purple2);
    text-shadow: 0 0 28px var(--cs-purple-glow);
}
.cases-hero-sub {
    font-size: .8rem; color: rgba(255,255,255,.38);
    margin: 0; letter-spacing: .05em;
}

/* Hero stats bar */
.cases-hero-stats {
    position: relative; z-index: 1;
    display: flex; align-items: stretch;
    background: rgba(0,0,0,.3);
    border-top: 1px solid rgba(124,58,237,.15);
    border-bottom: 1px solid rgba(0,0,0,.25);
    border-left:  1px solid rgba(124,58,237,.1);
    border-right: 1px solid rgba(124,58,237,.1);
    backdrop-filter: blur(6px);
    overflow-x: auto; scrollbar-width: none;
}
.cases-hero-stats::-webkit-scrollbar { display: none; }
.cs-stat {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px; flex: 1; min-width: 90px; padding: 14px 8px;
    transition: background .2s;
}
.cs-stat:hover { background: rgba(124,58,237,.05); }
.cs-stat-val {
    font-family: 'Rajdhani', sans-serif; font-size: 1.45rem; font-weight: 900;
    color: var(--cs-green); line-height: 1;
    text-shadow: 0 0 12px rgba(74,222,128,.4);
    white-space: nowrap;
    animation: cs-scale-in .4s cubic-bezier(.22,1,.36,1) .3s both;
}
.cs-stat-lbl {
    font-size: .56rem; color: rgba(255,255,255,.32);
    text-transform: uppercase; letter-spacing: .09em; white-space: nowrap;
}
.cs-stat-div {
    width: 1px; align-self: stretch;
    background: rgba(255,255,255,.07);
    flex-shrink: 0; margin: 10px 0;
}

/* ================================================
   COMO FUNCIONA
   ================================================ */
.cs-how {
    display: flex; align-items: flex-start; justify-content: center;
    gap: 8px; flex-wrap: wrap;
    padding: 28px 32px 24px;
    background: rgba(0,0,0,.15);
    border-bottom: 1px solid rgba(124,58,237,.08);
    margin-bottom: 0;
}
.cs-how-step {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; flex-shrink: 0;
    width: 130px; text-align: center;
    padding: 16px 10px 14px;
    background: rgba(124,58,237,.05);
    border: 1px solid rgba(124,58,237,.14);
    border-radius: 16px;
    cursor: default;
    transition: background .25s, border-color .25s, transform .22s, box-shadow .25s;
    animation: cs-fade-up .35s ease both;
}
.cs-how-step:nth-child(1) { animation-delay: .06s; }
.cs-how-step:nth-child(3) { animation-delay: .12s; }
.cs-how-step:nth-child(5) { animation-delay: .18s; }
.cs-how-step:nth-child(7) { animation-delay: .24s; }
.cs-how-step:hover {
    background: rgba(124,58,237,.12);
    border-color: rgba(124,58,237,.38);
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(124,58,237,.14);
}
.cs-how-step--gold:hover {
    background: rgba(255,215,64,.07);
    border-color: rgba(255,215,64,.35);
    box-shadow: 0 10px 28px rgba(255,215,64,.1);
}
.cs-how-num {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, rgba(124,58,237,.3), rgba(60,10,120,.18));
    border: 1.5px solid rgba(124,58,237,.5);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; line-height: 1;
    box-shadow: 0 0 18px rgba(124,58,237,.22), 0 3px 8px rgba(0,0,0,.35);
    transition: box-shadow .25s, border-color .25s;
}
.cs-how-step:hover .cs-how-num {
    box-shadow: 0 0 28px rgba(124,58,237,.44);
    border-color: rgba(124,58,237,.8);
}
.cs-how-num--gold {
    background: linear-gradient(135deg, rgba(255,215,64,.28), rgba(100,70,0,.15));
    border-color: rgba(255,215,64,.5);
    box-shadow: 0 0 18px rgba(255,215,64,.2), 0 3px 8px rgba(0,0,0,.35);
}
.cs-how-step--gold:hover .cs-how-num--gold {
    box-shadow: 0 0 28px rgba(255,215,64,.42);
    border-color: rgba(255,215,64,.8);
}
.cs-how-info { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.cs-how-info strong { font-size: .82rem; color: rgba(255,255,255,.88); font-weight: 700; line-height: 1.2; }
.cs-how-info span   { font-size: .68rem; color: rgba(255,255,255,.35); }
.cs-how-arrow {
    flex-shrink: 0; align-self: center;
    margin-top: -10px;
    color: rgba(124,58,237,.3);
    font-size: .8rem; letter-spacing: 1px;
}

/* ================================================
   LAYOUT OVERRIDE para Cases (sin max-width)
   ================================================ */
#panel-cases {
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
    border-top: 2px solid rgba(80,20,160,.55);
}
#panel-cases .mj-layout {
    padding: 28px 20px 0;
    animation: cs-fade-up .5s cubic-bezier(.22,1,.36,1) .1s both;
}

/* ================================================
   GRID DE CAJAS
   ================================================ */
.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    padding: 4px 2px 24px;
}

/* ================================================
   CARD INDIVIDUAL
   ================================================ */
.cases-card {
    background: linear-gradient(160deg, rgba(20,8,44,.98) 0%, rgba(10,5,24,.99) 100%);
    border: 1px solid rgba(124,58,237,.2);
    border-radius: var(--cs-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    user-select: none;
    /* stagger cards */
    animation: cs-card-pop .4s cubic-bezier(.22,1,.36,1) both;
}
.cases-card:nth-child(1)  { animation-delay: .04s; }
.cases-card:nth-child(2)  { animation-delay: .08s; }
.cases-card:nth-child(3)  { animation-delay: .12s; }
.cases-card:nth-child(4)  { animation-delay: .16s; }
.cases-card:nth-child(5)  { animation-delay: .20s; }
.cases-card:nth-child(6)  { animation-delay: .24s; }
.cases-card:nth-child(7)  { animation-delay: .28s; }
.cases-card:nth-child(8)  { animation-delay: .32s; }

/* Shimmer sweep al hacer hover */
.cases-card::before {
    content: '';
    position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent);
    transition: left .55s ease;
    pointer-events: none; z-index: 5;
}
.cases-card:hover::before { left: 160%; }

/* Borde activo en el hover */
.cases-card:hover {
    transform: translateY(-7px) scale(1.012);
    border-color: rgba(124,58,237,.65);
    box-shadow:
        0 20px 52px rgba(124,58,237,.22),
        0 0 0 1px rgba(124,58,237,.08) inset;
}

/* Acento izquierdo (igual que knife clash) */
.cases-card::after {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: rgba(124,58,237,.15);
    border-radius: var(--cs-radius) 0 0 var(--cs-radius);
    transition: background .3s, box-shadow .3s;
}
.cases-card:hover::after {
    background: linear-gradient(180deg, var(--cs-purple2), rgba(124,58,237,.2));
    box-shadow: 2px 0 16px var(--cs-purple-glow);
}

/* ---- Media area -------------------------------- */
.cases-card-media {
    position: relative;
    background:
        radial-gradient(ellipse 75% 90% at 50% 80%, rgba(124,58,237,.16) 0%, rgba(4,2,14,.75) 65%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    overflow: hidden;
    padding: 16px;
}
/* Animated bg glow */
.cases-card-media::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 65%, rgba(124,58,237,.12) 0%, transparent 68%);
    animation: cs-pulse-glow 3s ease infinite;
}
/* Subtle grid pattern overlay */
.cases-card-media::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(124,58,237,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,58,237,.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.cases-card-img {
    max-height: 130px;
    max-width: 88%;
    object-fit: contain;
    filter: drop-shadow(0 6px 24px rgba(124,58,237,.5));
    transition: transform .35s cubic-bezier(.22,1,.36,1), filter .35s ease;
    position: relative;
    z-index: 2;
}
.cases-card:hover .cases-card-img {
    transform: scale(1.12) rotate(-3deg);
    filter: drop-shadow(0 10px 36px rgba(124,58,237,.8));
}
.cases-card-img-placeholder {
    font-size: 4.2rem;
    opacity: .35;
    z-index: 2;
    position: relative;
    animation: cs-float 4s ease-in-out infinite;
}

/* Preview skins */
.cases-card-preview {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    align-items: center;
    z-index: 3;
}
.cases-preview-skin {
    width: 40px; height: 40px;
    object-fit: contain;
    background: rgba(0,0,0,.55);
    border-radius: 8px;
    border: 1px solid rgba(124,58,237,.2);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
    transition: transform .22s, border-color .22s;
}
.cases-preview-skin:hover {
    transform: scale(1.2) translateY(-2px);
    border-color: rgba(124,58,237,.6);
    z-index: 10;
}

/* Badge limitada */
.cases-card-limitada {
    position: absolute;
    top: 10px; right: 10px;
    background: linear-gradient(135deg, #f0c040, #c98e00);
    color: #1a0f00;
    font-size: .62rem; font-weight: 900;
    padding: 3px 10px; border-radius: 20px;
    letter-spacing: .06em; z-index: 5; white-space: nowrap;
    box-shadow: 0 2px 10px rgba(240,192,64,.4);
}

/* ---- Card body --------------------------------- */
.cases-card-body {
    padding: 16px 18px 18px;
    display: flex; flex-direction: column; gap: 9px; flex: 1;
    border-top: 1px solid rgba(124,58,237,.08);
    background: linear-gradient(180deg, rgba(124,58,237,.03) 0%, transparent 100%);
}
.cases-card-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem; font-weight: 800; color: #fff;
    margin: 0; line-height: 1.2; letter-spacing: .02em;
}
.cases-card-desc {
    font-size: .74rem; color: rgba(124,58,237,.55);
    line-height: 1.45; margin: 0;
}
.cases-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 2px;
}
.cases-card-price {
    display: flex; align-items: center; gap: 5px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem; font-weight: 900;
    color: var(--cs-gold);
    text-shadow: 0 0 10px var(--cs-gold-glow);
}
.cases-card-aperturas {
    font-size: .68rem; color: rgba(124,58,237,.4);
    font-weight: 600;
}

/* ---- Abrir button ------------------------------ */
.cases-btn-abrir {
    width: 100%;
    margin-top: 4px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, #4c1d95, var(--cs-purple) 55%, var(--cs-purple2));
    border: none; border-radius: 11px;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
    padding: 12px 20px; cursor: pointer;
    transition: box-shadow .25s, transform .12s;
    position: relative; overflow: hidden;
    box-shadow: 0 4px 18px rgba(124,58,237,.28), 0 1px 0 rgba(255,255,255,.12) inset;
}
.cases-btn-abrir::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
}
.cases-btn-abrir::after {
    content: ''; position: absolute;
    top: 0; left: -100%; width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    transition: left .5s ease;
}
.cases-btn-abrir:hover {
    box-shadow: 0 8px 28px rgba(124,58,237,.55), 0 1px 0 rgba(255,255,255,.12) inset;
    transform: translateY(-2px);
}
.cases-btn-abrir:hover::after { left: 160%; }
.cases-btn-abrir:active { transform: scale(.97); }

/* ================================================
   MAIN SECTION HEADER
   ================================================ */
#panel-cases .mj-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; padding-bottom: 14px;
    border-bottom: 1px solid rgba(124,58,237,.12);
}
#panel-cases .mj-section-header h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.7);
    display: flex; align-items: center; gap: 9px;
}
#panel-cases .mj-section-header h2::before {
    content: '';
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--cs-purple2);
    box-shadow: 0 0 10px var(--cs-purple-glow);
    animation: cs-live-dot 2s ease-in-out infinite;
    flex-shrink: 0;
}

/* ================================================
   LIVE FEED HORIZONTAL BAR
   ================================================ */
.cs-livefeed-bar {
    display: flex; align-items: stretch;
    background: rgba(0,0,0,.22);
    border-bottom: 1px solid rgba(124,58,237,.12);
    border-top: 1px solid rgba(0,0,0,.2);
    min-height: 52px;
    overflow: hidden;
}
.cs-livefeed-label {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 9px;
    padding: 0 20px;
    font-family: 'Rajdhani', sans-serif;
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.55);
    border-right: 1px solid rgba(124,58,237,.14);
    background: rgba(124,58,237,.06);
    white-space: nowrap;
    min-width: 170px;
}
.cs-livefeed-track {
    display: flex; align-items: center; gap: 8px;
    flex: 1; overflow-x: auto; scrollbar-width: none;
    padding: 8px 16px;
}
.cs-livefeed-track::-webkit-scrollbar { display: none; }
.cs-livefeed-loading {
    font-size: .78rem; color: rgba(255,255,255,.2); white-space: nowrap;
    padding: 0 4px;
}

/* Feed chips (horizontal items) */
.cs-feed-chip {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
    background: rgba(124,58,237,.06);
    border: 1px solid rgba(124,58,237,.14);
    border-radius: 9px;
    padding: 6px 12px 6px 6px;
    cursor: default;
    transition: background .18s, border-color .18s, transform .15s;
    animation: cs-feed-in .35s ease both;
    white-space: nowrap;
}
.cs-feed-chip:hover {
    background: rgba(124,58,237,.14);
    border-color: rgba(124,58,237,.35);
    transform: translateY(-1px);
}
.cs-feed-chip--win {
    border-color: rgba(124,58,237,.22);
    background: rgba(124,58,237,.09);
}
.cs-feed-chip--vacio {
    opacity: .55;
}
.cs-feed-chip-avatar {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 1.5px solid rgba(124,58,237,.25);
}
.cs-feed-chip-user {
    font-size: .77rem; font-weight: 700; color: rgba(255,255,255,.82);
    max-width: 90px; overflow: hidden; text-overflow: ellipsis;
}
.cs-feed-chip-sep {
    color: rgba(255,255,255,.18); font-size: .8rem; flex-shrink: 0;
}
.cs-feed-chip-skin {
    font-size: .74rem; font-weight: 600; color: var(--cs-purple2);
    max-width: 130px; overflow: hidden; text-overflow: ellipsis;
}
.cs-feed-chip-skin--vacio { color: rgba(255,255,255,.25); }
.cs-feed-chip-price {
    font-size: .68rem; color: var(--cs-gold); font-weight: 700;
    margin-left: 2px;
}

/* ================================================
   SIDEBAR CARDS
   ================================================ */
#panel-cases .mj-card {
    background: linear-gradient(160deg, rgba(18,8,38,.98) 0%, rgba(10,5,22,.99) 100%);
    border: 1px solid rgba(124,58,237,.18);
    border-radius: var(--cs-radius);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    margin-bottom: 16px;
    animation: cs-scale-in .5s cubic-bezier(.22,1,.36,1) .12s both;
}
#panel-cases .mj-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(90deg, rgba(124,58,237,.1), transparent);
    border-bottom: 1px solid rgba(124,58,237,.1);
}
#panel-cases .mj-card-header h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: .95rem; font-weight: 800; color: #fff;
    letter-spacing: .04em; flex: 1; margin: 0;
}
#panel-cases .mj-card-icon { font-size: 1.1rem; flex-shrink: 0; }
#panel-cases .mj-card-body { padding: 14px 16px; }
#panel-cases .mj-refresh-btn {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
    border-radius: 7px; color: rgba(255,255,255,.55);
    font-size: .8rem; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .18s;
}
#panel-cases .mj-refresh-btn:hover { background: rgba(124,58,237,.2); color: #fff; }

/* Live dot */
.cases-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #f87171;
    box-shadow: 0 0 8px rgba(248,113,113,.6);
    animation: cs-live-dot 1.5s ease-in-out infinite;
    flex-shrink: 0;
    margin-left: auto;
}

/* ================================================
   MIS APERTURAS LIST
   ================================================ */
.cases-mis-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 10px;
    border: 1px solid rgba(124,58,237,.1);
    background: rgba(124,58,237,.04);
    margin-bottom: 6px;
    transition: background .18s, border-color .18s, transform .15s;
    animation: cs-fade-up .3s ease both;
}
.cases-mis-item:hover {
    background: rgba(124,58,237,.1);
    border-color: rgba(124,58,237,.28);
    transform: translateX(2px);
}
.cases-mis-item-img {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 9px; overflow: hidden;
    background: rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(124,58,237,.15);
}
.cases-mis-item-img img { width: 100%; height: 100%; object-fit: contain; }
.cases-mis-empty-icon { font-size: 1.3rem; }
.cases-mis-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cases-mis-caja   { font-size: .67rem; color: rgba(124,58,237,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cases-mis-skin   { font-size: .78rem; font-weight: 600; color: #c4b5fd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cases-mis-skin--vacio { color: #374151; }
.cases-mis-fecha  { font-size: .65rem; color: rgba(124,58,237,.3); }
.cases-mis-item-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.cases-mis-precio { font-size: .69rem; color: var(--cs-gold); font-weight: 700; }

/* ================================================
   LIVE FEED
   ================================================ */
.cases-feed-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 10px;
    border: 1px solid rgba(124,58,237,.08);
    background: rgba(124,58,237,.03);
    margin-bottom: 5px;
    animation: cs-feed-in .3s ease;
    transition: background .18s, transform .15s;
}
.cases-feed-item:hover {
    background: rgba(124,58,237,.08);
    transform: translateX(2px);
}
.cases-feed-item--win {
    border-color: rgba(124,58,237,.22);
    background: rgba(124,58,237,.07);
}
.cases-feed-avatar {
    width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 1.5px solid rgba(124,58,237,.25);
    box-shadow: 0 0 8px rgba(124,58,237,.15);
}
.cases-feed-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cases-feed-user  { font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cases-feed-caja  { font-size: .67rem; color: rgba(124,58,237,.45); }
.cases-feed-result { font-size: .72rem; font-weight: 600; }
.cases-feed-result--win   { color: var(--cs-purple2); }
.cases-feed-result--vacio { color: rgba(255,255,255,.2); }
.cases-feed-fecha { font-size: .63rem; color: rgba(124,58,237,.35); flex-shrink: 0; white-space: nowrap; }

/* ================================================
   MODAL DE APERTURA
   ================================================ */
.cases-modal {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cases-modal-bg {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.9);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
/* Flash de revelacion */
.cases-reveal-flash {
    position: fixed; inset: 0; z-index: 3000;
    pointer-events: none; opacity: 0; transition: opacity .08s;
}
.cases-reveal-flash--active { opacity: .35; }

.cases-modal-box {
    position: relative; z-index: 1;
    background: linear-gradient(165deg, rgba(18,7,44,.99) 0%, rgba(8,4,20,.99) 100%);
    border: 1px solid rgba(124,58,237,.28);
    border-radius: 24px;
    width: min(740px, 96vw);
    max-height: 92vh;
    overflow-y: auto;
    animation: cs-modal-in .28s cubic-bezier(.22,1,.36,1);
    scrollbar-width: thin;
    scrollbar-color: rgba(124,58,237,.25) transparent;
    box-shadow:
        0 0 100px rgba(124,58,237,.14),
        0 40px 100px rgba(0,0,0,.7),
        0 0 0 1px rgba(255,255,255,.04) inset;
}
.cases-modal-box--wide { width: min(860px, 96vw); }

.cases-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 26px 18px;
    background: linear-gradient(90deg, rgba(124,58,237,.1), transparent 70%);
    border-bottom: 1px solid rgba(124,58,237,.12);
    gap: 14px;
}
.cases-modal-header-left {
    display: flex; align-items: center; gap: 14px; min-width: 0;
}
.cases-modal-case-thumb {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(60,10,120,.15));
    border: 1px solid rgba(124,58,237,.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 0 18px rgba(124,58,237,.25);
    overflow: hidden;
}
.cases-modal-case-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cases-modal-header-text { min-width: 0; }
.cases-modal-header-text h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.45rem; font-weight: 900; color: #fff; margin: 0;
    letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cases-modal-meta-row {
    display: flex; align-items: center; gap: 10px; margin-top: 3px;
}
.cases-modal-price {
    color: var(--cs-gold); font-weight: 900;
    font-family: 'Rajdhani', sans-serif; font-size: 1.05rem;
    text-shadow: 0 0 10px var(--cs-gold-glow);
}
.cases-modal-meta-sep { color: rgba(255,255,255,.18); }
.cases-modal-balance { color: rgba(255,255,255,.38); font-size: .85rem; }
.cases-modal-balance--insuf { color: #f87171; font-weight: 700; }
.cases-modal-close {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.45);
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    cursor: pointer; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s; font-family: inherit;
}
.cases-modal-close:hover { background: rgba(248,113,113,.22); color: #f87171; border-color: rgba(248,113,113,.35); }

/* ================================================
   ITEMS GRID DEL MODAL
   ================================================ */
.cases-modal-items { padding: 16px 26px 4px; }
.cases-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 10px; margin-bottom: 14px;
    max-height: 250px; overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(124,58,237,.25) transparent;
    padding: 2px 2px 4px;
}
.cases-item {
    background: rgba(124,58,237,.05);
    border: 1px solid rgba(124,58,237,.1);
    border-bottom: 3px solid var(--item-color, rgba(124,58,237,.2));
    border-radius: 12px; padding: 10px 8px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    transition: border-color .2s, background .2s, transform .18s;
    cursor: default; position: relative;
}
.cases-item:hover {
    background: rgba(124,58,237,.12);
    border-color: rgba(124,58,237,.38);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.cases-item--vacio { opacity: .5; }
.cases-item-img-wrap { font-size: 2rem; line-height: 1; }
.cases-item-img {
    width: 62px; height: 62px; object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.cases-item-nombre {
    font-size: .66rem; color: rgba(196,181,253,.8); text-align: center; line-height: 1.3;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.cases-item-precio { font-size: .68rem; color: var(--cs-gold); font-weight: 700; }
.cases-item-prob {
    font-size: .68rem; font-weight: 700;
    color: rgba(124,58,237,.5);
    font-family: 'Space Mono', monospace;
}

/* ================================================
   RULETA
   ================================================ */
.cases-ruleta-wrap {
    position: relative; width: 100%; height: 134px; overflow: hidden;
    background: rgba(0,0,0,.55);
    border-top: 1px solid rgba(124,58,237,.18);
    border-bottom: 1px solid rgba(124,58,237,.18);
    margin: 0 0 2px;
}
/* Fade lateral en el wrapper */
.cases-ruleta-wrap::before {
    content: '';
    position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: linear-gradient(90deg,
        rgba(8,4,20,1) 0%,
        rgba(8,4,20,.6) 8%,
        transparent 20%,
        transparent 80%,
        rgba(8,4,20,.6) 92%,
        rgba(8,4,20,1) 100%
    );
}
/* Marcador central dorado */
.cases-ruleta-wrap::after {
    content: '';
    position: absolute; top: 0; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(180deg,
        transparent 0%, var(--cs-gold) 12%, var(--cs-gold) 88%, transparent 100%
    );
    box-shadow: 0 0 12px rgba(255,215,64,.9);
    z-index: 10; pointer-events: none;
}
.cases-ruleta-track {
    display: flex; align-items: center; gap: 6px;
    height: 100%; padding: 0 6px;
    will-change: transform;
}

.cases-ruleta-item {
    flex-shrink: 0; width: 118px; height: 116px;
    background: linear-gradient(180deg, rgba(20,10,40,.9), rgba(10,5,22,.95));
    border: 1px solid rgba(124,58,237,.12);
    border-bottom: 3px solid var(--item-rarity-color, rgba(124,58,237,.3));
    border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; overflow: hidden; position: relative;
    transition: transform .15s, border-color .15s;
}
.cases-ruleta-item--vacio { opacity: .4; }
.cases-ruleta-item--selected {
    border-color: var(--cs-gold) !important;
    border-bottom-color: var(--cs-gold) !important;
    background: rgba(255,215,64,.1) !important;
    box-shadow: 0 0 28px rgba(255,215,64,.45), 0 0 8px rgba(255,215,64,.3) inset;
    transform: scaleY(1.05);
}
.cases-ruleta-item-img { width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; }
.cases-ruleta-item-img img { width: 100%; height: 100%; object-fit: contain; }
.cases-ruleta-item-img span { font-size: 2.2rem; }
.cases-ruleta-item-nombre {
    font-size: .57rem; color: rgba(196,181,253,.5); text-align: center;
    padding: 0 4px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 112px;
}

/* ================================================
   RESULTADO
   ================================================ */
.cases-resultado {
    display: none;
    justify-content: center;
    padding: 4px 26px 2px;
}
.cases-resultado--show {
    display: flex;
    animation: cs-result-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cs-particles-rise {
    0%   { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-70px) scale(0); opacity: 0; }
}
.cases-resultado-inner {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 28px 36px 24px;
    background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.2));
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.06);
    position: relative; overflow: hidden;
    width: 100%; text-align: center;
    box-shadow: 0 12px 48px rgba(0,0,0,.5);
}
.cases-resultado-glow {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 80%, var(--glow-color, rgba(124,58,237,.4)) 0%, transparent 65%);
    opacity: .25; pointer-events: none; transition: opacity .5s;
}
.cases-resultado-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cs-particle {
    position: absolute; bottom: 20%; width: 6px; height: 6px; border-radius: 2px;
    animation: cs-particles-rise 1.2s ease-out both;
}
.cases-resultado-img {
    width: 130px; height: 130px; object-fit: contain;
    position: relative; z-index: 2;
    filter: drop-shadow(0 0 0px transparent);
    transition: filter .5s;
}
.cases-resultado-img--glow {
    filter: drop-shadow(0 0 24px var(--glow-color, rgba(124,58,237,.7)));
    animation: cs-float 3s ease-in-out infinite;
}
.cases-resultado-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 16px; border-radius: 20px;
    font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--badge-border, rgba(124,58,237,.35));
    color: var(--badge-color, var(--cs-purple2));
    position: relative; z-index: 2;
    box-shadow: 0 0 12px var(--badge-shadow, rgba(124,58,237,.2));
}
.cases-resultado-nombre {
    font-family: 'Rajdhani', sans-serif; font-size: 1.6rem;
    font-weight: 900; color: #fff; position: relative; z-index: 2; line-height: 1.1;
}
.cases-resultado-sub { font-size: .76rem; color: rgba(196,181,253,.45); position: relative; z-index: 2; }

/* ================================================
   MODAL BOTONES
   ================================================ */
.cases-modal-btns {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding: 14px 26px 20px;
}
/* Boton ABRIR principal */
.cases-open-btn {
    flex: 1; min-width: 180px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(135deg, #4c1d95, var(--cs-purple) 50%, var(--cs-purple2));
    border: none; border-radius: 14px; color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
    padding: 16px 28px; cursor: pointer; position: relative; overflow: hidden;
    box-shadow: 0 6px 28px rgba(124,58,237,.4), 0 1px 0 rgba(255,255,255,.15) inset;
    transition: box-shadow .25s, transform .12s;
}
.cases-open-btn::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
}
.cases-open-btn::after {
    content: ''; position: absolute;
    top: 0; left: -100%; width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    animation: cs-shimmer-sweep 2.5s ease infinite;
}
@keyframes cs-shimmer-sweep {
    0%   { left: -100%; }
    60%  { left: 160%; }
    100% { left: 160%; }
}
.cases-open-btn:hover { box-shadow: 0 10px 36px rgba(124,58,237,.6); transform: translateY(-2px); }
.cases-open-btn:active { transform: scale(.97); }
.cases-open-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; animation: none; }
.cases-open-btn:disabled::after { animation: none; }
.cases-open-btn-icon { font-size: 1.25rem; flex-shrink: 0; }
.cases-open-btn-text { flex: 1; }
.cases-open-btn-price {
    background: rgba(255,255,255,.12); border-radius: 8px;
    padding: 3px 10px; font-size: .85rem; font-weight: 700;
    color: var(--cs-gold); flex-shrink: 0; letter-spacing: .03em;
}
.cases-repeat-btn {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.28);
    border-radius: 12px; color: var(--cs-purple2);
    font-family: 'Rajdhani', sans-serif;
    font-size: .95rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    padding: 13px 22px; cursor: pointer; transition: all .22s;
}
.cases-repeat-btn:hover { background: rgba(124,58,237,.25); border-color: rgba(124,58,237,.5); color: #fff; transform: translateY(-1px); }
.cases-close-btn {
    flex: 0 0 auto;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px; color: rgba(255,255,255,.5);
    font-family: 'Rajdhani', sans-serif;
    font-size: .95rem; font-weight: 700; letter-spacing: .04em;
    padding: 13px 22px; cursor: pointer; transition: all .2s;
}
.cases-close-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

/* mj-btn (otros contextos: login, etc.) */
.mj-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: 11px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
    padding: 13px 24px; cursor: pointer; text-decoration: none;
    transition: box-shadow .22s, transform .12s, background .2s;
    position: relative; overflow: hidden;
}
.mj-btn--primary {
    background: linear-gradient(135deg, #4c1d95, var(--cs-purple) 55%, var(--cs-purple2));
    color: #fff;
    box-shadow: 0 4px 18px rgba(124,58,237,.3), 0 1px 0 rgba(255,255,255,.12) inset;
}
.mj-btn--primary:hover { box-shadow: 0 8px 28px rgba(124,58,237,.55); transform: translateY(-2px); }
.mj-btn--ghost {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.65);
}
.mj-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); transform: translateY(-1px); }
.mj-btn--steam {
    background: linear-gradient(135deg, #171a21, #2a475e); color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.mj-btn--steam:hover { box-shadow: 0 6px 20px rgba(0,0,0,.5); transform: translateY(-2px); }

/* ================================================
   BADGES
   ================================================ */
.cases-badge {
    font-size: .66rem; font-weight: 800; padding: 2px 9px; border-radius: 20px;
    white-space: nowrap; letter-spacing: .04em;
}
.cases-badge--pending { background: rgba(240,192,64,.14); color: var(--cs-gold); border: 1px solid rgba(240,192,64,.28); }
.cases-badge--sent    { background: rgba(74,222,128,.14);  color: var(--cs-green); border: 1px solid rgba(74,222,128,.28); }

/* ================================================
   DISABLED BANNER
   ================================================ */
.mj-disabled-banner {
    display: flex; align-items: center; gap: 12px;
    background: rgba(124,58,237,.07); border: 1px solid rgba(124,58,237,.2);
    border-radius: 14px; padding: 20px 24px;
    color: rgba(255,255,255,.6); margin: 16px 0;
    font-weight: 600;
}

/* ================================================
   PANEL ADMIN (sin cambios de estructura, solo tuning)
   ================================================ */
.cases-admin-panel {
    margin-top: 52px;
    border-top: 1px solid rgba(124,58,237,.18);
    padding-top: 32px;
}
.cases-admin-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 24px;
}
.cases-admin-panel-title { display: flex; align-items: center; gap: 10px; }
.cases-admin-panel-title h2 {
    font-family: 'Rajdhani', sans-serif; font-size: 1.25rem; font-weight: 800;
    color: #fff; margin: 0;
}
.cases-admin-panel-icon { font-size: 1.4rem; }
.cases-admin-panel-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cases-admin-tab {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
    color: rgba(124,58,237,.6);
    padding: 6px 14px; border-radius: 9px;
    font-size: .8rem; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: all .2s; white-space: nowrap;
}
.cases-admin-tab:hover { background: rgba(124,58,237,.15); color: #c4b5fd; }
.cases-admin-tab--active {
    background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(91,33,182,.35));
    border-color: rgba(124,58,237,.5); color: #fff;
}
.cases-admin-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: #e53e3e; color: #fff; font-size: .62rem; font-weight: 800;
    min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
    margin-left: 6px; vertical-align: middle;
}
.cases-admin-section { padding: 4px 0; }
.cases-admin-section--hidden { display: none; }
.cases-admin-two-col, .cases-edit-two-col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.cases-edit-two-col { margin-bottom: 4px; }

/* KPIs */
.cases-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.cases-kpi {
    background: rgba(124,58,237,.04); border: 1px solid rgba(124,58,237,.1);
    border-radius: 14px; padding: 18px 16px; text-align: center; transition: border-color .2s;
}
.cases-kpi--loading   { opacity: .5; }
.cases-kpi--skin      { border-color: rgba(124,58,237,.2); }
.cases-kpi--vacio     { border-color: rgba(75,85,99,.3); }
.cases-kpi--revenue   { border-color: rgba(240,192,64,.2); }
.cases-kpi--alert     { border-color: rgba(239,68,68,.2); }
.cases-kpi--alert-active { border-color: rgba(239,68,68,.6) !important; background: rgba(239,68,68,.07); }
.cases-kpi-icon  { font-size: 1.4rem; margin-bottom: 6px; }
.cases-kpi-val   { font-family: 'Space Mono', monospace; font-size: 1.15rem; font-weight: 700; color: #fff; }
.cases-kpi-label { font-size: .7rem; color: rgba(124,58,237,.45); margin-top: 4px; }

/* Top cajas */
.cases-top-cajas-lista { padding: 8px 0; }
.cases-top-caja-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.cases-top-caja-row:last-child { border-bottom: none; }
.cases-top-rank { font-family: 'Space Mono',monospace; font-size: .8rem; color: rgba(124,58,237,.4); min-width: 24px; }
.cases-top-info { flex: 1; min-width: 0; }
.cases-top-nombre { font-size: .82rem; font-weight: 700; color: #c4b5fd; display: block; margin-bottom: 4px; }
.cases-top-bar-wrap { height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.cases-top-bar { height: 100%; background: linear-gradient(90deg, #7c3aed, #a855f7); border-radius: 2px; transition: width .4s ease; }
.cases-top-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .72rem; color: rgba(124,58,237,.4); text-align: right; }

/* Lista admin cajas */
.cases-admin-lista { display: flex; flex-direction: column; gap: 10px; }
.cases-admin-caja-row {
    display: flex; align-items: center; gap: 14px;
    background: rgba(124,58,237,.04); border: 1px solid rgba(124,58,237,.1);
    border-radius: 12px; padding: 14px 16px;
    flex-wrap: wrap; transition: border-color .2s;
}
.cases-admin-caja-row:hover { border-color: rgba(124,58,237,.3); }
.cases-admin-caja-row--inactiva { opacity: .55; }
.cases-admin-caja-thumb {
    width: 48px; height: 48px; border-radius: 10px; overflow: hidden;
    background: rgba(124,58,237,.1);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cases-admin-caja-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cases-admin-caja-thumb span { font-size: 1.6rem; }
.cases-admin-caja-info { flex: 1; min-width: 160px; }
.cases-admin-caja-nombre { font-size: .92rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.cases-admin-caja-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: .73rem; color: rgba(124,58,237,.4); }
.cases-admin-caja-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Pendientes */
.cases-pendientes-hint {
    background: rgba(240,192,64,.07); border: 1px solid rgba(240,192,64,.18);
    border-radius: 10px; padding: 12px 16px;
    font-size: .82rem; color: #d4b54a; margin-bottom: 16px; line-height: 1.5;
}
.cases-pendiente-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: rgba(124,58,237,.04); border: 1px solid rgba(124,58,237,.1);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
    transition: border-color .2s;
}
.cases-pendiente-row:hover { border-color: rgba(240,192,64,.3); }
.cases-pendiente-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cases-pendiente-info { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 2px; }
.cases-pendiente-info strong { color: #fff; font-size: .85rem; }
.cases-pendiente-info span  { color: #c4b5fd; font-size: .78rem; }
.cases-pendiente-info small { color: rgba(124,58,237,.4); font-size: .7rem; }
.cases-pendiente-tl { color: var(--cs-purple2); font-size: .75rem; text-decoration: none; }
.cases-pendiente-tl:hover { text-decoration: underline; }
.cases-pendiente-skin-img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; background: rgba(0,0,0,.3); border-radius: 8px; }

/* Builder */
.cases-builder-hint { font-size: .78rem; color: rgba(124,58,237,.45); margin-bottom: 12px; line-height: 1.5; }
.cases-builder-items { display: flex; flex-direction: column; gap: 8px; }
.cases-builder-item { background: rgba(124,58,237,.04); border: 1px solid rgba(124,58,237,.1); border-radius: 9px; padding: 8px 10px; }
.cases-builder-item-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cases-builder-item-label { font-size: .8rem; color: rgba(196,181,253,.6); flex: 1; }
.cbi-skin { flex: 1; min-width: 140px; }
.cbi-prob { width: 90px !important; flex-shrink: 0; }
.cases-builder-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cases-pct-badge { font-family: 'Space Mono', monospace; font-size: .74rem; padding: 2px 10px; border-radius: 12px; font-weight: 700; white-space: nowrap; }
.cases-pct--ok  { background: rgba(74,222,128,.18);  color: #4ade80; }
.cases-pct--bad { background: rgba(248,113,113,.18); color: #f87171; }
.cases-builder-preview { margin-top: 12px; }
.cases-builder-preview-title { font-size: .74rem; color: rgba(124,58,237,.45); margin-bottom: 8px; font-weight: 600; }
.cases-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cases-bar-label { font-size: .72rem; color: rgba(196,181,253,.6); width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.cases-bar-track { flex: 1; height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.cases-bar-fill  { height: 100%; border-radius: 3px; min-width: 2px; }
.cases-bar-pct   { font-size: .7rem; color: rgba(124,58,237,.4); font-family: 'Space Mono', monospace; width: 42px; text-align: right; flex-shrink: 0; }

/* Toggle */
.cases-limitada-wrap { display: flex; flex-direction: column; gap: 6px; }
.cases-toggle-label { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: rgba(196,181,253,.7); cursor: pointer; user-select: none; }
.cases-toggle-track { width: 36px; height: 20px; background: rgba(255,255,255,.1); border-radius: 10px; position: relative; transition: background .2s; flex-shrink: 0; }
.cases-toggle-label input[type=checkbox] { display: none; }
.cases-toggle-label input[type=checkbox]:checked ~ .cases-toggle-track { background: var(--cs-purple); }
.cases-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.cases-toggle-label input[type=checkbox]:checked ~ .cases-toggle-track .cases-toggle-thumb { transform: translateX(16px); }

/* Imagen preview */
.cases-img-input-wrap { position: relative; }
.cases-img-preview-wrap { margin-top: 8px; width: 64px; height: 64px; background: rgba(124,58,237,.05); border: 1px solid rgba(124,58,237,.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cases-img-preview { width: 100%; height: 100%; object-fit: contain; }
.cases-img-preview-placeholder { font-size: 1.8rem; opacity: .4; }

/* Config info */
.cases-info-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: .8rem; color: rgba(196,181,253,.5); }
.cases-info-row:last-child { border-bottom: none; }
.cases-info-val { color: #c4b5fd; font-weight: 600; }

/* Required */
.mj-required { color: #f87171; }

/* Messages */
.mj-msg { margin-top: 10px; padding: 10px 14px; border-radius: 10px; font-size: .84rem; display: none; }
.mj-msg--ok  { display: block; background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.25); color: #4ade80; }
.mj-msg--err { display: block; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); color: #f87171; }

/* Empty state */
.mj-empty { text-align: center; color: rgba(124,58,237,.4); padding: 28px 16px; font-size: .85rem; }
.mj-empty--big { padding: 56px 24px; font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.25); }

/* Mini lista */
.mj-mini-lista { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(124,58,237,.2) transparent; }

/* Login card */
.mj-card--login { border-color: rgba(124,58,237,.15); }

/* ---- RESPONSIVE -------------------------------- */
@media (max-width: 900px) {
    .cases-admin-two-col, .cases-edit-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .cases-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
    .cases-card-media { height: 155px; }
    .cases-modal-box { padding: 20px 16px 18px; }
    .cases-items-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
    .cases-kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .cases-admin-caja-row { flex-direction: column; align-items: flex-start; }
    .cases-hero-content { gap: 14px; }
    .cases-hero-icon { font-size: 2.6rem; }
}
@media (max-width: 480px) {
    .cases-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .cases-admin-panel-header { flex-direction: column; align-items: flex-start; }
    .cases-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .cases-hero { padding: 24px 16px 0; }
}