/* =============================================================================
   GAIA VIP — Page Styles: Participation Simulator
   -----------------------------------------------------------------------------
   Estilos SOLO del simulador de participaciones:
   - Aísla el look del simulador sin afectar a Bootstrap ni al resto de la app.
   - Incluye overrides finales (bordes blancos, grises invertidos, verde central).
   Regla: si no es del simulador, no va aquí.
   ============================================================================= */

.gaia-sim-compact {
    padding: .25rem;
}

    .gaia-sim-compact .sim-panel {
        background: rgba(255,255,255,.02);
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 16px;
        padding: 16px;
    }

    /* Botones (modo “sim”) */
    .gaia-sim-compact .btn {
        border-color: var(--sim-btn-border) !important;
        color: var(--text-main) !important;
    }

        .gaia-sim-compact .btn:hover {
            border-color: var(--sim-btn-border-hover) !important;
            background: rgba(255,255,255,.06) !important;
        }

    .gaia-sim-compact .btn-outline-accent {
        background: transparent !important;
    }

    /* Contador */
    .gaia-sim-compact .sim-counter {
        margin-top: .85rem;
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 14px;
        padding: 14px;
        background: rgba(255,255,255,.03);
    }

    .gaia-sim-compact .sim-counter-label {
        font-size: .85rem;
        color: var(--text-muted);
        margin-bottom: 6px;
    }

    .gaia-sim-compact .sim-counter-value {
        font-size: 1.35rem;
        font-weight: 800;
    }

    .gaia-sim-compact .sim-counter-sub {
        margin-top: .35rem;
        font-size: .95rem;
        color: var(--text-muted);
        display: flex;
        gap: .5rem;
        align-items: baseline;
    }

    .gaia-sim-compact .sim-plus {
        font-weight: 900;
    }

    /* Tablero */
    .gaia-sim-compact .sim-board-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .gaia-sim-compact .sim-board-title {
        width: 100%;
        margin: .25rem 0 .75rem 0;
        font-weight: 750;
    }

    .gaia-sim-compact .sim-board {
        display: grid;
        grid-template-columns: 120px 64px repeat(6, 64px);
        gap: 10px;
        align-items: center;
    }

    .gaia-sim-compact .sim-h {
        text-align: center;
        font-size: .85rem;
        color: var(--text-muted);
    }

    .gaia-sim-compact .sim-level-label {
        font-weight: 750;
    }

    /* Columna central */
    .gaia-sim-compact .sim-center-cell {
        height: 34px;
        border-radius: 12px;
        border: 1px solid var(--sim-track-border);
        background: var(--sim-track-bg);
    }

        .gaia-sim-compact .sim-center-cell.is-green {
            background: var(--sim-green-bg);
            border-color: var(--sim-green-border);
            box-shadow: 0 0 0 1px rgba(0,255,170,.20);
        }

    /* Casillas */
    .gaia-sim-compact .sim-cell {
        height: 34px;
        border-radius: 12px;
        background: var(--sim-cell-bg);
        border: 1px solid var(--sim-cell-border);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }

        .gaia-sim-compact .sim-cell.is-filled {
            background: rgba(255,255,255,.25);
            border-color: rgba(255,255,255,.80);
        }

        /* Colores por nivel (si los usas en markup) */
        .gaia-sim-compact .sim-cell.lvl-1 {
            background: var(--sim-lvl1);
        }

        .gaia-sim-compact .sim-cell.lvl-2 {
            background: var(--sim-lvl2);
        }

        .gaia-sim-compact .sim-cell.lvl-3 {
            background: var(--sim-lvl3);
        }

        .gaia-sim-compact .sim-cell.lvl-4 {
            background: var(--sim-lvl4);
        }

        .gaia-sim-compact .sim-cell.lvl-5 {
            background: var(--sim-lvl5);
        }

        .gaia-sim-compact .sim-cell.lvl-6 {
            background: var(--sim-lvl6);
        }

    /* FIN */
    .gaia-sim-compact .sim-level-label.fin {
        opacity: .95;
    }

    .gaia-sim-compact .sim-center-cell.fin {
        opacity: .85;
    }

    .gaia-sim-compact .sim-cell.fin {
        opacity: .25;
    }

    /* Mensajería */
    .gaia-sim-compact .sim-message {
        margin-top: .75rem;
        color: var(--text-muted);
        font-size: .9rem;
        min-height: 1.1rem;
    }

/* Responsive */
@media (max-width: 991.98px) {
    .gaia-sim-compact .sim-board {
        grid-template-columns: 110px 56px repeat(6, 1fr);
    }
}

/* =============================================================================
   OVERRIDE FINAL (invertido)
   - Borde blanco
   - Vacío: gris claro rgb(217,217,217)
   - Lleno: gris oscuro rgb(128,128,128)
   - Verde visible en el centro
   ============================================================================= */

.gaia-sim-compact .sim-cell,
.gaia-sim-compact .sim-center-cell {
    border: 1px solid #ffffff !important;
    border-radius: 12px;
}

.gaia-sim-compact .sim-cell {
    background: rgb(217, 217, 217) !important;
}

    .gaia-sim-compact .sim-cell.is-filled {
        background: rgb(128, 128, 128) !important;
    }

.gaia-sim-compact .sim-center-cell {
    background: rgb(128, 128, 128) !important;
}

    .gaia-sim-compact .sim-center-cell.is-green {
        background: rgb(0, 255, 170) !important;
    }

/* Botones del simulador con borde blanco */
.gaia-sim-compact .btn {
    border-color: #ffffff !important;
    color: var(--text-main) !important;
}

    .gaia-sim-compact .btn:hover {
        background: rgba(255,255,255,.10) !important;
    }

/* FIN: “no pintamos” las 6 casillas derechas pero mantenemos el grid */
.gaia-sim-compact .sim-fin-spacer {
    height: 34px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}