.grupoConfiguracion{ border: solid 1px; border-color: var(--color2_suave); border-radius: 5px; 
    margin: 0px 10px; min-width: 260px; }
.grupoConfiguracion{margin-bottom: 20px;}

.grupoConfiguracion .opciones{ background-color: var(--color2_suave); overflow: hidden; padding: 5px 0px; }
.grupoConfiguracion .opciones .vista>div, .grupoConfiguracion .opciones .vista>a{ display: table; width: 140px; cursor: pointer; }

.grupoConfiguracion .titulo + .opciones{margin-top: 5px;}

.grupoConfiguracion .opcion>input{position: absolute; width: 140px; height: 52px; opacity: 0; cursor: pointer; z-index: 10; } 
.grupoConfiguracion .opcion .dato input{ display: none; }
.grupoConfiguracion .opcion{ margin: 10px auto; border-radius: 3px; overflow: hidden; }
.grupoConfiguracion .opcion>input:checked + .vista + .dato input{display: block; border: none; width: 80px; padding: 5px 10px;
    margin-right: 10px; text-align: center;}
.grupoConfiguracion .opcion .vista{ border: solid 1px; border-color: var(--color2_suave);  }
.grupoConfiguracion .opcion>input:checked + .vista, .grupoConfiguracion .opcion>input:checked + .vista + .dato, 
.grupoConfiguracion .opcion>input:hover + .vista, 
.grupoConfiguracion .opcion.activo .vista,
.grupoConfiguracion .opcion:hover .vista{ 
    background-color: var(--color2); 
}
.grupoConfiguracion .opcion>input:checked + .vista *, 
.grupoConfiguracion .opcion>input:hover + .vista *,
.grupoConfiguracion .opcion.activo .vista *, .grupoConfiguracion .opcion:hover .vista *{ color:#FFF;}

.grupoConfiguracion .opcion.activo .dato, .grupoConfiguracion .opcion:hover .dato{background-color: #FFF; padding: 0px 5px; width: 80px; text-align: center;}

.grupoConfiguracion .opciones .vista>div>*, .grupoConfiguracion .opciones .vista>a>*{display: table-cell; vertical-align: middle; position: relative;}
.grupoConfiguracion .opciones .vista span{ padding-right: 20px; line-height: 20px; }
.grupoConfiguracion .titulo{ padding: 10px 10px 5px 10px; text-align: center; text-transform: uppercase; line-height: 15px; }
.grupoConfiguracion .descripcion{padding: 0px 10px 10px 10px; text-align: center; line-height: 15px;}
.grupoConfiguracion .vista .icono-fuente{width: 60px; font-size: 40px; height: 50px; text-align: center; }
#superiorInfo div .icono-fuente{line-height: 60px;}

#configuracion{display: table; margin: 50px auto 20px auto; }

@media screen and (min-width:660px){
    .grupoConfiguracion{float: left;}
    .opciones1>div{float: left; margin: 0px 5px;}
    .grupoConfiguracion .opciones1{padding: 0px 5px;}
}

.grupoConfiguracion .opcion .imagen{
    width: 60px;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    height: 50px;
    background-position: center center;
}