.ficha-producto {

    /*border: 1px solid var(--color-2);*/
    border-radius: .5rem;

    .nav {
        display: flex;
        border-bottom: 1px solid var(--color-2);
        flex-wrap: wrap;
        gap: .1rem;
        margin-bottom: 1rem;

        button {
            color: var(--color-1-1);
            cursor: pointer;
            padding: .6rem 1rem;
        }

        button:hover, button.activo {
            background-color: var(--color-2);
            border-radius: .5rem .5rem 0 0;
            color: white;
        }
    }

    .step {
        display: none;
    }

    .step.activo {
        display: revert;
    }
    
    #variantes {
        display: grid;
        grid-template-areas:
        "generador generador"
        "atributos atributos"
        "listado listado";
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto;
        
        #generador { grid-area: generador; }
        
        #listado { grid-area: listado; }
        
        #atributos { grid-area: atributos; }
        
        #generador, #listado, #atributos {
            border: 1px solid var(--color-2);
            border-radius: .5rem;
            margin: .6rem;
            padding: .5rem;
        }
        
        #generador {
            display: flex;
            justify-content: space-between;
            
            .seleccion-atributos {
                display: flex;
                flex-grow: 1;
                flex-wrap:wrap;
                .atributo {
                    display: flex;
                    background-color: var(--gris-3);
                    border-radius: .5rem;
                    color: var(--color-4);
                    cursor: pointer;
                    flex-wrap: wrap;
                    margin: .5rem;
                    opacity: .8;
                    padding: .6rem;
                }
                .atributo:hover {
                    opacity: 1;
                }
            }
            button {
                background-color: var(--color-4);
                border-radius: .5rem;
                color: white;
                cursor: pointer;
                opacity: .8;
                padding: .5rem 1rem;
            }
            button:hover {
                opacity: 1;
            }
        }

        #listado {
            border: none;
            .tabla {
                width: 100%;
            }
        }

        #atributos {

            .seccion {

                background-color: var(--gris-3);
                border-radius: .5rem;
                margin-bottom: 1rem;
                padding: .8rem .5rem;

                .titulo {
                    color: var(--color-4-2);
                    cursor: pointer;
                    margin: 0 0 .5rem 0;
                    text-transform: uppercase;
                }

                .titulo:hover {
                    color: var(--color-4);
                }

                .opciones {
                    
                    display: none;
                    
                    .opcion {
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        gap: .6rem;
                        margin-bottom: .5rem;

                        input[type=checkbox] {
                            margin-right: .3rem;
                        }

                        .color, .miniatura {
                            border-radius: .5rem;
                            opacity: 1;
                            width: 3rem;
                            height: 3rem;
                        }

                        .miniatura {
                            background-size: cover;
                        }

                        .texto {
                            color: var(--color-4);
                            font-style: italic;
                            opacity: .6;
                        }

                        .texto::before {
                            content: '- ';
                        }

                        .texto:hover {
                            opacity: 1;
                        }
                    }
                }

                .opciones.mostrar {
                    display: revert;
                    padding-top: 1rem;
                }
            }
        }
    }
    
    .acciones {
        display: flex;
        align-items: center;
        border-radius: 0 0 .5rem .5rem;
        position: sticky;
        bottom: 0;
        gap: 1rem;
        justify-content: end;
        padding: 1rem;

        .btn {
            border-radius: .5rem;
            color: white;
            cursor: pointer;
            opacity: .6;
            padding: .8rem;
        }

        .btn:hover {
            opacity: 1;
        }

        .btn.cancel {
            background-color: var(--rojo-2);
        }

        .btn.success {
            background-color: var(--color-4);
        }
    }

    .acciones.principal {
        background-color: white;
        border-top: 1px solid var(--color-2);
    }
}

@media (min-width: 765px){

    .ficha-producto {
        
        #variantes {
            grid-template-areas:
                "generador atributos"
                "listado atributos"
                "listado atributos";
            grid-template-columns: 1fr 30%;
            grid-template-rows: auto 1fr;
        }
    }
}