<div class="opciones">
    <div class="card" *ngFor="let card of span">
        <div class="card-flip" (click)="toggleFlip(card)" [@flipState]="card.flip">
            <div class="card-side card-front cursor-pointer" (click)="comprobarModulo(card.categoria)">
                <div class="circle">
                    <img class="cardImg" [src]="card.img">
                </div>
                <div class="linea" [style.background-color]="color">
                    <span class="card-text" [style.color]="textColor"> {{card.title}}</span>
                </div>
            </div>
            <div class="card-side card-back">
                <div class="linea-back" [style.background-color]="color">
                    <span class="card-text" [style.color]="textColor">{{card.title}}</span>
                </div>
                <div class="options">
                    <div *ngFor="let option of comprobarModulo(card.categoria)" (click)="navegar(option.url)"
                        class="card-option" style="margin-top: 10px; margin-bottom: 10px;">
                        <div class="option-content cursor-pointer">
                            {{option.title}}
                            <mat-icon [svgIcon]="option.icono"></mat-icon>
                        </div>
                        
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>